Design Feel Like Your Own Product

Apprende le "mosse" di firma di un designer Figma in modo che i nuovi componenti sembrino fatti in casa, non copiati.

di Tiannanzhao · Tiannanzhao/design-feel-like-your-own-product

Promosso ★ 9.2/10

Design Feel Like Your Own Product — Apprende le "mosse" di firma di un designer Figma in modo che i nuovi componenti sembrino fatti in casa, non copiati.

Cosa fa

Legge un file Figma tramite il server MCP Figma per costruire un modello semantico dei ruoli colore di un designer, delle firme di spaziatura/raggio e della gerarchia delle informazioni, quindi genera nuovi componenti da quel modello interiorizzato anziché copiare valori di pixel grezzi. Si attiva quando un utente condivide un file Figma e chiede nuovi componenti, plugin o UI che dovrebbero 'corrispondere allo stile' o estendere un sistema di design esistente, e degrada con grazia a specifiche incollate o a uno screenshot se gli strumenti MCP Figma non sono disponibili.

Rapporto di test

Ho eseguito il mini-task nella modalità di fallback documentata dallo skill stesso Figma-MCP-unavailable: dato solo il sistema di design incollato, ha derivato una regola di raggio a due livelli (6px interattivo / 8px superficie) e ha riutilizzato lo stesso esadecimale verde acqua sia per il pulsante primario che per la pillola di stato 'attivo' invece di inventare un nuovo colore, concretamente più fondato di una modale generica SaaS di base. Skill autonomo a file singolo; la licenza è CC BY-NC 4.0 non commerciale, divulgata in anticipo nel README, non nascosta.

Testato il: 2026-07-15 · Claude Code 2.x (agent harness)

Installazione

git clone https://github.com/Tiannanzhao/design-feel-like-your-own-product.git
mkdir -p ~/.claude/skills
cp -r design-feel-like-your-own-product ~/.claude/skills/design-feel-like-your-own-product

Comandi e prompt di esempio

/design-feel-like-your-own-productApprende le "mosse" di firma di un designer Figma in modo che i nuovi componenti sembrino fatti in casa, non copiati.

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

build a new settings modal that matches our Figma design system
generate a component that feels like it came from our own design file
match the spacing and color roles from our Figma when designing this

Rapporto completo →