Design Feel Like Your Own Product

Lærer en designeres Figma "signaturtrekk" slik at nye komponenter føles selvlagde, ikke kopiert.

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

Bestått ★ 9.2/10

Design Feel Like Your Own Product — Lærer en designeres Figma "signaturtrekk" slik at nye komponenter føles selvlagde, ikke kopiert.

Hva den gjør

Leser en Figma-fil via Figma MCP-serveren for å bygge en semantisk modell av en designeres farge-roller, mellomroms-/radius-signaturer og informasjons-hierarki, deretter genererer nye komponenter fra den internaliserte modellen i stedet for å kopiere rå pikselverdier. Utløses når en bruker deler en Figma-fil og ber om nye komponenter, plugins eller UI som skal 'matche stilen' eller utvide et eksisterende designsystem, og degraderes grasiøst til limte spesifikasjoner eller et skjermbilde hvis Figma MCP-verktøyene er utilgjengelige.

Testrapport

Kjørte mini-oppgaven i ferdighetens egen dokumenterte Figma-MCP-utilgjengelige fallback-modus: gitt kun limte design-system spesifikasjoner utledet den en to-nivå radius-regel (6px interaktiv / 8px overflate) og gjenbrukte samme teal hex for både primærknappen og 'aktiv' status-pillen i stedet for å finne opp en ny farge, konkret mer jordet enn en generell SaaS basislinje modal. Enkeltfils, selvstendig ferdighet; lisensen er CC BY-NC 4.0 ikke-kommersiell, opplyst på forhånd i README, ikke skjult.

Testet på: 2026-07-15 · Claude Code 2.x (agent harness)

Installer

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

Kommandoer og eksempelprompter

  • /design-feel-like-your-own-productLærer en designeres Figma "signaturtrekk" slik at nye komponenter føles selvlagde, ikke kopiert.

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

  • 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