83.3K+Télécharger
Aller au guide d’utilisation
frontend-designpar Anthropic

Frontend Design Skill.

Un skill Claude Code et Codex pour la conception d'interfaces distinctives : typographie, couleur et mise en page choisies à dessein.

  • Web et UI
  • Websites
  • Refonte UI
  • Typography
Télécharger OpenDesignVoir le guide d'utilisation
DESIGN DIRECTION / 01BRIEF → INTERFACE
AaTYPE WITH INTENT
A quieter palette.
A clearer hierarchy.
● ● ●homepage.html ↗
scope®Made for independent designers
LESS ADMIN. MORE MAKING.Good work.
Clear scope.

A considered space for your next project, from the first quote to the final yes.

Create your quote ↗
YOUR NEXT PROJECTBrand &
website design
01 Define the work
02 Agree on the scope
03 Get the go-ahead
Ready when you are. ↗
THE STARTING POINT

“A quoting tool for freelance designers.
Make the next step feel clear.”

Illustrative composition · not a recorded skill output

01 Du brief à l'interface

Une tâche de conception frontend, du brief à l'interface.

Donnez à Claude Code ou Codex le produit, l'audience et le contenu ; le skill frontend-design prend les décisions visuelles.

Brief d'exempleFlux de travail illustratif · pas une exécution enregistrée

Une page d'accueil pour un outil de devis

Aidez les designers indépendants à comprendre comment créer des devis, convenir des modifications de périmètre et obtenir l'approbation du client.

Ressources de marqueTarificationFAQ
Voir l'intégralité du prompt ↗

Ce que guide le Skill

  1. 01
    Trouver la direction visuelle

    Une palette, une hiérarchie typographique et une mise en page liées au produit.

  2. 02
    Examiner le plan

    Vérifiez la direction par rapport au brief avant de construire.

  3. 03
    Créer et affiner

    Une interface adaptative avec des actions claires et des états accessibles.

02 Trouvez celui qui vous convient

Quand utiliser le skill frontend-design

Utilisez le skill frontend-design quand les décisions visuelles font partie du travail — une nouvelle page construite dans Claude Code ou Codex, ou une refonte d'interface qui semble template.

Bon choix

  • Une nouvelle page ou un site à partir d'un briefPages de destination, sites produits, portfolios, petites applications — tout ce qui commence par « à quoi cela devrait-il ressembler ? »
  • Une refonte visuelle d'une interface existanteVous avez une UI fonctionnelle qui semble template et voulez une direction ancrée dans le sujet du produit.
  • Correction de la typographie et de la hiérarchieÉchelle typographique, longueur de ligne, graisse et espacement définis avec intention plutôt que par les valeurs par défaut du framework.
  • Des briefs avec du vrai contenuLe skill construit à partir de la copie et du sujet réels du brief ; plus vous fournissez de matière concrète, plus le résultat est spécifique.

Connaître les limites

  • Vous avez déjà un design systemFournissez ses règles et ses composants. Le skill doit suivre votre brief et travailler dans les choix visuels qui restent ouverts.
  • Le travail est logique, données ou backendSon orientation est le design visuel. La logique applicative, les API et les tests fonctionnels nécessitent leur propre travail d'implémentation.
  • Vous voulez une bibliothèque de composants ou des templatesIl fournit des instructions de design, plutôt qu'une bibliothèque de composants ou un modèle de page prêts à l'emploi.
  • Vous avez besoin d'une revue d'une interface terminéeSon autocritique vise son propre plan. Pour auditer l'interface de quelqu'un d'autre, consultez les skills associés ci-dessous.

Quoi fournir

  • Sujet du produitCe qu'est le produit et le secteur dans lequel il évolue. Si vous omettez cela, le skill en proposera un et vous demandera de confirmer.
  • Utilisateurs ciblesPour qui la page est destinée. Cela détermine le registre visuel plus que toute autre chose.
  • Objectif de la pageLa seule tâche que la page doit accomplir, et l'action principale.
  • Contenu réelTitres, copie, prix, réponses FAQ. Le texte de substitution produit un design qui ressemble à un placeholder.
  • Assets de marque & contraintesLogo, palette, polices et tout ce qui est déjà décidé. Les mots du brief l'emportent toujours.

03 Designer avec intention

Ce que le skill apporte au design d'interface

