Design Feel Like Your Own Product
Learns a designer's Figma "signature moves" so new components feel self-made, not copy-pasted.
Getest · Werkt
Wat het doet
Reads a Figma file via the Figma MCP server to build a semantic model of a designer's color roles, spacing/radius signatures, and information hierarchy, then generates new components from that internalized model rather than copying raw pixel values. Triggers when a user shares a Figma file and asks for new components, plugins, or UI that should 'match the style' or extend an existing design system, and degrades gracefully to pasted specs or a screenshot if the Figma MCP tools are unavailable.
Testrapport
Ran the mini-task in the skill's own documented Figma-MCP-unavailable fallback mode: given only pasted design-system specs it derived a two-tier radius rule (6px interactive / 8px surface) and reused the same teal hex for both the primary button and the 'active' status pill instead of inventing a fresh color, concretely more grounded than a generic-SaaS baseline modal. Single-file, self-contained skill; license is CC BY-NC 4.0 non-commercial, disclosed up front in the README, not hidden.
Getest op: 2026-07-15 · Claude Code 2.x (agent harness)
Installatie
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
Commando's en voorbeeldprompts
/design-feel-like-your-own-productLearns a designer's Figma "signature moves" so new components feel self-made, not copy-pasted.
Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):
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