사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill figma-design-to-code-bridge시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
Figma Design To Code Bridge
Use this skill after figma-context-reader when the goal is implementation. The output is not "code by screenshot"; it is a mapping from design intent, tokens, and components to the existing codebase.
Modes
handoff-plan: create a build/refactor plan from a Figma frame.component-map: map Figma components/variants to existing code components.code-connect: prepare or review Figma Code Connect work.gap-report: identify where the design and code system diverge.implementation-route: hand off towebapp-ui-skillormarketing-site-skill.
Workflow
- Get Figma context through
figma-context-readeror a provided context brief. - Inspect the local codebase before recommending component choices.
- If Code Connect is requested, invoke the installed
figma:figma-code-connectskill before Code Connect-specific work. - Map tokens, components, variants, states, and responsive constraints to local implementation primitives.
- Route dense product/app work to
webapp-ui-skill; route public landing/product pages tomarketing-site-skill. - Require local visual verification after implementation. Figma match alone is not validation.
Output Shape
Use assets/design-to-code-handoff.md.
Decision Rules
- Prefer existing project components and design tokens over generating one-off CSS.
- Preserve UX intent when exact visual parity conflicts with accessibility, responsiveness, or codebase conventions.
- Treat Figma-generated code or MCP-generated code as a draft until reviewed against local architecture.
- If the Figma file lacks states, include loading, empty, error, disabled, focus, hover, and mobile states in the implementation plan.
Safety And Privacy
- Treat non-public Figma files, screenshots, variables, component names, and source code as sensitive.
- Do not send private code or Figma context to external tools without explicit approval and a data-transfer note.
- Do not overwrite local components simply to match a Figma frame; propose a scoped implementation plan first.
Validation And Eval
- Verify that the handoff includes both Figma-to-code component mapping and local validation steps.
- For implemented work, require browser or screenshot evidence from the local app.
- Use
evals/evals.jsonto test app-frame routing, marketing-page routing, and Code Connect gap behavior.
Resources
- Read
$CODEX_SKILLS_DIR/senior-figma-orchestrator/references/figma-mcp-compatibility.mdwhen current Figma tools matter.
