Extract Figma Spec
Figma デザインをコードへ反映・適用する実装の前後、figma-dev-mode MCP で design-to-code を行うとき、または「Figma 通りに実装して」「デザインを反映して」「Figma の指定どおりに直して」と頼まれたときに使用。スクショ目視と人間が挙げた「指定 N 点」だけで反映すると、hex の微差・font weight(Bold)・アイコンや枠の有無・要素まるごとの欠落 といった Figma 指定を取りこぼす——この反映漏れ (デザイン崩れ・Figma 不一致) を防ぐ。差分は通常 /define-acceptance-criteria で AC 化し /qa-ui で検証する（PoC 等の使い捨て検証では省略可）。チェックリスト全行は atom ID 付きで `## 正本抽出結果` として分析ファイルに書き出し、/finalize-plan の正本カバレッジ・ゲートの入力になる。
Security AStatic scan found no risk patternsHow grading works ›
What this skill does
Extract Figma Spec is a community-contributed Claude Code skill in the design-creative sub-category. It ships as a SKILL.md file that Claude Code auto-discovers under ~/.claude/skills/extract-figma-spec/ and loads when your prompt matches the skill's trigger.
Who uses this skill
The Extract Figma Spec Claude Code skill is built for Claude Code users and developers across all disciplines looking for general-purpose AI assistance. It's part of ClaudSkills (also referred to as Claude Skills or Claude Code Skills) — the open community-curated registry of 151,000+ SKILL.md files for Anthropic's Claude Code agent and the wider Claude ecosystem (Claude API, Claude Agent SDK).
How to install
Free
Manual install (2 steps)
mkdir -p ~/.claude/skills/extract-figma-spec
curl -L https://claudskills.com/skills/extract-figma-spec/SKILL.md \
-o ~/.claude/skills/extract-figma-spec/SKILL.md
Or just download SKILL.md directly and drop it into ~/.claude/skills/extract-figma-spec/. Claude Code auto-discovers it on next session.
Skills live at ~/.claude/skills/extract-figma-spec/SKILL.md on macOS/Linux, or %USERPROFILE%\.claude\skills\extract-figma-spec\SKILL.md on Windows. See the full install guide for step-by-step instructions.
Telegram
📱 Install from your phone or desktop Telegram
Open @claudskills_bot on Telegram, tap Open Desktop App, and the desktop app installs this skill for you. Or share the bot link with a colleague — they get the same one-tap install. Learn more →
Pro
One-click install via the desktop app
The ClaudSkills desktop app installs any skill directly into ~/.claude/skills/ with one click — no terminal required. Pro starts at $9/mo or $149 lifetime.
Pro
For the full experience including quality scoring and one-click install features for each skill — upgrade to Pro.
Frequently asked questions
How do I install the Extract Figma Spec Claude Code skill?
Install via the ClaudSkills desktop app (one click) or copy
SKILL.md from the source repository to
~/.claude/skills/extract-figma-spec/SKILL.md and restart Claude Code. Both flows are detailed at
claudskills.com/install/.
What does the Extract Figma Spec skill do?
Figma デザインをコードへ反映・適用する実装の前後、figma-dev-mode MCP で design-to-code を行うとき、または「Figma 通りに実装して」「デザインを反映して」「Figma の指定どおりに直して」と頼まれたときに使用。スクショ目視と人間が挙げた「指定 N 点」だけで反映すると、hex の微差・font weight(Bold)・アイコンや枠の有無・要素まるごとの欠落 といった Figma 指定を取りこぼす——この反映漏れ (デザイン崩れ・Figma 不一致) を防ぐ。差分は通常 /define-acceptance-criteria で AC 化し /qa-ui で検証する（PoC 等の使い捨て検証では省略可）。チェックリスト全行は atom ID 付きで `## 正本抽出結果` として分析ファイルに書き出し、/finalize-plan の正本カバレッジ・ゲートの入力になる。
Is this skill free to install?
Yes. ClaudSkills is an open registry — every skill keeps its source repository's license, and manual install via copy is free. ClaudSkills Pro ($9/mo, $79/yr, or $149 one-time) adds one-click install via the desktop app and a multi-signal Quality Score.
When should I use the Extract Figma Spec skill?
Use Extract Figma Spec when your Claude Code task falls under the General category — specifically in the design creative area. Claude Code auto-discovers installed skills and invokes the right one based on the task description, so you can also ask Claude directly (e.g. "use Extract Figma Spec" or describe the task and let Claude pick). Browse related skills at
/category/general/.
What is a Claude Code skill and how does the Extract Figma Spec skill fit in?
A Claude Code skill is a
SKILL.md file that lives under
~/.claude/skills/<name>/ and tells the Claude Code CLI agent how to perform a specific task (instructions, prompts, allowed tools). Skills are auto-discovered at session start. Extract Figma Spec is one of 67,000+ skills indexed in the open ClaudSkills catalog, classified under the General category. Learn more at
/learn/what-is-a-claude-skill/.
Attribution & license
Cite this skill
If you reference this skill in a blog post, paper, or documentation, you can cite it as:
APA
YasuakiOmokawa. (2026). Extract Figma Spec [Claude Code skill]. ClaudSkills. https://claudskills.com/skills/extract-figma-spec/
BibTeX
@misc{extract-figma-spec-2026,
author = {YasuakiOmokawa},
title = {Extract Figma Spec [Claude Code skill]},
year = {2026},
publisher = {ClaudSkills},
url = {https://claudskills.com/skills/extract-figma-spec/}
}Embed this skill
Promote, attribute, or link this skill from your own README, blog post, or documentation. All three snippets are free to use — no sign-up, no API key. More distribution surfaces →
Badge
[](https://claudskills.com/skills/extract-figma-spec/?utm_source=badge&utm_medium=readme&utm_campaign=skill_badge)
<script>
<script src="https://claudskills.com/embed/extract-figma-spec.js" async></script>
<iframe>
<iframe src="https://claudskills.com/embed/extract-figma-spec.html" width="100%" height="160" frameborder="0" loading="lazy" title="ClaudSkills: Extract Figma Spec"></iframe>
Security scan
Grade A · scanned 2026-07-13 — free static scan against the OWASP Agentic Skills Top 10.
No risk patterns were found in any of the ten OWASP-aligned categories. How grading works ›
- ✓ Prompt injection
- ✓ Data exfiltration
- ✓ Supply chain
- ✓ Reverse shell
- ✓ Credentials
- ✓ Execution
- ✓ Filesystem
- ✓ Persistence
- ✓ Obfuscation
- ✓ Network
Show this grade on your repo (click to copy):
[](https://claudskills.com/skills/extract-figma-spec/#security)
More General skills
Browse all General skills in the ClaudSkills registry, or explore these other picks from the same category:
Part of Acreator Store — Adam Lankamer's AI tools:
PerfectStudio ·
Ucaption ·
UTagger ·
AutoXPoster ·
TestYourSkills ·
AutomationFlows ·
Au Naturel ·
Telegram @acreatorstore