AI Design Tool

Design Skills

Design Skills è un prodotto editoriale-tecnico per trasformare linee guida visuali in conoscenza strutturata per agenti AI. L’app permette di esplorare sistemi di design, consultare fondamentali condivisi e generare pacchetti skill personalizzati da usare in workflow di UI generation.

Anno:2026

Durata:prodotto sperimentale

Ruolo:Sviluppatore unico

Home DesignAI con catalogo YAML, base skill e fondamentali condivisi

Editor skill con token colore, preview live, font e densita visiva

Shared fundamentals per accessibilita, stati UI, responsive e spacing

Workflow per scaricare una skill, caricarla in AI e generare UI coerenti

La Sfida

La generazione UI con AI tende a perdere coerenza tra palette, componenti, layout e tono visivo. Serviva un modo più strutturato per descrivere un design system, renderlo ispezionabile e distribuirlo come artefatto riusabile.

La Soluzione

Ho modellato i design system come catalogo YAML validato, con loader tipizzati, anteprime React e motore di export. L’interfaccia rende visibili pattern, token e casi d’uso, mentre il builder consente di produrre skill archive coerenti con vincoli e fondamentali condivisi.

Tecnologie Utilizzate

Next.jsReactTypeScriptTailwind CSSshadcn/uiYAMLZodfflateGeistVercel Analytics

Funzionalità Principali

Catalogo di design system base con metadati, token, regole e preview

Fondamentali condivisi separati dagli stili specifici per ridurre duplicazione e incoerenza

Download di skill package pronti per assistenti AI e strumenti di generazione UI

Builder per personalizzare un design system e produrre un archivio esportabile

Validazione dei file YAML e test automatici sull’export

Anteprime visuali per confrontare rapidamente direzione estetica, componenti e casi d’uso

Hai un progetto simile in mente?

Parliamone insieme e vediamo come posso aiutarti a realizzarlo.

Contattami