83.3K+Scarica
Vai alla guida all’uso
frontend-designdi Anthropic

Frontend Design Skill.

Una skill per Claude Code e Codex che genera UI distintive: tipografia, colore e layout scelti con intenzionalità.

  • Web & UI
  • Websites
  • Redesign UI
  • Typography
Scarica OpenDesignGuida all'uso
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 Dal brief all'interfaccia

Un compito di frontend design, dal brief all'interfaccia.

Fornisci a Claude Code o Codex il prodotto, il pubblico e il contenuto; la skill frontend-design prende le decisioni visive.

Brief di esempioFlusso di lavoro illustrativo · non una registrazione effettiva

Una Homepage per uno Strumento di Preventivazione

Aiuta i designer freelance a capire come creare preventivi, concordare modifiche di scope e ottenere l'approvazione del cliente.

Risorse del brandPrezziTesto FAQ
Vedi il prompt completo ↗

Cosa guida la skill

  1. 01
    Trova la direzione visiva

    Una palette, gerarchia tipografica e layout legati al prodotto.

  2. 02
    Rivedi il piano

    Verifica la direzione rispetto al brief prima di costruire.

  3. 03
    Costruisci e affina

    Un'interfaccia responsive con azioni chiare e stati accessibili.

02 Trova la tua applicazione

Quando usare la skill frontend-design

Usa la skill frontend-design quando le decisioni visive fanno parte del lavoro — una nuova pagina costruita in Claude Code o Codex, o un redesign di un'interfaccia che sembra generica.

Buona applicazione

  • Una nuova pagina o sito da un briefLanding page, siti prodotto, portfolio, piccole app — qualsiasi cosa in cui la prima domanda è "che aspetto dovrebbe avere?"
  • Un redesign visivo di un'interfaccia esistenteHai un'interfaccia funzionante che sembra generica e vuoi una direzione radicata nell'argomento del prodotto.
  • Correggere tipografia e gerarchiaScala tipografica, lunghezza della riga, peso e spaziatura impostati con intenzionalità piuttosto che con i valori predefiniti del framework.
  • Brief con contenuti realiLa skill lavora con i testi e l'argomento effettivi del brief; più materiale concreto fornisci, più specifico sarà il risultato.

Conosci i limiti

  • Hai già un design systemFornisci le sue regole e i suoi componenti. La skill deve seguire il tuo brief e operare all'interno delle scelte visive che rimangono aperte.
  • Il lavoro riguarda logica, dati o backendIl suo focus è il design visivo. Logica applicativa, API e test funzionali richiedono un lavoro di implementazione a parte.
  • Vuoi una libreria di componenti o templateFornisce istruzioni di design, non una libreria di componenti o template di pagina già pronti.
  • Hai bisogno di una revisione di una UI già completataLa sua autocritica è rivolta al proprio piano. Per verificare l'interfaccia di qualcun altro, vedi le skill correlate qui sotto.

Cosa fornire

  • Argomento del prodottoCos'è il prodotto e in quale settore opera. Se lo ometti, la skill ne proporrà uno e ti chiederà conferma.
  • Utenti targetA chi è destinata la pagina. Questo guida il registro visivo più di qualsiasi altra cosa.
  • Obiettivo della paginaIl compito che la pagina deve svolgere e l'azione primaria.
  • Contenuti realiTitoli, testi, prezzi, risposte alle FAQ. Testi segnaposto producono design dall'aspetto segnaposto.
  • Asset e vincoli del brandLogo, palette, font e tutto ciò che è già stato deciso. Le parole del brief prevalgono sempre.

03 Progetta con intenzione

Cosa porta la skill al design UI

