Design Feel Like Your Own Product
Lär sig en designers Figma "signaturdrag" så att nya komponenter känns egengjorda, inte kopierade.
Testad · Fungerar
Vad den gör
Läser en Figma-fil via Figma MCP-servern för att bygga en semantisk modell av en designers färgrupper, signaturer för mellanrum/radie och informationshierarki, och genererar sedan nya komponenter från den internaliserade modellen istället för att kopiera råa pixelvärden. Triggers när en användare delar en Figma-fil och ber om nya komponenter, plugins eller UI som ska 'matcha stilen' eller utöka ett befintligt designsystem, och degraderar graciöst till inklistrade specifikationer eller en skärmdump om Figma MCP-verktygen inte är tillgängliga.
Testrapport
Körde miniuppgiften i färdighetens egen dokumenterade Figma-MCP-otillgängliga fallback-läge: givet endast inklistrade designsystem-specifikationer härledde den en två-nivåers radie-regel (6px interaktiv / 8px yta) och återanvände samma turkosa hex för både primärknappen och 'aktiv'-status-pillen istället för att uppfinna en ny färg, konkret mer grundad än en generell SaaS-baslinjemodal. Enfils, fristående färdighet; licensen är CC BY-NC 4.0 icke-kommersiell, upplyst i förväg i README, inte dold.
Testad: 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
Kommandon och exempelprompter
/design-feel-like-your-own-productLär sig en designers Figma "signaturdrag" så att nya komponenter känns egengjorda, inte kopierade.
Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):
build a new settings modal that matches our Figma design systemgenerate a component that feels like it came from our own design filematch the spacing and color roles from our Figma when designing this