design-mirror-init

Drop a Figma-first rules file into your project so AI-generated UI imports cleanly into Figma via Design Mirror.

Quick start

npx design-mirror-init

Writes CLAUDE.md to your current directory. Your AI coding tool (Claude Code, Cursor, Claude Desktop) reads it and follows the rules when generating UI.

What it does

The rules file tells your AI to build UI in a Figma-friendly way:

• Flexbox over absolute positioning
• Semantic HTML (<h1>, <p>, <button>, etc.)
• Padding + gap, never margin
• Skip-friendly naming for icons / charts / floating elements
• One style per text node

Result: when you capture the rendered page into Figma with Design Mirror, the resulting design has clean auto-layout, named layers, and minimal post-import cleanup.

Options

npx design-mirror-init --name AGENTS.md    # Custom filename
npx design-mirror-init --rules-only        # Print to stdout
npx design-mirror-init --force             # Overwrite existing file
npx design-mirror-init --dry-run           # Show what would be written

Lint your project

Run before capturing into Figma — catches rule violations at code time.

npx design-mirror-init check

Reports position: absolute on content, wrapping CSS Grid, transform: translate for layout, Tailwind absolute outside overlay paths, inline <svg> inside text nodes, and more. Exit code 1 if issues found.

npx design-mirror-init check --json   # CI / pre-commit hooks

Suppress a single false positive:

.thing {
  /* design-mirror-ignore */
  position: absolute;
}

Files inside paths matching modal|dialog|tooltip|popover|dropdown|overlay|drawer|toast|menu|select get absolute-positioning flagged at INFO instead of WARN — overlay components legitimately use absolute.

How to use the rules

After running this CLI, your project root has CLAUDE.md. Then:

1. Claude Code auto-reads CLAUDE.md. No setup.
2. Cursor — rename to .cursorrules or include via @CLAUDE.md in a prompt.
3. Other AI tools — paste the file content into your system prompt.

Then build your page. When ready, capture it into Figma with Design Mirror and toggle Auto Layout: On to get clean Figma frames.

License

MIT