design MCP Server
Generates production-ready Mantine v7 components from Figma designs using a 3-stage AI workflow (Plan → Act → Reflect), validated by Storybook and Playwright.
Discovered via github-topic:mcp-server and last synced 3mo ago.
1. Install the package
npm install figma-ai-project
Poll a running job — returns state, timestamps, recent log tail.
Visual Snapshot
Break-glass only — fires if escalation Step 1 also fails; ~15× Haiku cost
Read the full plan markdown after `mantine_plan` completes.
Rewrites dry `detail` fields into assertive architect persona before posting to Figma
What it checks
Size Variant Coverage
Test Coverage
Read all 4 generated files after `mantine_generate` completes.
Tracker Update
Package
data-* Attributes
`@tabler/icons-react`
Stage 2+3 — write TSX/CSS/stories/spec. Skips Stage 1 if a plan exists. ~15–20 min.
Dependency Audit
Stage
Notes
File Integrity
Model
`@playwright/test`
Description
PostCSS Standard
—
Token Compliance
Portal CSS Variable Scope
`@storybook/react-vite`
Storybook Autodocs
`--escalate` flag: fresh Sonnet run after the 3-iteration self-healing cycle fails
Stage 1 — query Figma, produce architectural plan. ~5–10 min. Returns instantly on cache hit (<24 h).
Design de produto nivel Apple — sistemas visuais, UX flows, acessibilidade, linguagem visual proprietaria, design tokens, prototipagem e handoff. Cobre Figma, design systems, tipografia, cor, espacamento, motion design e principios de design cognitivo.
Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, UI mockups, product shots, or transparent-background cutouts. Use when the result should be an image asset rather than repo-native SVG, HTML/CSS, or canvas.
Challenges hacky fixes on non-trivial changes.
Apply UI design principles from Refactoring UI by Adam Wathan & Steve Schoger. Covers visual hierarchy (size, weight, color, spacing), layout systems (spacing scales, grids), typography (type scales, line-height, alignment), color (HSL palettes, shade systems, accessible contrast), depth (shadow elevation, overlap), images (text on images, user content, icons), and finishing touches (accent borders, empty states, fewer borders). Trigger on "UI design", "visual hierarchy", "spacing system", "type scale", "color palette", "shadow", "layout", "design system", "component design", "card design", "form design", "button design", "refactoring UI", "design tokens", "dark mode", "responsive design".
Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, without claude.ai/design. Best with Opus or Claude.
Design engineering skill for AI Agents — build interfaces with craft-level quality
Learn how to use the absolute-spec Claude skill. Complete guide with installation instructions and examples.
Learn how to use the oasis-design-system Claude skill. Complete guide with installation instructions and examples.
Learn how to use the Typography Advisor Claude skill. Complete guide with installation instructions and examples.