Design Feel Like Your Own Product

Lærer en designers Figma "signaturtræk" så nye komponenter føles selvlavede, ikke kopierede.

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

Testet · Virker ★ 9.2/10

Design Feel Like Your Own Product — Lærer en designers Figma "signaturtræk" så nye komponenter føles selvlavede, ikke kopierede.

Hvad det gør

Læser en Figma-fil via Figma MCP-serveren for at bygge en semantisk model af en designers farveroller, mellemrum/radius signaturer og informationshierarki, og genererer derefter nye komponenter fra den internaliserede model i stedet for at kopiere rå pixelværdier. Triggere, når en bruger deler en Figma-fil og beder om nye komponenter, plugins eller UI, der skal 'matche stilen' eller udvide et eksisterende designsystem, og degraderer elegant til indsatte specifikationer eller et screenshot, hvis Figma MCP-værktøjerne er utilgængelige.

Testrapport

Kørte minitasken i skill'ens egen dokumenterede Figma-MCP-utilgængelige fallback-tilstand: givet kun indsatte design-system specifikationer, udledte den en to-niveau radiusregel (6px interaktiv / 8px overflade) og genbrugte den samme teal hex til både primærknappen og 'aktiv' status-pillen i stedet for at opfinde en frisk farve, konkret mere jordet end en generisk SaaS baseline modal. Enkeltfil, selvstændig skill; licensen er CC BY-NC 4.0 ikke-kommerciel, oplyst på forhånd i README, ikke skjult.

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

Installation

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 designers Figma "signaturtræk" så nye komponenter føles selvlavede, ikke kopierede.

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen 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