keisei/KeiSeiKit-1.0
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
KeiSeiKit-1.0/skills/figma-to-code/SKILL.md
Parfii-bot 036bc6a52e docs: SKILL.md triggers + STATUS-TRUTH footer + phase placeholders 
Group G — markdown tech-debt cleanup (post-audit 2026-05-02).

- 36 SKILL.md files: added "## When to use" section. Was missing across the
  catalog; orchestrator routing by keyword could not auto-dispatch.

- 20 code-implementer agent .md files: added Output Footer block prescribing
  RULE 0.16 STATUS-TRUTH MARKER schema in agent's final report. Previously only
  code-implementer-rust.md had it; other 27 language/role variants were silent
  about the marker, breaking RULE 0.16 §3 status-truth aggregation for non-Rust
  batches.

- skills/site-create/: added phase-5-preview.md and phase-6-deploy.md skeleton
  files. SKILL.md table-of-contents referenced 7 phases; only 5 existed on disk.

- skills/{ai-animation,rag-pipeline}/skill.md: added migration banner comment
  noting they should be SKILL.md (canonical filename). Case-rename via git is a
  separate orchestrator task (macOS APFS is case-insensitive; Linux deploy needs
  explicit rename).

- 3 deprecated skills (site-builder, competitor-analysis, design-inspiration):
  added concrete removed-after dates (was vague "before v2").

- docs/CONVERGENCE-PLAN.md:129: TBD on _blocks/evidence-grading.md duplicate
  resolved (file exists, not duplicated).

- docs/DNA-INDEX.md: count edits made then overwritten by auto-encyclopedia-refresh
  hook during agent run. The .kei-registry-ignore files in test fixtures (Group F)
  are the structural fix; kei-registry walker implementation is the follow-up.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-02 21:41:41 +08:00

2.2 KiB
Raw Blame History

name description arguments
figma-to-code Use when converting Figma designs to code — screenshot, context, tokens, responsive implementation
name description required
url Figma URL (figma.com/design/... or figma.com/make/...) true

Figma to Code Workflow

When to use

  • Converting a Figma design to code: extract design context → analyse layout/typography/tokens → implement responsive component.
  • Translating a specific Figma frame or node into a project's existing component library and design token system.
  • Any task starting with a Figma URL that needs accurate pixel-level implementation.

Step 1: Extract from Figma

  • Parse URL to get fileKey and nodeId
  • Call get_design_context with fileKey and nodeId (Figma MCP / REST)
  • Call get_screenshot for visual reference
  • Review returned code, tokens, and component mappings

Step 2: Analyze Design

From the Figma output, identify:

  • Layout: flex/grid structure, spacing, alignment
  • Typography: font family, size, weight, line-height, color
  • Colors: map to project's design tokens or CSS variables
  • Components: map to existing project components
  • Responsive hints: auto-layout direction, min/max widths
  • Interactions: hover states, transitions, animations

Step 3: Map to Project

  • Match Figma colors → project design tokens
  • Match Figma fonts → project typography scale
  • Match Figma components → existing project components
  • Identify gaps: new components or tokens needed
  • If Code Connect mappings exist, use them directly

Step 4: Implement

  • Use project's stack (React, Next.js, Astro, SvelteKit, etc.)
  • Mobile-first responsive implementation
  • Match pixel-perfect on design breakpoint
  • Adapt gracefully to other breakpoints
  • Use design system components where they match

Responsive Breakpoints

  • Mobile: 375px (default)
  • Tablet: 768px
  • Desktop: 1024px
  • Wide: 1280px

Step 5: Verify

  • Compare screenshot with implementation side-by-side
  • Check all breakpoints
  • Verify interactive states (hover, focus, active)
  • Accessibility check (contrast, keyboard nav, ARIA)
  • Cross-browser check (Chrome, Safari, Firefox)

Step 6: Commit

  • feat: implement <component/page> from Figma design