Frontend design with OpenDesign integration: distinctive, production-grade interfaces
L'adaptation par @nexu-io du skill frontend-design d'Anthropic pour OpenDesign — choisir une direction esthétique, éviter les clichés IA, livrer du code responsive fonctionnel avec une section design-system
- Quoi
- L'adaptation par @nexu-io du skill frontend-design d'Anthropic pour OpenDesign — choisir une direction esthétique, éviter les clichés IA, livrer du code responsive fonctionnel avec une section design-system
- Coût
- Gratuit
- Prérequis
- une interface frontend à designer — le skill est un guide 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 — l'adaptation par @nexu-io du skill frontend-design officiel d'Anthropic pour OpenDesign (crédit à @nexu-io et à l'original @anthropics en amont). Un workflow pour livrer du code frontend fonctionnel avec un point de vue design clair plutôt qu'un simple « rends-le plus beau » : comprendre le brief (audience, besoin, ton, contraintes) avant de choisir l'esthétique ; s'engager sur une seule direction esthétique (brutalement minimal, éditorial, luxueux, ludique, industriel, rétro-futuriste, dense opérationnel, entreprise calme) concrétisée par typographie, espacement, couleur, hiérarchie, mouvement et forme des composants ; designer la vraie interface avec du contenu honnête (contrôles, états vide/chargement/erreur, tableaux, filtres, navigation, comportement responsive — données d'exemple étiquetées comme telles, jamais d'allégations inventées) ; construire du code de qualité production (conventions de framework existantes, markup sémantique, accès clavier, focus visible, contraste raisonnable, variables CSS pour les tokens) ; puis affiner typographie, couleur, layout, mouvement et détails. Auto-revue avant livraison : fonctionne en mobile et desktop, le texte tient dans ses conteneurs, états hover/focus/active/disabled, aucun cliché IA évident, une qualité mémorable. Intégration OpenDesign : quand OpenDesign injecte un design system actif, il fait foi comme contrat de marque ; les contrôles de craft injectés (typographie, couleur, anti-ai-slop) s'exécutent avant de finir ; en cas de conflit, la direction de marque gagne. Licence Apache-2.0. Note : des fiches compagnon couvrent le même skill upstream depuis les sources originales — « anthropics-claude-plugins-official-frontend-design » et « anthropics-claude-code-frontend-design ». 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 interface frontend à designer — le skill est un guide de design que l'agent suit, pas un logiciel à installer Installe-moi « Design frontend avec intégration OpenDesign : interfaces distinctives de qualité production ». Il donne à mon agent l'adaptation par @nexu-io du skill frontend-design officiel d'Anthropic pour OpenDesign : comprendre le brief, s'engager sur une direction esthétique, éviter les clichés IA, designer la vraie interface avec du contenu honnête (états vide/chargement/erreur inclus), livrer du code responsive accessible de qualité production, affiner le craft, et s'auto-revoir avant livraison ; plus l'intégration OpenDesign (design system actif comme contrat de marque, contrôles de craft injectés). Licence Apache-2.0. Dépôt : https://github.com/nexu-io/open-design/blob/main/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). Examine les fichiers à la recherche de commandes suspectes ou d'une gestion d'identifiants douteuse ; arrête-toi sur tout signal d'alerte et ne présume jamais que le dépôt est sûr. Dis-le-moi si quelque chose semble anormal. 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. décrire l'interface à construire et toute direction de marque/design system ; rien d'autre — c'est une méthodologie). 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.