stitch-design-tastedi Leonxlnx

Stitch Design Taste Skill.

Uno skill per Claude Code e Codex dedicato a brand e design system: scrive un DESIGN.md per Google Stitch con enfasi sulla distintività visiva.

Brand e design system
DESIGN.md

Scarica OpenDesign Guida all'uso

Leonxlnx/taste-skill · skills/stitch-skill/SKILL.mdSKILL.md

--- name: stitch-design-taste description: Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance. --- ## Prerequisites ## The Goal ## Analysis & Synthesis Instructions ## Output Format (DESIGN.md Structure) ## 1. Visual Theme & Atmosphere ## 2. Color Palette & Roles

Front matter e intestazioni di sezione letti dal file upstream il 14 settembre 2026 · 11.732 caratteri in totale

01 Cosa fa

Cosa fa lo skill stitch-design-taste 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

Questo skill genera file DESIGN.md ottimizzati per la generazione di schermate con Google Stitch. Traduce le direttive di ingegneria frontend anti-slop nel linguaggio di design semantico nativo di Stitch — regole descrittive in linguaggio naturale abbinate a valori precisi che l'agente AI di Stitch può interpretare. Il file funge da fonte unica di verità per istruire Stitch a generare interfacce premium e non generiche.

Impone regole tipografiche rigorose, palette di colori calibrate, layout asimmetrici, micro-movimento perpetuo e prestazioni accelerate via hardware. Lo skill include elenchi espliciti di anti-pattern che vietano i cliché del design AI come il font Inter, i bagliori neon, le sezioni hero centrate e i contenuti placeholder generici.

Che cosa produce

Un file DESIGN.md con sette sezioni strutturate: Tema Visivo & Atmosfera, Palette di Colori & Ruoli, Regole Tipografiche, Stili dei Componenti, Principi di Layout, Movimento & Interazione e Anti-Pattern

Vedi l'esempio di prompt ↗

Come funziona

