Design Feel Like Your Own Product

Learn and replicate a designer's style from Figma files to create new components that feel authentic to their design system. Use this skill whenever a user shares a Figma file and wants to create new components, plugins, or UI elements that match an existing design style — even if they don't explicitly say "learn my style". Trigger when users mention Figma files, design systems, "make it look like my design", "match the style", or ask to extend an existing UI.

15 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add Tiannanzhao/design-feel-like-your-own-product --skill design-feel-like-your-own-product

Manual install

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

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# SKILL: Learning a Designer's Style from Figma MCP

## When to use this skill

When a designer shares a Figma file and asks you to **create new components, plugins, or code** — not simply reproduce what already exists.

The goal is not pixel-perfect replication. It's understanding how this designer thinks, so you can create things they haven't built yet and have them feel like the designer made them.

---

## Step 1: Build intuition before reading numbers

Before inspecting any values, use `get_design_context` or `get_screenshot` to look at the overall file and ask yourself:

- Is this data-dense (dashboard) or feeling-driven (marketing page)?
- Is the color palette restrained or expressive?
- Is spacing tight or airy?
- Is there a clear brand personality — oversized type, a dominant accent color, a distinctive shape language?

This builds a **mental model**. Every decision you make later should check against this model, not against an isolated value pulled from a node.

---

## Step 2: Extract design DNA — not values, patterns

Use `get_design_context` and `get_variable_defs` to read the file. Don't try to memorize every number. Look for **what keeps repeating** — those are the designer's habits and rules.

### Read color semantically, not literally

Read the full skill on GitHub

Details

Skill name: design-feel-like-your-own-product
Repository: Tiannanzhao/design-feel-like-your-own-product
Repo updated: 9 March 2026

FAQ

What does the Design Feel Like Your Own Product skill do?

How do I install the Design Feel Like Your Own Product skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Tiannanzhao/design-feel-like-your-own-product --skill design-feel-like-your-own-product. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Design Feel Like Your Own Product popular?

It lives in Tiannanzhao/design-feel-like-your-own-product, which has 15 GitHub stars and 0 forks.

Related skills

Design Tokens

ilikescience/design-tokens-skill

Expert in design tokens using the DTCG specification. Use this skill when users ask about design tokens, DTCG format, token validation, formatting, transformation, color spaces (sRGB, Display P3, OKLCH), references and aliasing, resolvers, theming with modifiers/contexts, multi-platform design systems, accessibility, or working with tools like jq, jsonata, and terrazzo. Helps with token file creation, resolver configuration, structure, naming conventions, and best practices.

Frontend & Design

Arabic UI

JKc66/arabic-ui

Authentic Arabic writing, UI/UX microcopy, and RTL engineering. Use when writing, translating, or reviewing Arabic interfaces, dashboards, articles, documentation, or copy. Enforces classical syntactic flow, eliminates translationese (العرنجية), applies Al-Jahiz's density principle, and handles Arabic pluralization and bidirectional layout.

Frontend & Design

Filemaker Layout Xml

andykear/FileMaker-XMLsnippet-Layout-Claude-Skill

Use this skill whenever the user wants to work with FileMaker layout XML. This includes generating paste-ready layout object XML (fmxmlsnippet type LayoutObjectList) from descriptions, reviewing layout XML for silent paste-handler failures, or analysing Save as XML layout exports. Trigger any time the user mentions FileMaker layouts, layout objects, fields, portals, tab controls, popovers, button bars, web viewers, anchoring or autosizing, or LayoutObjectList. Always perform the theme pre-flight before generating, and set object anchoring deliberately whenever an object must resize with the wi

Frontend & Design

Audhd UI Guide

Greyland-Fireworks/audhd-ui-guide

Design, review or improve UI and UX using AuDHD-friendly interaction rules, accessible selectable appearance and verifiable workflow continuity. Use when the user says "audhd audit", or for dashboard organization, settings forms, status feedback, accessible controls and interruption recovery; not clinical advice or certification.

Frontend & Design

Experiment Report Skill

lyzbcy/experiment-report-skill

Create a complete experiment report workflow with frontend visualization and structured markdown report. Supports any experiment type — implementation, interactive frontend, screenshots, and md/docx delivery. Use for 实验报告、experiment report and experiment-related 前端展示 or 可视化报告, with visual confirmation before the final report.

Frontend & Design

Pixel Perfect Web Replica

Core-Mate/Pixel-Perfect-Web-Replica

Recreate public frontend pages locally with high visual fidelity. Use when the user asks Codex or Claude Code to pixel-perfect clone, mirror, study, sandbox, reproduce, or locally run a public website/page; capture its static assets; preserve layout, scroll animations, media, typography, and interactions; compare screenshots; and list replaceable resources for rebranding or customization.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.