visual-design-foundationsdi Seth Hobson

Visual Design Foundations Skill.

Uno skill per Claude Code e Codex dedicato a brand e design system: tipografia, teoria del colore, sistemi di spaziatura e iconografia per elementi visuali coerenti.

Brand e design system

Scarica OpenDesign Guida all'uso

wshobson/agents · plugins/ui-design/skills/visual-design-foundations/SKILL.mdSKILL.md

--- name: visual-design-foundations description: Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency. --- ## When to Use This Skill ## Core Systems ## Quick Start: Design Tokens in Tailwind ## Typography Best Practices ## Color Theory ## Spacing Guidelines

Metadati e intestazioni di sezione estratti dal file upstream il 14/09/2026 · 7.218 caratteri in totale

01 Cosa fa

Cosa Fa la Skill visual-design-foundations in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Questa skill insegna a costruire sistemi visivi coerenti e accessibili usando scale tipografiche, teoria del colore, sistemi di spaziatura e fondamenti di iconografia. Copre la definizione di design token con scale tipografiche modulari, spaziatura a griglia da 8 punti, palette colore semantiche con requisiti di contrasto WCAG e sistemi di dimensionamento delle icone.

La skill fornisce pattern di implementazione concreti per Tailwind CSS, tipografia fluida responsive, tema dark mode con token semantici e validazione dell'accessibilità. Affronta problemi comuni di design visivo come spaziatura incoerente, scarso contrasto e numeri magici arbitrari, definendo scale basate su rapporti e sistemi di token riutilizzabili.

Che cosa produce

Definizioni dei design token in proprietà CSS personalizzate o configurazione Tailwind
Componente icona con varianti di dimensione

Vedi l'esempio di prompt ↗

Come funziona

01
Stabilire Design Token Modulari
Definisci scale tipografiche con dimensionamento basato su rapporti (da 0,75rem a 3rem), spaziatura a griglia da 8 punti (da 4px a 64px) e token colore semantici per brand, stati e neutri.
02
Applicare una Tipografia Responsive
Usa la tipografia fluida con clamp() per un dimensionamento responsive al viewport e mantieni una larghezza di lettura ottimale di massimo 65 caratteri.
03
Implementare Palette Colore Accessibili
Costruisci sistemi di colore che soddisfano i rapporti di contrasto WCAG: 4.5:1 per il testo del corpo, 3:1 per il testo grande e i componenti UI, con verifica programmatica del contrasto.
04
Crea Sistemi di Icone Coerenti
Definisci scale di dimensionamento delle icone da 12px a 32px con componenti riutilizzabili che accettano props di dimensione e mantengono il comportamento flex-shrink-0.
05
Progetta la Dark Mode con Token Semantici
Utilizza una denominazione dei token semantica in base allo scopo piuttosto che all'aspetto, consentendo il cambio di tema tramite attributi data senza modifiche ai componenti.
06
Mantieni il Ritmo Verticale
Applica regole di spaziatura coerenti agli elementi adiacenti utilizzando valori di scala definiti per creare armonia visiva in tutta l'interfaccia.

02 Trova la tua applicazione

Quando Usare lo Skill visual-design-foundations

Usa lo skill visual-design-foundations in Claude Code o Codex quando il lavoro riguarda brand e design-system di questo tipo. Idoneità e limiti qui sotto provengono dal file dello skill stesso.

Buona applicazione

Stabilire design token per un nuovo progetto
Creare o perfezionare un sistema di spaziatura e dimensionamento
Costruire palette di colori accessibili
Progettare sistemi di icone e asset visivi
Verifica dei design per la coerenza visiva

Cosa fornire

Specifiche di themingRequisiti per implementare la dark mode o sistemi multi-tema con strategie di token semantici

03 Dentro la skill

Regole che la Skill visual-design-foundations Offre a Claude Code e Codex

4 istruzioni concrete, valori predefiniti e limiti che il file SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Usa una Griglia di Spaziatura a 8 Punti
Tutti i valori di spaziatura devono seguire multipli di 4px, da 0.25rem (4px) fino a 4rem (64px), utilizzando i token della scala di spaziatura definita.
Applica Intervalli Rigorosi di Altezza della Riga
I titoli devono usare un'altezza di riga da 1.1 a 1.3, il testo del corpo da 1.5 a 1.7, e le etichette UI da 1.2 a 1.4 per una corretta leggibilità.
Limita la Larghezza del Testo a 65 Caratteri
Imposta max-width a 65ch per il testo del corpo per mantenere una larghezza di lettura ottimale e prevenire la fatica visiva su schermi larghi.
Applica Intervalli di Spaziatura dei Componenti
Il padding delle card deve essere 16-24px, gli spazi tra sezioni 32-64px, gli spazi tra i campi del form 16-24px e gli spazi icona-testo 8px utilizzando la scala di spaziatura.

