Agent skill
figma-resource-extractor
Extract and catalog Figma design resources into structured Markdown documentation. Outputs to specs/design/figma/ directory with categorized resource lists and Figma links. Use when: (1) "提取 Figma 资源" or "extract Figma resources" (2) "生成 Figma 文档" or "generate Figma docs" (3) "同步 Figma 设计" or "sync Figma design" (4) "更新设计资源列表" or "update design resource list" (5) Need to catalog Figma components, icons, pages for frontend development (6) Before implementing frontend pages from Figma designs
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/figma-resource-extractor
SKILL.md
Figma Resource Extractor
Extract Figma design resources and generate structured Markdown documentation for AI-assisted frontend development.
Output Structure
specs/design/figma/
├── README.md # Overview with resource index
├── icons.md # Icon components list
├── components.md # UI components list
├── layouts.md # Responsive layout specs
├── assets.md # Page-specific shared assets (切图区)
└── pages/ # Page designs grouped by prefix
├── explore.md # 探索-* pages
├── auth.md # 登陆/注册/找回密码
├── team.md # 团队 pages
├── profile.md # 个人信息/他人主页
├── settings.md # 设置 pages
├── message.md # 消息/通知 pages
├── content.md # 贴子/提案/评论
├── camp.md # 营地 pages
├── planet.md # 星球 pages
├── asset.md # 资产 pages
└── misc.md # Other pages
Workflow
1. Get Figma File Structure
mcp__figma__get_figma_data(fileKey, depth=1)
List all pages (CANVAS nodes) in the Figma file.
2. Get Target Page Children
mcp__figma__get_figma_data(fileKey, nodeId, depth=2)
For the target page (e.g., 🟧大赛-PC翻新), get top-level children.
3. Classify Resources
Parse YAML response and classify by name/type:
| Category | Figma Name Pattern | Node Type |
|---|---|---|
| icons | icon |
SECTION |
| components | PC端组件 |
FRAME |
| layouts | W>*, *>W>*, *>W |
FRAME |
| assets | 切图区 |
SECTION |
| pages | All other FRAME | FRAME |
4. Generate Link Format
Figma link format:
https://www.figma.com/design/{fileKey}?node-id={nodeId}
Node ID format conversion: 1234:5678 → 1234-5678 (replace : with -)
5. Group Pages by Prefix
| Prefix Pattern | Output File | Description |
|---|---|---|
探索-* |
pages/explore.md | Explore pages |
登陆, 注册, 找回密码, 扫码* |
pages/auth.md | Authentication |
团队*, 他人团队, *队*视角 |
pages/team.md | Team pages |
个人信息, 他人主页, 编辑 |
pages/profile.md | Profile pages |
设置* |
pages/settings.md | Settings |
消息, 通知 |
pages/message.md | Messaging |
贴子, 提案, 评论, 发布, 创建新内容 |
pages/content.md | Content |
营地* |
pages/camp.md | Camp pages |
星球* |
pages/planet.md | Planet pages |
资产* |
pages/asset.md | Asset pages |
搜索* |
pages/search.md | Search pages |
| Others | pages/misc.md | Miscellaneous |
6. Write Documentation
Generate each file with this structure:
README.md
# Figma Design Resources
Source: [Figma File Name](figma-link)
Generated: {timestamp}
## Resource Index
| Category | Count | File |
|----------|-------|------|
| Icons | {n} | [icons.md](icons.md) |
| Components | {n} | [components.md](components.md) |
| Layouts | {n} | [layouts.md](layouts.md) |
| Assets | {n} | [assets.md](assets.md) |
## Pages
| Category | Count | File |
|----------|-------|------|
| Explore | {n} | [pages/explore.md](pages/explore.md) |
...
Resource List Files (icons.md, components.md, etc.)
# {Category Name}
Source: [{Section Name}](figma-link-to-section)
## Items
| Name | Type | Figma Link |
|------|------|------------|
| {name} | {type} | [Open]({link}) |
...
Page Files (pages/*.md)
# {Category Name} Pages
## {Page Name}
- **ID**: {nodeId}
- **Type**: {type}
- **Link**: [Open in Figma]({link})
### Children (if available)
| Name | Type | Link |
|------|------|------|
...
Figma Structure Reference
For SYN系列设计系统, target page 🟧大赛-PC翻新 (11166:6711):
| Resource | Node ID | Type |
|---|---|---|
| icon | 11170:8388 | SECTION |
| PC端组件 | 14302:55704 | FRAME |
| 切图区 | 15374:140683 | SECTION |
| W>1440 | 14392:17870 | FRAME |
| 1440>W>1340 | 15151:77748 | FRAME |
| 1340>W>1288 | 15151:77729 | FRAME |
| 1288>W>928 | 15151:77827 | FRAME |
| 928>W | 15151:77843 | FRAME |
Usage Example
User: "提取 Figma 资源 https://www.figma.com/design/QUQsM2qOSwdYVoHVB1JpAw/SYN系列设计系统?node-id=11166-6711"
- Parse fileKey:
QUQsM2qOSwdYVoHVB1JpAw - Parse nodeId:
11166-6711→11166:6711 - Fetch data with
mcp__figma__get_figma_data - Classify and generate docs to
specs/design/figma/ - Report summary with file counts
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?