Quattro cose che la skill frontend-design istruisce Claude Code o Codex a fare, e in cosa ciascuna trasforma il tuo input.

  1. Una direzione visiva radicata nell'argomento

    L'agente comprende cos'è il prodotto, a chi è destinato e che mondo rappresenta prima di scegliere qualsiasi cosa. Un giocattolo per bambini di otto anni e una dashboard per analisti non devono condividere lo stesso aspetto.

    Fornisci
    argomento del prodotto, pubblico
    Ottieni
    una direzione che puoi accettare o ridirigere prima che il codice venga scritto

  2. Caratteri, colori e layout scelti con uno scopo

    Uno o due caratteri tipografici con una scala reale, una palette di 4–6 colori indicati in esadecimale e un concetto di layout con regole di allineamento. Dispositivi strutturali — righe, numerazione, etichette — sono utilizzati solo dove veicolano informazione.

    Fornisci
    asset del brand, vincoli
    Ottieni
    un sistema di token compatto su cui è costruita la pagina

  3. Un piano, rivisto rispetto al brief, prima della realizzazione

    La skill lavora in due passaggi. Prepara il piano, poi verifica ogni parte rispetto alla domanda "lo produrrei per qualsiasi pagina simile?" e rivede ciò che appare generico — indicando cosa è cambiato e perché. Il codice arriva dopo.

    Fornisci
    il brief
    Ottieni
    un piano scritto e una breve auto-revisione che puoi leggere nella trascrizione

  4. Qualità di base senza che ti venga chiesto

    Responsive fino a mobile, focus da tastiera visibile, rispetto della riduzione del movimento, colore accessibile e testo scritto dal punto di vista dell'utente in un linguaggio semplice e attivo.

    Fornisci
    i tuoi requisiti di accessibilità
    Ottieni
    indicazioni per l'uso da mobile e da tastiera

04 Mettila al lavoro

Installa frontend-design in Claude Code o Codex

Un comando npx skills add, poi un brief nel tuo agente e una checklist per il primo risultato.

Aggiungi frontend-design a Claude Code, Codex o al tuo agente

Esegui il comando nel tuo progetto, segui la selezione dell'agente nell'installatore, poi verifica che il tuo agente possa scoprire frontend-design.

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

Origine comando: pagina skills.sh per frontend-design. Segui l'installatore e conferma che la skill appaia nel tuo agente.

Assegna alla skill un primo compito di progettazione UI

Adatta questo brief con i dettagli del tuo prodotto, allega le risorse del brand e il testo a cui si riferisce, ed eseguilo in Claude Code o 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.

Verifica il primo risultato

Un buon primo risultato è facile da riconoscere. Prima di accettare la pagina, cerca questi elementi nella trascrizione e nell'output:

  • Il piano è arrivato prima del codice, con valori della palette nominati e ruoli tipografici.
  • L'auto-revisione nomina almeno un elemento generico che ha sostituito, e perché.
  • Il tuo testo reale, i prezzi e le risorse del brand appaiono invariati.
  • Un elemento è memorabile; il resto della pagina rimane discreto.
  • La pagina funziona a 390px, la navigazione a tab mostra un anello di focus visibile e il movimento rispetta l'impostazione del sistema operativo.
  • Se qualcosa sembra generico, indica quale parte — la skill è progettata per accogliere la critica e rivedersi.

Stai usando OpenDesign? frontend-design è incluso in OpenDesign: apri Plugins → Skills, selezionalo dalla barra in alto, e il suo SKILL.md viene composto nel prompt insieme al tuo DESIGN.md. Claude Code, Codex, Cursor o OpenCode eseguono il lavoro.

Scarica OpenDesignLeggi la guida rapida

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author
Anthropic
Repository
github.com/anthropics/skills Branch main
File della skill
skills/frontend-design/SKILL.md Checksum del contenuto registrato alla verifica; commit 34040c9
License
Apache-2.0 Da skills/frontend-design/LICENSE.txt; SKILL.md indica "Complete terms in LICENSE.txt". La radice del repository non dichiara una licenza separata.
Stelle del repository
176.183 Snapshot GitHub acquisito il 14/09/2026 per l'intero repository anthropics/skills, che contiene molte skill. Non è un indice di valutazione o utilizzo per frontend-design.
Verificato da OpenDesign
14/09/2026 File sorgente, percorso, testo della licenza e conteggio stelle verificati. Incluso in OpenDesign main (verificato il 28/08/2026); un'esecuzione reale in OpenDesign non è ancora stata registrata in questa pagina.
Descrizione della skill
"Guida per un design visivo distintivo e intenzionale nella costruzione di nuove UI o nella riformulazione di quelle esistenti. Aiuta con la direzione estetica, la tipografia e le scelte che non risultino modelli predefiniti."

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. Leggi il file completo su GitHub.

Frontend Design

Dai al tuo agente un brief degno di essere progettato.

La skill frontend-design è inclusa in OpenDesign. Scarica l'app, seleziona la skill in Plugins → Skills, incolla il prompt d'esempio e leggi il piano prima del codice.

Scarica OpenDesignEsplora tutte le skill
Terminale
npx skills add https://github.com/anthropics/skills --skill frontend-design