figma-layout-guard

Turn Figma-to-code from "AI guesswork" into a verifiable engineering workflow.

figma-layout-guard is an open-source starter toolkit for frontend engineers using Cursor + Figma MCP. It combines:

• Figma MCP context for implementation hints
• Figma REST API raw node data for layout truth
• Mechanical JSON-to-CSS translation with risk warnings
• Cursor rules for consistent, reviewable execution

Why this project exists

Design-to-code assistants are fast, but teams still hit recurring issues:

• Missing auto-layout semantics (layoutMode, itemSpacing, sizing strategies)
• Hidden browser model mismatches (box-sizing, overflow, fixed width text clipping)
• Inconsistent output quality across pages and contributors

This project provides a repeatable workflow that is easier to debug, review, and improve over time.

Positioning

• Slogan: Verifiable Figma-to-Code, not vibes.
• Target users:
  • AI coding heavy users (Cursor + Figma MCP)
  • Frontend engineers shipping pixel-accurate pages
  • Solo builders and small product teams
• Core value: preserve layout truth while keeping AI speed.

Project scope (v0.1)

1. Fetch raw node JSON with complete auto-layout fields
2. Translate node JSON to CSS rules mechanically
3. Emit risk warnings for common rendering failures
4. Provide reusable Cursor rule templates and docs

Quick start (5 minutes)

1) Install

npm install

2) Run with sample

npm run demo:translate

3) Run against real Figma node

export FIGMA_ACCESS_TOKEN="your_token"
node scripts/figma-get-node-raw.js "<figma-url-with-node-id>" > node.json
node scripts/figma-to-css.js node.json

Commands

• npm run demo:translate - translate sample node JSON
• npm run demo:node - show raw-node script usage
• npm run check - syntax check for scripts

Repository map

• scripts/figma-get-node-raw.js - raw node fetcher via Figma REST API
• scripts/figma-to-css.js - mechanical JSON-to-CSS translator
• .cursor/rules/figma-to-css.mdc - Cursor workflow guardrails
• examples/ - sample input for quick verification
• docs/ - architecture, roadmap, cases, growth and metrics assets

Learn more

• Architecture: docs/architecture.md
• Roadmap: docs/roadmap.md
• Case studies: docs/case-studies/
• Contribution guide: CONTRIBUTING.md
• Growth loop: docs/growth/weekly-loop.md
• Credibility assets: docs/credibility/metrics-dashboard.md

License

MIT