01
Definire l'Atmosfera
Valutare l'intento del progetto target usando aggettivi evocativi dello spettro del gusto lungo tre dimensioni: Densità (1-10 da Arioso a Densità da Cockpit), Varianza (1-10 da Simmetrico a Caotico) e Movimento (1-10 da Statico a Cinematico).
02
Mappare la Palette di Colori
Per ogni colore fornire nome descrittivo, codice hex e ruolo funzionale. Massimo un colore d'accento con saturazione inferiore all'80%.
03
Definire la Sezione Hero
Creare prime impressioni sorprendenti usando la tipografia con immagini inline (piccole foto inserite tra le parole all'altezza del testo), strutture asimmetriche quando la varianza supera 4, e massimo una CTA primaria.
04
Descrivere gli Stili dei Componenti
Specificare forma, colore, profondità dell'ombra e comportamento di interazione per pulsanti, card, campi di input, stati di caricamento e stati di errore.
05
Codificare la Filosofia del Movimento
Definire i valori predefiniti della fisica delle molle (rigidità: 100, smorzamento: 20), micro-interazioni perpetue per i componenti attivi, orchestrazione scaglionata per la rivelazione degli elenchi, e vincoli di performance che limitano l'animazione a transform e opacity soltanto.

02 Trova la tua applicazione

Quando utilizzare lo Skill stitch-design-taste

Utilizza lo skill stitch-design-taste in Claude Code o Codex quando il lavoro riguarda brand e design-system di questo tipo. Idoneità e limiti indicati di seguito sono presi dal file dello skill stesso.

Buona applicazione

Generazione di file DESIGN.md ottimizzati per la generazione di schermate con Google Stitch che codificano standard di design premium e non generici
Progetti che richiedono un rigoroso rispetto degli anti-pattern per evitare i cliché del design AI come bagliori neon, font Inter e contenuti placeholder generici
Dashboard ad alta densità o interfacce in stile cockpit che richiedono numerali monospaziati e scansionabilità compatta

Conosci i limiti

Progetti che richiedono il font Inter o font di sistema generici per contesti premium
Interfacce con layout hero centrati quando la varianza supera 4, o layout a tre colonne con card di uguali dimensioni
Design con emoji, ombre a bagliore neon esterno, cursori del mouse personalizzati, o cliché da copywriting IA come Elevate, Seamless, Unleash

Cosa fornire

Intento del progetto targetComprensione di se il progetto sia una galleria d'arte, un'app quotidiana, un'interfaccia cockpit o un'altra categoria, per valutare la densità, la varianza e lo spettro di movimento appropriati.

03 Dentro la skill

Regole che la skill stitch-design-taste fornisce a Claude Code e Codex

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

Baseline dell'Atmosfera Predefinita
La baseline predefinita per i nuovi progetti è Varianza 8, Movimento 6, Densità 4. Questi valori devono essere adattati dinamicamente in base alla descrizione del vibe fornita dall'utente.
Nessuna Sezione Hero Centrata Sopra Varianza 4
I layout Hero centrati sono vietati quando la varianza supera 4. Utilizzare invece layout Split Screen, allineati a sinistra o con spaziatura asimmetrica.
Il Viewport Mobile Usa min-h-[100dvh]
Le sezioni a piena altezza devono usare min-h-[100dvh], mai h-screen, per evitare il comportamento catastrofico di salto della barra degli indirizzi su iOS Safari.
Target Touch Minimo di 44px
Tutti gli elementi interattivi devono avere un'area di tocco minima di 44px per garantire accessibilità e usabilità sui dispositivi mobili.
Nessun Elemento Sovrapposto
Il testo non deve mai sovrapporsi a immagini o ad altro testo. Ogni elemento occupa una propria zona spaziale definita con una netta separazione spaziale. Non è consentito l'impilamento di contenuti con posizionamento assoluto.

04 Mettila al lavoro

Installa stitch-design-taste in Claude Code o Codex

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

Aggiungi stitch-design-taste 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/Leonxlnx/taste-skill --skill stitch-design-taste

Forma generica della CLI skills per skills/stitch-skill/SKILL.md; il repository potrebbe 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

Generate a DESIGN.md for [project name], a high-density financial dashboard targeting professional traders. The atmosphere should feel like a cockpit interface — variance 8, motion 6, density 9. Use a single cool accent (cyan or sky blue) and ban all generic patterns. All numbers must be monospace, and the hero section should use asymmetric layout with inline image typography showing [trading floor photos] between headline words.

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:

Verificare che tutte le voci di colore includano nome descrittivo, codice hex e ruolo funzionale, con massimo un colore accento con saturazione inferiore all'80%
Confermare che l'elenco degli anti-pattern vieti esplicitamente il font Inter, i serif generici, il nero puro, i bagliori neon, le emoji e i cliché da copywriting IA
Assicurarsi che le regole responsive per mobile impongano il collasso a colonna singola sotto i 768px, target touch minimi di 44px e min-h-[100dvh] per le sezioni a piena altezza

In OpenDesign importi stitch-design-taste dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi lo selezioni 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: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
File della skill: skills/stitch-skill/SKILL.md Checksum del contenuto registrato alla verifica; commit ccbc156
License: MIT Da LICENSE. Quasi duplicato della taste-design di Google Stitch; la versione Google non è contata separatamente.
Stelle del repository: 86.946 Snapshot GitHub del 2026-09-14 per l'intero repository Leonxlnx/taste-skill, che contiene 11 skill in questo catalogo. Non è un punteggio o conteggio di utilizzo per stitch-design-taste.
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

PanoramicaDefinisce lo scopo della skill: generare file DESIGN.md per Stitch utilizzando un linguaggio di design semantico e standard anti-generici.
PrerequisitiElenca i requisiti di accesso: Google Stitch tramite labs.google/stitch e, opzionalmente, Stitch MCP Server per l'integrazione programmatica.
L'ObiettivoDelinea sette target di codifica: atmosfera visiva, calibrazione del colore, architettura tipografica, comportamenti dei componenti, principi di layout, filosofia del movimento, anti-pattern.
1. Definire l'AtmosferaUtilizzare aggettivi evocativi su spettri di densità, varianza e movimento, con baseline predefinita Varianza 8, Movimento 6, Densità 4.
2. Definire la palette coloriIndicare nome descrittivo, codice hex e ruolo funzionale, con al massimo un colore d'accento con saturazione inferiore all'80%, escludendo estetiche neon.
3. Stabilire le regole tipograficheEscludere Inter nei contesti premium e i serif generici; imporre font distintivi con gerarchia tramite peso e colore, non tramite dimensione.
4. Definire la sezione heroCreare impressioni iniziali d'impatto usando tipografia integrata nell'immagine, strutture asimmetriche con varianza superiore a 4 e al massimo una CTA.
5. Descrivere gli stili dei componentiSpecificare forma, colore, profondità dell'ombra e comportamento di interazione, usando le card solo quando l'elevazione comunica una gerarchia.
6. Definire i principi di layoutNessun elemento sovrapposto, hero centrati esclusi sopra la varianza 4, CSS Grid preferito a Flexbox, contenimento con max-width, min-h-[100dvh] per l'altezza intera.
7. Definire le regole responsiveCollasso mobile-first a singola colonna sotto i 768px, aree di tocco da 44px, scalatura tipografica con clamp, immagini inline impilate su mobile.
8. Codificare la filosofia del movimentoFisica a molla predefinita con rigidità 100 e smorzamento 20, micro-interazioni continue, orchestrazione scaglionata, solo trasformazioni accelerate via hardware.
9. Elencare gli anti-pattern (tratti tipici dell'IA)Regole esplicite di divieto: niente emoji, Inter, serif generici, nero puro, aloni neon, elementi sovrapposti, cliché da IA, testo di riempimento.

Descrizione della skill

Skill per sistema di design semantico per Google Stitch. Genera file DESIGN.md ottimizzati per gli agenti che impongono standard UI premium e anti-generici: tipografia rigorosa, colore calibrato, layout asimmetrici, micro-movimento perpetuo e prestazioni con accelerazione hardware.

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

Stitch Design Taste

Esegui stitch-design-taste su un'attività di lavoro reale di Brand e design-system.

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

Scarica OpenDesign Esplora tutte le skill

Terminale

npx skills add https://github.com/Leonxlnx/taste-skill --skill stitch-design-taste