04 Mettila al lavoro

Installa visual-design-foundations in Claude Code o Codex

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

Aggiungi visual-design-foundations a Claude Code, Codex o al Tuo Agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

npx skills add https://github.com/wshobson/agents --skill visual-design-foundations

Modulo CLI generico skills per plugins/ui-design/skills/visual-design-foundations/SKILL.md; il repository può documentare un proprio percorso.

Assegna alla Skill un Primo Task di Lavoro su Brand e Design System

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

Starter prompt

Create a design token system for [project name] with an 8-point spacing grid, modular typography scale from 12px to 48px, and an accessible color palette including primary brand color [hex value], semantic status colors for success/warning/error, and a complete neutral gray scale. Implement both light and dark mode variants using semantic token naming. Include Tailwind configuration and verification that all text combinations meet WCAG AA contrast requirements.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Verifica che tutte le combinazioni di colore del testo e dei componenti UI soddisfino i requisiti di rapporto di contrasto WCAG utilizzando una verifica programmatica
Verifica che il caricamento dei font utilizzi font-display swap per prevenire lo spostamento del layout
Assicurati che la tipografia responsive si adatti in modo fluido tra le dimensioni del viewport utilizzando funzioni clamp

In OpenDesign importa visual-design-foundations dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionalo nella barra superiore.

Scarica OpenDesign Leggi il quickstart

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: Seth Hobson
Repository: github.com/wshobson/agents Branch main
File della skill: plugins/ui-design/skills/visual-design-foundations/SKILL.md Checksum del contenuto registrato alla verifica; commit 4236bb9
License: MIT Da LICENSE.
Stelle del repository: 39.635 Snapshot GitHub scattato il 14-09-2026 per l'intero repository wshobson/agents, che contiene 18 skill presenti in questo catalogo. Non è una valutazione o un conteggio d'uso per visual-design-foundations.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Quando Usare questa SkillElenca scenari come la definizione di token, la costruzione di palette, la verifica della coerenza e l'implementazione della dark mode
Sistemi principaliDefinisce la scala tipografica modulare, la griglia di spaziatura a 8 punti e la struttura dei token di colore semantici con custom properties CSS
Avvio rapido: design token in TailwindFornisce un esempio di configurazione Tailwind che estende il tema con font, dimensioni, colori e valori di spaziatura personalizzati
Best practice tipograficheIllustra le combinazioni di accoppiamento dei font, la tipografia fluida e responsive con clamp e la prevenzione del layout shift durante il caricamento dei font
Teoria del coloreDescrive i requisiti di contrasto WCAG, la strategia di implementazione della dark mode e una funzione programmatica per il controllo del rapporto di contrasto
Linee guida sulla spaziaturaSpecifica gli intervalli di spaziatura dei componenti e illustra i pattern di ritmo verticale per i contenuti testuali
IconografiaDefinisce il sistema di dimensionamento delle icone da 12px a 32px e fornisce l'implementazione di un componente icona in TypeScript
Best practiceSette principi, tra cui definire i vincoli, documentare le decisioni, testare l'accessibilità e utilizzare una denominazione semantica
Problemi comuniElenca problemi come spaziatura incoerente, scarso contrasto, sovraccarico di font, numeri magici e mancata pianificazione della dark mode

Descrizione della skill

"Applica tipografia, teoria del colore, sistemi di spaziatura e principi di iconografia per creare design visivi coerenti. Da utilizzare quando si definiscono design token, si costruiscono guide di stile o si migliorano gerarchia visiva e coerenza."

Descrizione dal front-matter di SKILL.md. Il file completo è di circa 7.218 caratteri. Leggi il file completo su GitHub.

Visual Design Foundations

Esegui visual-design-foundations su un vero task di lavoro su brand e design-system.

Scarica OpenDesign, importa visual-design-foundations dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

npx skills add https://github.com/wshobson/agents --skill visual-design-foundations