Frontend design: distinctive, intentional visual design guidance (official Anthropic plugin)
Direction de style design-lead pour éviter les rendus génériques d'IA — typographie, retenue, processus plan-puis-build en deux temps
- Quoi
- Direction de style design-lead pour éviter les rendus génériques d'IA — typographie, retenue, processus plan-puis-build en deux temps
- Coût
- Gratuit
- Prérequis
- rien à installer — le skill est une direction de design que votre agent applique quand il construit ou remodèle une UI
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le plugin officiel @anthropics qui fait designer un agent comme un directeur de studio : des choix délibérés et tranchés de palette, typographie et mise en page qui expriment un point de vue, jamais un template. Il ancre chaque design dans le sujet du brief, suit un processus en deux temps (planifier un système de tokens compact — couleurs, typo, layout, principes — en wireframes ASCII, puis le critiquer face au brief avant d'écrire la moindre ligne de code), dénonce les cinq clichés visuels des pages générées par IA (crème chaud avec terracotta, vert acide sur noir, filets façon journal, le kit de cartes SaaS, les sur-titres TOUT EN MAJUSCULES), et exige de la retenue — un seul élément mémorable, tout le reste discret — plus un rendu responsive, accessible, navigable au clavier et des textes écrits pour les utilisateurs finaux, pas pour les systèmes. Licence Apache-2.0. Bémols honnêtes : c'est une direction de goût, pas des composants — ça n'écrira pas votre app à votre place ; et ses recommandations « à éviter » doivent céder devant le brief, qui gagne toujours. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh. Note : contenu quasi identique à la fiche « anthropics-claude-code-frontend-design » (autre repo officiel Anthropic) — deux sources pour le même skill, choisissez celle que vous préférez.
Version :
Installation
Prérequis : rien à installer — le skill est une direction de design que votre agent applique quand il construit ou remodèle une UI Installe-moi « Design frontend : direction visuelle distinctive et intentionnelle (plugin officiel Anthropic) ». Il donne à mon agent l'approche design-lead officielle de @anthropics : ancrer chaque design dans le sujet du brief, travailler en deux temps (planifier un système de tokens compact en wireframes ASCII, le critiquer face au brief avant d'écrire du code), éviter les cinq clichés des pages générées par IA, concentrer l'audace en un seul endroit, et livrer une UI responsive, accessible, navigable au clavier avec des textes pour utilisateurs finaux. Licence Apache-2.0. Dépôt : https://github.com/anthropics/claude-plugins-official/blob/main/plugins/frontend-design/skills/frontend-design/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, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. 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é « frontend-design ». 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. rien — demandez simplement à l'agent de l'appliquer à la prochaine tâche UI). 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.