Frontend design guardrails — distinctive, non-generic UI with hard rules
Une méthodologie de design frontend pilotée par règles : contraintes strictes contre l'esthétique IA générique, discipline typographique et couleur, checks de cohérence des composants, et checklist de revue de design
- Quoi
- Une méthodologie de design frontend pilotée par règles : contraintes strictes contre l'esthétique IA générique, discipline typographique et couleur, checks de cohérence des composants, et checklist de revue de design
- Coût
- Gratuit
- Prérequis
- un projet frontend ou une demande d'UI — le skill est une méthodologie de design que l'agent suit, pas un logiciel
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill frontend-design de @customware-ai : une méthodologie pilotée par règles pour des interfaces distinctives, avec des garde-fous stricts plutôt qu'une vague inspiration. Impose une discipline typographique (un petit nombre de choix typographiques délibérés), une discipline couleur (palettes restreintes avec intention), des contraintes strictes contre le look IA générique (pas de dégradés par défaut, pas de sections hero copier-coller, pas de bouillie d'icônes stock), des checks de cohérence des composants, des règles d'espacement et de layout, et une checklist de revue de design à exécuter avant de shipper. Bémols honnêtes : plusieurs fiches frontend-design existent déjà au catalogue — celle-ci est conservée pour son format de règles strictes et vérifiables ; compare avec les existantes et installe celle dont le style de guidance te convient le mieux. Licence MIT. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet frontend ou une demande d'UI — le skill est une méthodologie de design que l'agent suit, pas un logiciel Installe-moi « Garde-fous design frontend — UI distinctive, non générique, avec règles strictes ». Il donne à mon agent la méthodologie de design pilotée par règles de @customware-ai : discipline typographique et couleur, contraintes strictes contre l'esthétique IA générique, checks de cohérence des composants, règles d'espacement/layout, et checklist de revue de design avant ship. NOTE : plusieurs fiches frontend-design existent déjà au catalogue — compare et installe celle dont le style de guidance te convient le mieux. Licence MIT. Dépôt : https://github.com/customware-ai/skills/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). 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é « 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. pointer l'agent vers l'UI à designer ou réviser ; rien d'autre — c'est une méthodologie de design). 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.