菜单
Bridge Figma MCP output to Stellar Lab code conventions. Invoke after calling get_design_context to translate Figma's reference code into project-appropriate components, classes, and patterns.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/stellar/laboratory --skill figma-to-code命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | figma-to-code |
| description | Bridge Figma MCP output to Stellar Lab code conventions. Invoke after calling get_design_context to translate Figma's reference code into project-appropriate components, classes, and patterns. |
| read_files | [".claude/skills/figma-to-code/reference/*.md"] |
The Figma MCP's get_design_context returns generic reference code (often plain
HTML/CSS). This skill bridges the gap between that output and the project's
actual conventions: @stellar/design-system components, SCSS with BEM-ish
naming, and specific layout patterns.
For the full SDS component catalog, props, SCSS conventions, and usage examples, invoke
/component-guide.
For element mapping tables, spacing/layout patterns, and Figma variable mappings, see
reference/figma-mapping.md(loaded automatically).
mcp__figma-desktop__get_design_context({
nodeId: "1234:5678",
artifactType: "COMPONENT_WITHIN_A_WEB_PAGE_OR_APP_SCREEN",
clientFrameworks: "react",
clientLanguages: "typescript,scss"
})
Also get a screenshot for visual reference:
mcp__figma-desktop__get_screenshot({ nodeId: "1234:5678" })
Do NOT copy the Figma reference code directly. Instead, map each element to the
project's conventions using the mapping rules in reference/figma-mapping.md.
After implementing, visually compare the rendered component against the Figma screenshot. Focus on: layout, spacing, typography hierarchy, and interactive states.
Don't copy Figma's HTML structure literally — Figma groups elements for design purposes, not component architecture. Think about what makes sense as React components.
Don't use arbitrary colors — Figma may show raw hex values. Map them to
SDS color tokens (--sds-clr-*).
Don't ignore interactive states — Figma may show one state. Consider hover, focus, disabled, loading, and error states using design system props.