Design clear, distinctive web interfaces
Un raisonnement web-design honnête pour agents — la structure avant l'ornement, le vrai contenu d'abord, des états et sémantiques complets, l'accessibilité comme preuve, et pas de redesign pour la nouveauté
- Quoi
- Un raisonnement web-design honnête pour agents — la structure avant l'ornement, le vrai contenu d'abord, des états et sémantiques complets, l'accessibilité comme preuve, et pas de redesign pour la nouveauté
- Coût
- Gratuit
- Prérequis
- une tâche de design de site ou app web (nouvelle interface, changement visuel, ou audit de design) — le skill est un raisonnement de design que l'agent suit, pas un logiciel à installer
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — fiche courte (le repo ne déclare aucune licence, donc aucun contenu n'est reproduit) : le skill designing-beautiful-websites de @tristanmanchester — des interfaces web claires et distinctives construites à partir du vrai contenu et comportement, avec la thèse que la beauté n'est pas une palette universelle ni l'obligation de tout dépouiller. Il couvre l'établissement de la vraie tâche de design (utilisateur, objectif, parcours, contraintes — rester local pour une demande de polissage, implémenter le livrable pour un nouveau site, ne jamais prétendre avoir interagi avec une page vue seulement en capture d'écran), la structure avant l'ornement (tracer la tâche clé, concevoir l'ordre de l'information pour écrans étroits/zoom/clavier, pas un screenshot desktop réduit), un point de vue visuel (une direction esthétique intentionnelle par brief — pas un modèle appliqué quel que soit le brief ; hiérarchie typo/taille/espacement avant la décoration ; motion sobre et utile avec fallbacks reduced-motion ; pas de faux logos clients, avis, prix ou statistiques), des états et sémantiques complets (boutons vs liens, erreurs de formulaire récupérables, bons patterns menu/dialogue/onglets), des contrôles d'accessibilité ciblés (un ratio de contraste ou un scan automatisé est une preuve, pas un certificat), et des règles honnêtes d'inspection/tests (une revue heuristique n'est pas un test utilisateur ; un plan de test n'est pas un test terminé ; ne jamais affirmer des gains de performance ou de conversion sans preuve). Chargement progressif des références (visual-design, information-architecture, interaction, content, responsive, accessibility, design-audit, page-patterns) plutôt que formats de sortie obligatoires. Bémols honnêtes : raisonnement de design uniquement — l'implémentation et les vérifications navigateur dépendent des outils du projet ; la baseline de rédaction a été revue contre agentskills.io en 2026-09 ; licence non déclarée par le repo source — fiche courte avec lien uniquement, rien copié. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : une tâche de design de site ou app web (nouvelle interface, changement visuel, ou audit de design) — le skill est un raisonnement de design que l'agent suit, pas un logiciel à installer Installe-moi « Concevoir des interfaces web claires et distinctives ». Il donne à mon agent le skill designing-beautiful-websites de @tristanmanchester : établir la vraie tâche de design, la structure avant l'ornement, un point de vue visuel intentionnel, des états et sémantiques complets, des contrôles d'accessibilité ciblés, des règles honnêtes d'inspection/tests, et le chargement progressif des références (visuel, IA, interaction, contenu, responsive, accessibilité, audit). IMPORTANT : le repo ne déclare aucune licence — récupérer depuis le lien seulement, et ne rien reproduire au-delà du lien. Dépôt : https://github.com/tristanmanchester/agent-skills/blob/main/designing-beautiful-websites/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « designing-beautiful-websites ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. décrire la tâche de design et fournir le vrai contenu ou des captures d'écran ; rien d'autre — c'est du raisonnement). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.