Quatre choses que le skill frontend-design demande à Claude Code ou Codex de faire, et ce que chacune transforme votre input en.

  1. Une direction visuelle ancrée dans le sujet

    L'agent détermine ce qu'est le produit, qui il sert et à quoi ressemble son univers avant de choisir quoi que ce soit. Un jouet pour enfants de huit ans et un tableau de bord pour analystes ne devraient pas partager le même aspect.

    Vous fournissez
    sujet du produit, audience
    Vous obtenez
    une direction que vous pouvez accepter ou réorienter avant que le code ne soit écrit

  2. Type, couleur et mise en page choisis avec intention

    Une ou deux polices avec une échelle réelle, une palette de 4 à 6 couleurs nommées en hexadécimal, et un concept de mise en page avec des règles d'alignement. Les dispositifs structurels — lignes, numérotation, labels — ne sont utilisés que là où ils portent de l'information.

    Vous fournissez
    éléments de marque, contraintes
    Vous obtenez
    un système de tokens compact à partir duquel la page est construite

  3. Un plan, revu par rapport au brief, avant la construction

    Le skill fonctionne en deux passes. Il rédige le plan, puis vérifie chaque partie par rapport à la question « est-ce que je produirais cela pour n'importe quelle page similaire ? » et révise ce qui semble être un choix par défaut — en indiquant ce qui a changé et pourquoi. Le code vient après.

    Vous fournissez
    le brief
    Vous obtenez
    un plan écrit et une courte auto-évaluation que vous pouvez lire dans la transcription

  4. Qualité de base sans qu'on le demande

    Responsive jusqu'au mobile, focus clavier visible, respect du mouvement réduit, couleurs accessibles, et texte rédigé du point de vue de l'utilisateur dans un langage simple et actif.

    Vous fournissez
    vos exigences d'accessibilité
    Vous obtenez
    consignes pour l'utilisation mobile et au clavier

04 Mettez-le en pratique

Installez frontend-design dans Claude Code ou Codex

Une commande npx skills add, puis un brief dans votre agent et une checklist pour le premier résultat.

Ajoutez frontend-design à Claude Code, Codex ou votre agent

Exécutez la commande dans votre projet, suivez la sélection d'agent de l'installateur, puis vérifiez que votre agent peut découvrir frontend-design.

Terminal
npx skills add https://github.com/anthropics/skills --skill frontend-design

Source de la commande : entrée skills.sh pour frontend-design. Suivez l'installateur et confirmez que le skill apparaît dans votre agent.

Donnez au skill une première tâche de design UI

Adaptez ce brief avec les détails de votre produit, attachez les éléments de marque et le texte auxquels il fait référence, et lancez-le dans Claude Code ou Codex.

Example prompt
Use the frontend-design skill to design the homepage for a project-quoting tool for freelance designers. Goal: visitors should understand three things — how quotes are built, how scope changes are confirmed, and how clients approve — and then start creating a quote. Content: use the attached brand colors and logo. Include a hero, how it works, features, pricing, and FAQ. Use the real pricing tiers and FAQ answers I have provided; do not invent numbers or testimonials. Process: propose a visual direction that fits freelance designers and this product first, then build the desktop and mobile pages. Keep clear calls to action, visible keyboard focus, and a reduced-motion experience.

Vérifiez le premier résultat

Une bonne première exécution est facile à reconnaître. Avant d'accepter la page, cherchez ceci dans la transcription et dans le résultat :

  • Le plan est venu avant le code, avec des valeurs de palette nommées et des rôles de police de caractères.
  • L'auto-évaluation nomme au moins un choix par défaut qu'elle a remplacé, et pourquoi.
  • Votre texte réel, prix et éléments de marque apparaissent inchangés.
  • Un élément est mémorable ; le reste de la page reste sobre.
  • La page fonctionne à 390px, la tabulation montre un anneau de focus visible, et le mouvement respecte le réglage du système d'exploitation.
  • Si quelque chose semble générique, indiquez quelle partie — le skill est conçu pour recevoir cette critique et la réviser.

Vous utilisez OpenDesign ? frontend-design est inclus dans OpenDesign : ouvrez Plugins → Skills, sélectionnez-le dans la barre supérieure, et son SKILL.md est intégré dans le prompt avec votre DESIGN.md. Claude Code, Codex, Cursor ou OpenCode effectue le travail.

Télécharger OpenDesignLire le guide de démarrage

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author
Anthropic
Repository
github.com/anthropics/skills Branche main
Fichier du skill
skills/frontend-design/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 34040c9
License
Apache-2.0 D'après skills/frontend-design/LICENSE.txt ; SKILL.md indique « Conditions complètes dans LICENSE.txt ». La racine du dépôt ne déclare pas de licence distincte.
Étoiles du dépôt
176 183 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt anthropics/skills, qui contient de nombreux skills. Ce n'est pas une note ni un compteur d'utilisation pour frontend-design.
Vérifié par OpenDesign
14/09/2026 Le fichier source, le chemin, le texte de la licence et le nombre d'étoiles ont été vérifiés. Inclus dans OpenDesign main (vérifié le 28/08/2026) ; une exécution en direct dans OpenDesign n'a pas encore été enregistrée sur cette page.
Description du skill lui-même
« Guidance pour un design visuel distinctif et intentionnel lors de la création d'une nouvelle UI ou de la refonte d'une existante. Aide à la direction esthétique, à la typographie et à faire des choix qui ne semblent pas issus de modèles par défaut. »

Front-matter description from SKILL.md. The full instructions are about 9,400 characters and cover subject grounding, design principles, a plan → review → build → critique process, restraint, and writing in design. Lire le fichier complet sur GitHub.

Frontend Design

Donnez à votre agent un brief qui mérite d'être conçu.

Le skill frontend-design est inclus dans OpenDesign. Téléchargez l'application, sélectionnez le skill dans Plugins → Skills, collez l'exemple de prompt et lisez le plan avant le code.

Télécharger OpenDesignParcourir tous les skills
Terminal
npx skills add https://github.com/anthropics/skills --skill frontend-design