figma-to-code
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.
소스 정보
- 저장소
- stellar/laboratory
- 최근 소스 활동
- 2026년 4월 22일 19:18
- 감지된 SKILL.md 언어
- 영어
- 스타
- 112
- 포크
- 122
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
파일 탐색기
2 개 파일SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- 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"]
# Figma to Code
## Purpose
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).
## Workflow
### 1. Get the Figma design context
```
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" })
```
### 2. Translate the output
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`.
### 3. Verify against screenshot
After implementing, visually compare the rendered component against the Figma
screenshot. Focus on: layout, spacing, typography hierarchy, and interactive
states.
## Common Pitfalls
1. **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.
2. **Don't use arbitrary colors** — Figma may show raw hex values. Map them to
SDS color tokens (`--sds-clr-*`).
3. **Don't ignore interactive states** — Figma may show one state. Consider
hover, focus, disabled, loading, and error states using design system props.
GitHub에서 보기