Prototype to Figma

Converts a working Claude Code prototype into a structured Figma design file — exploding each interaction flow into separate frames, using the target file's design system components, and annotating interaction details natively in Figma. Use this skill whenever the user asks to turn a prototype into Figma frames, generate design specs from a prototype, create a Figma handoff from code, explode a prototype into states, or make a prototype reviewable by cross-functional partners. Also trigger when the user mentions "prototype to Figma", "design review from prototype", "async feedback on prototype

141 stars 15 forksFrontend & Design

Install

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

npx skills add alima-max/prototype-to-figma-skill --skill prototype-to-figma

Manual install

git clone --depth 1 https://github.com/alima-max/prototype-to-figma-skill.git /tmp/prototype-to-figma-skill
mkdir -p ~/.claude/skills
cp -r /tmp/prototype-to-figma-skill/. ~/.claude/skills/prototype-to-figma

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

From the SKILL.md

# Prototype → Figma

This skill takes a working Claude Code prototype and produces a structured Figma file that
cross-functional partners can review asynchronously. The output has two equal goals:

1. **True 1:1 visual parity** — layout, colors, spacing, typography, content, and icons match the
   *rendered* prototype exactly, because the base is produced by a **headless render → serialize**
   (Rule 0), not a hand-reconstruction. Runs entirely in the terminal — no visible browser or tab.
2. **A design-system-native, reviewable result** — captured elements are reconciled to DS component
   instances / bound variables / text styles wherever the DS is published to Figma (Rule 2), and
   every state transition is annotated on its node.

**This skill works across all Figma MCP clients.** The output format adapts to what your client
supports — see [Client Compatibility](#client-compatibility) below.

---

## Five non-negotiable rules

### Rule 0: Capture headlessly (render → serialize), never open a visible browser; then reconcile to the DS

**True 1:1 requires *rendering* the code — but rendering does NOT require a *visible* browser.** Use
a **headless** browser (Playwright) so the whole run stays in the terminal: no window, no tab. That
is the point for the target user — designers working exclusively in code who must not be pulled out
of the IDE.

Three options; only one is right:

Read the full skill on GitHub

Details

Skill name: prototype-to-figma
Repository: alima-max/prototype-to-figma-skill
License: MIT
Repo updated: 28 July 2026

FAQ

What does the Prototype to Figma skill do?

How do I install the Prototype to Figma skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add alima-max/prototype-to-figma-skill --skill prototype-to-figma. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Prototype to Figma popular?

It lives in alima-max/prototype-to-figma-skill, which has 141 GitHub stars and 15 forks.

Related skills

Persian Motion Director

148

atmirrr/persian-motion-director

Direct and build professional motion design (promo and launch films, kinetic typography, animated explainers, social clips, title sequences) with correct Persian/Farsi and right-to-left typography, in Remotion or plain web code. Use this skill whenever the user wants a video, animation, motion graphics, teaser or animated text that contains Persian, Farsi, Arabic-script or RTL text, and whenever they say a motion piece looks "default", "like a slideshow", "AI-made" or "not pro", or that the Persian looks off, broken or disconnected, even if they never say "motion design". It brings the anti-sl

Frontend & Design

HTML Anything

161

clockless-org/html-anything

Turn rich agent answers and any file, folder, URL, or export into a polished single-file HTML page. Auto-picks a default route plus 17 concrete design systems (teaching, dashboard, atlas, timeline-story, document, …).

Frontend & Design

Design Auditor

Ashutos1997/claude-design-auditor-skill

Audit designs against 19 rules across Figma files and code (HTML/CSS/React/Vue/Tailwind). Auto-detects framework and design system (MUI, Chakra, shadcn/ui, Ant Design, Radix, Bootstrap). Runs code superpowers across all 19 categories: aria, focus, contrast, tokens, responsive, motion, forms, navigation, spacing, states, microcopy, elevation, iconography/SVG. Flags color blindness risk. Audits dark patterns, ethical design, Nielsen's heuristics. Outputs before/after diffs, developer handoff reports, wireframe-to-spec. English and Korean. Triggers on: check my design, review my UI, audit my layo

Frontend & DesignIn 1 list16

Bricks

143

wpgaurav/bricks-skills

Author Bricks Builder (WordPress) layouts, templates, and full designs as paste-ready JSON. Use for any Bricks task — sections, pages, headers/footers, query loops, ACF/dynamic data, faceted filters, conditions, interactions/animations, popups, WooCommerce templates, custom elements, or hooks. Verified against Bricks 2.3.6 source.

Frontend & Design22

Oil Frontend

139

oil-oil/oil-frontend

当任务需要实现、修改、重构或评审产品前端的可见界面、交互行为、前端状态与数据流、组件或样式组织时主动使用，无需用户点名；也用于这些前端行为的测试与验证策略。适用于页面、表单、列表、弹窗、响应式、样式与动效实现和前端代码归属调整。不用于视觉风格、配色、排版与设计方向这类设计判断，也不用于纯后端、构建部署、依赖升级、只修导入路径的机械改动、仅操作现有网站、仅生成设计图片或讨论本 Skill；用户明确要求不使用时不触发。

Frontend & Design

Material Design 3 UI

159

skydashnet/material-design-3-ui-skill

Design, redesign, review, or implement user interfaces using Google Material Design 3 (M3), Material You, and optional Material 3 Expressive principles. Use for UI/UX screens, app flows, design systems, component selection, theming, responsive/adaptive layouts, accessibility audits, Figma-ready specifications, or developer handoff where Material Design 3 is required.

Frontend & Design12

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