Keep a design artifact.
Figma, Paper, Sketch, Penpot, Pencil, OpenPencil and Lunacy differ in how much of the document an agent can inspect or change.
Compare the canvases →01 / STATE
What are the options?
Start with the kind of work you want to keep editable: a design document, an application, or an agent-driven project.
Work on the implementation.
v0 and Lovable generate app projects. Framer operates on its site canvas and CMS. Their outputs and hosting commitments are not interchangeable.
Compare the builders →Explore with an agent.
Stitch, Claude Design and OpenDesign connect design exploration to code in different ways: a service call, a handoff, or a runtime inside the studio.
Compare the connections →These are navigation groups, not maturity rankings. A tool can span more than one group. The readout below compares the actual routes and constraints.
02 / COMPARISON
What each tool gives you.
Thirteen options, compared by the work they support. No aggregate scores: a canvas, a site builder and an agent studio solve different problems.
| Tool | Primary surface / output | What the agent can do | Design-system support | Main workflow consideration |
|---|---|---|---|---|
| FigmaShared design platform | Design canvas + separate Make app workflow | Components, variables and libraries; Code Connect can point to real code.6 | Plan, seat and approved-client rules matter. | |
| PaperHTML/CSS canvas | Editable web-oriented design | Web structure and styling; design-system import needs fidelity checks. | Desktop and an open file remain required for document work. | |
| SketchMac-native design app | Local documents + shared libraries | Inspect, export and run scripts against the full Sketch API.10 | Symbols, overrides, styles and libraries remain editable. | A licensed Mac app and supported installation are required. |
| PenpotOpen design platform | Web canvas; cloud or self-hosted | CSS-oriented layout; token sets, aliases, themes and imports/exports. | Remote MCP does not remove the active browser/plugin dependency. | |
| Pencil / pen.devRepo-oriented design files | IDE/desktop .pen documents | Variables, themes, reusable components, slots and libraries. | The application, file format and planned usage tiers are distinct. | |
| OpenPencilOpen .fig editor | Local/browser files + headless tools | MCP/CLI document editing; can also run supported coding agents.18 | Components, variables and layout in .fig documents. | Validate production-file compatibility; open format access is not perfect fidelity. |
| LunacyCross-platform editor | Local design files | Inspection and design-context retrieval are documented.19 | Component and color-variable context for implementation. | Do not treat documented read access as a canvas-write interface. |
| FramerSite and CMS platform | Hosted websites, components and content | Official external-agent bridge can edit canvas and CMS.21 | Site styles, components and CMS models. | The site platform remains part of the operating model. |
| v0App/code generator | Working UI and application code | Design Systems 2.0: a saved skill, source adapter and reviewed starter.58 | Hosted generation and deployment have their own usage costs. | |
| LovableApp-building platform | Full app project + Git sync | Versioned React system projects, schema and adherence checks.57 | An app/code route, not a native .fig editing round trip. | |
| Google StitchAI design workspace | Design directions, screens and code | Imports/exports DESIGN.md; can carry rules into other tools.33 | Labs availability and quotas must be checked in the account. | |
| Claude DesignDesign and prototyping workflow | Visual prototypes and presentation artifacts | Brand references and codebase-derived systems via /design-sync. | Shared Claude usage; no general external canvas-write route established. | |
| OpenDesignAgent-driven design studio | Local or hosted code-based projects | Can call installed agent runtimes; also exposes skills/CLI/MCP.37 | Reusable design context and skills around project files. | Local core and hosted subscription are different offerings. |
No matching tool. Clear the search or choose another group.
Select a tool name for its mechanism, reuse model and evaluation questions. For prices, jump to Costs; for a named coding system, jump to Pairings.
03 / PAIRINGS
How they pair with coding agents.
“Works with AI” is too broad. Check who calls whom, what can change, and which connection is actually documented.
Harness → design toolThe coding agent reads or changes a design through an API, MCP or CLI.
Design tool → harnessA studio runs the coding agent. Model access and runtime behavior belong to that adapter.
Artifact → repositoryA file moves between tools. It can be useful without providing live synchronization.
The terms: a harness is the software that runs the coding agent. MCP connects that agent to tools; a CLI lets it call commands. OAuth is a sign-in and authorization route. Matching the acronym is not enough: the client, permissions and execution location still have to match.39, 48
| Design tool / route | Claude Code | Codex | OpenCode | Pi | DeepSeek Harness | Copilot in VS Code |
|---|---|---|---|---|---|---|
| FigmaRemote MCP; native edit / capture2 | Named | Named | Check catalog | Check catalog | Check catalog | Named |
| PaperLocal stdio / HTTP MCP7 | Named | Named | Named | MCP route | MCP route | Named |
| SketchLocal HTTP MCP + scripting10 | Named | Named | MCP route | MCP route | MCP route | Named |
| PenpotMCP → live browser plugin12 | MCP route | MCP route | Named | MCP route | MCP route | MCP route |
| Pencil / pen.devLocal MCP; .pen in project15 | Named | Named | MCP route | MCP route | MCP route | MCP route |
| OpenPencilMCP/CLI; agent runtime option18 | Runs inside | Runs inside | MCP route | Runs inside | MCP route | MCP route |
| LunacyLocal MCP; inspection only here19 | Read route | Read route | Read route | Read route | Read route | Read route |
| FramerOfficial CLI/skill bridge21 | Named | Named | Tool/CLI route | Tool/CLI route | Tool/CLI route | Tool/CLI route |
| v0Remote MCP; hosted generation23 | MCP route | MCP route | MCP route | MCP route | Auth check | MCP route |
| LovableRemote MCP; hosted generation26 | Named | Named | MCP route | MCP route | Auth check | MCP route |
| Google StitchGoogle MCP/SDK; key or OAuth31 | MCP route | MCP route | MCP route | MCP route | MCP route | MCP route |
| Claude DesignNative CC handoff; files otherwise34 | Direct handoff | Exported files | Exported files | Exported files | Exported files | Exported files |
| OpenDesignStudio ↔ tools; studio → runtime37 | Runs inside | Runs inside | Runs inside | Runs inside | Runs inside | Tool/CLI route |
Named / Direct handoff A first-party guide names that client or native continuation.
MCP / Tool / Read route A plausible route, not a vendor-certified or hands-on-tested pairing.
Runs inside The studio/editor launches the runtime.
Exported files File handoff only in this review.
Check catalog / Auth Approval or authentication needs resolution before relying on the route.
Pairing evidence comes from each tool’s linked profile plus the client documentation below. “Generic” checks the connection model only: transport, OAuth, images, tool permissions and the installed versions still need a small end-to-end test. It is not a feature-parity claim.
Three easy mistakes
Claude Desktop is not Claude Code. Copilot CLI is not Copilot in VS Code. A local MCP server is not automatically reachable from a cloud agent. Match the actual application and where it runs, not just the model brand.
Cursor is explicitly named in several canvas and bridge guides. Google documents Antigravity + Stitch; OpenPencil also names Gemini CLI. They are additional pairings to consider; the matrix focuses on the six coding systems covered in this guide.7, 10, 21, 30, 18
04 / HARNESSES
The coding system changes the pairing.
Compare the client and execution environment as well as the design tool. The same model in a different harness does not create the same workflow.
Claude Code
Local stdio and remote HTTP/OAuth. Good fit for a coding workflow that also operates a design tool and runs repository checks. Scope permissions to the task.39
Cost model Claude subscription allowance or API usage; Design and Code can draw on the same plan.36
Codex
MCP can add design context and operations. Use the local client for local application bridges, or a reachable remote service for remote execution. A design tool must also allow the client.40
Cost model Included in eligible ChatGPT plans, including Plus at $20/mo; API-key use is billed separately.41
OpenCode
Current v2 documentation includes local/remote MCP, OAuth and Codemode. Version-specific configuration matters; do not copy a v1 integration snippet blindly.42
Cost model Open-source client; use an eligible existing account, included models or a paid provider. No universal per-project price.43
Pi
Built-in MCP and Codemode let Pi work with connected tools. Its lean permission model makes the surrounding sandbox and review process important.44
Cost model MIT client; model access, compute and extension maintenance are separate.45
DeepSeek Harness
A real official harness, not just a DeepSeek model setting. Its MCP plugin supports stdio and Streamable HTTP. Browser OAuth compatibility is a separate check; the project is a developer preview.46
Cost model MIT core; provider/model and runtime costs. Expect version changes during preview.47
Copilot in VS Code
Workspace MCP configuration and trusted tool access connect the editor to design services. Keep it distinct from the separate Copilot CLI and cloud coding-agent surfaces.48
Cost model Free; Pro $10/mo, Pro+ $39/mo, Max $100/mo. Current plans use GitHub AI Credits; review included usage.49
The harness supplies the working context, tool calls and execution environment; the model supplies the inference. A model’s image support and tool reliability can change the experience even when the harness and design connection are unchanged.
05 / TOOLS
A closer look at the tools.
Open a profile for the mechanism behind the comparison, what gets reused, and the practical questions I would take into a trial.
Shared design platformFigmaPlan, seat and approved-client rules matter.
How it works
Three jobs, not one: inspect design context; use use_figma for native edits; use generate_figma_design to capture rendered UI as editable frames. Figma Make is a separate code-generation surface.
What gets reused
Code Connect maps a design component to implementation examples. It is available on Organization/Enterprise with a Dev or Full seat; it does not establish automatic two-way synchronization.
What I would check
Native writes currently exclude image assets and custom fonts. Capture has different limits: any seat can work in drafts, while editing outside drafts requires a Full seat and edit permission.
Product documentation 2, 3, 6 · Price and usage ↓
HTML/CSS canvasPaperDesktop and an open file remain required for document work.
How it works
The preferred connection is now paper mcp over stdio. The older local HTTP route also works. The CLI can expose tools while Desktop is closed, but document operations still need the app and file open.
What gets reused
Useful when layout should remain close to HTML/CSS. The documented Figma-to-Paper workflow can transfer context, but component overrides, SVG fills and code-connected components have stated limitations.
What I would check
Try a representative responsive screen and its components before migrating a library. A successful import is not proof that every relationship survives.
Product documentation 7, 9 · Price and usage ↓
Mac-native design appSketchA licensed Mac app and supported installation are required.
How it works
The built-in local HTTP server exposes document operations plus run_code for Sketch API scripts. It is off by default and requires version 2025.2.4 or later from the direct-download distribution, not the Mac App Store build.
What gets reused
An established document-and-library workflow that agents can operate. This is design automation through an application API, not an automatic production-code generator.
What I would check
Review script scope and inspect library changes. A local MCP connection does not mean a cloud model keeps the returned design data on the Mac.
Product documentation 10 · Price and usage ↓
Open design platformPenpotRemote MCP does not remove the active browser/plugin dependency.
How it works
Both local and remote MCP route into a companion plugin. Keep the intended file/page active and connected. The local route has file-system operations that a remote server cannot simply inherit.
What gets reused
Its documented tokens use the DTCG approach, including aliases, sets and themes. This supports a shared vocabulary across design and code; transformations and naming still need ownership.
What I would check
Test disconnect/reconnect behavior and the target document before unattended work. Self-hosting changes where the platform runs, not where a separately chosen model processes context.
Product documentation 12, 14 · Price and usage ↓
Repo-oriented design filesPencil / pen.devThe application, file format and planned usage tiers are distinct.
How it works
External agents use a stdio bridge into the running app. Current tools include execute, read_skill and get_app_state. Desktop and IDE workflows can keep the design beside the code.
What gets reused
The .pen representation is structured rather than a screenshot. Variables and reusable components give an agent existing material to work with instead of regenerating every screen.
What I would check
Review design-file diffs, component reuse and app-version compatibility. Published sharing/version features do not, by themselves, establish simultaneous multiplayer editing.
Product documentation 15, 17 · Price and usage ↓
Open .fig editorOpenPencilValidate production-file compatibility; open format access is not perfect fidelity.
How it works
The MIT project combines .fig read/write with local/headless automation and a bring-your-own-model assistant. Desktop can run Claude Code or Codex; the documented Pi route uses a companion harness package.
What gets reused
An option for teams that want file-level control without depending on the Figma service for every operation. Components and variables are part of the editor, not just a Markdown description.
What I would check
Round-trip complex files, font handling, variants and prototype behavior before committing. Restrict file access for any headless server. “Runs this agent” and “this agent calls its MCP” are different routes.
Product documentation 18 · Price and usage ↓
Cross-platform editorLunacyDo not treat documented read access as a canvas-write interface.
How it works
The local integration lets an assistant inspect the current design, retrieve assets and understand components/variables. Its setup names Claude Desktop; that is not the same product as Claude Code.
What gets reused
A candidate when people edit the design and the agent needs context to implement it. This review did not establish an official mutation workflow through that MCP surface.
What I would check
Try the exact client and selected document. Licensed graphics and cloud/team entitlements are separate from the free editor.
Product documentation 19 · Price and usage ↓
Site and CMS platformFramerThe site platform remains part of the operating model.
How it works
The official bridge uses an agent setup/skill workflow rather than requiring a separate third-party MCP plugin. It names Claude Code, Codex, Cursor and Antigravity; the project need not remain open.
What gets reused
Agents can work with the actual site canvas, components and CMS. This is useful for content and site operations, not only an early visual prototype.
What I would check
External changes use branches according to the guide. Confirm branch/publish entitlements on the selected plan and keep publishing authority separate from drafting.
Product documentation 21 · Price and usage ↓
App/code generatorv0Hosted generation and deployment have their own usage costs.
How it works
The official v0.app/api/mcp endpoint uses OAuth and a team selection. It exposes project/code-generation operations; this is the upstream harness asking v0 to do work, not just v0 calling outside tools.
What gets reused
Design Systems 2.0 saves a skill referencing the real components, tokens and setup. It prepares a starter for review before saving; existing apps do not automatically adopt a later skill update.
What I would check
Review the resulting repository, dependencies and runtime behavior. An import path that uploads HTML to a public blob is inappropriate for confidential material without an approved alternative.
Product documentation 23, 25, 58 · Price and usage ↓
App-building platformLovableAn app/code route, not a native .fig editing round trip.
How it works
The external MCP uses Streamable HTTP and OAuth. Claude Code and Codex are named clients; other clients may need a public OAuth client ID. That direction is different from adding an MCP connector inside Lovable.
What gets reused
Its React design-system projects supply components, a generated schema and rules. Updates are accepted per project; the copied system files can overwrite local edits. Figma imports are context, not .fig round trips.
What I would check
Keep Git synchronization and deployed data/services in the evaluation. Source-code access reduces one dependency; it does not automatically migrate the running backend.
Product documentation 26, 27, 57 · Price and usage ↓
AI design workspaceGoogle StitchLabs availability and quotas must be checked in the account.
How it works
Stitch generates and revises screens; its SDK exposes more than retrieval. Google documents an Antigravity handoff, while the MCP/SDK provides a route for other compatible clients.
What gets reused
DESIGN.md lets rules and rationale travel between projects. It is useful context, but a generated page still needs to be reconciled with the actual component library and application states.
What I would check
Distinguish screen export from integration into your existing repo. Authentication, quota, supported output and the downstream hosting path are part of the trial.
Product documentation 31, 32, 33 · Price and usage ↓
Design and prototyping workflowClaude DesignShared Claude usage; no general external canvas-write route established.
How it works
A visual exploration workflow that can continue into Claude Code. Other harnesses can work with exported code or documents; that is a file handoff, not evidence of a live supported design-editor integration.
What gets reused
The current system setup supports brand material and existing product code. In Claude Code, /design-sync can build system context from components and tokens.
What I would check
Check what survives export and how a later design change returns to the implementation. Design and Claude Code now share the plan’s usage allowance.
Product documentation 34, 35 · Price and usage ↓
Agent-driven design studioOpenDesignLocal core and hosted subscription are different offerings.
How it works
There are two directions: a harness can invoke OpenDesign tools, or OpenDesign can launch a coding-agent runtime. The runtime list includes Claude Code, Codex, OpenCode, Pi and DeepSeek Harness.
What gets reused
Works around generated project files and reusable design context. It is an alternative orchestration workflow, not evidence of full canvas-library parity.
What I would check
The supported Copilot runtime is Copilot CLI, not proof of the same integration inside VS Code. Check resume, cancellation, model choice and output ownership for the selected adapter.
Product documentation 37 · Price and usage ↓
06 / COSTS
What you pay, and what gets metered.
Use the published unit: per editor, per workspace, per site, or model usage. Then add the cost of getting the change accepted.
USD · public prices checked 9 October 2026 · taxes excluded · annual commitments and introductory offers called out
| Tool | Published entry / relevant tiers | What the price does not settle |
|---|---|---|
| Figma | Seats + AI credits + separate MCP rate limits. View/Collab: up to 20 read calls/month; some write tools are exempt. | |
| Paper | Free. Pro $20/editor/mo monthly or $16 with annual billing. Organizations: quote.8 | 100 MCP calls/week free; 1 million/week on Pro. Your coding-agent/model usage is additional. |
| Sketch | Annual plans: Standard $12/editor/mo, Professional $24, Enterprise $44. Mac-only licence: $120/seat, one year of updates.11 | No separate MCP meter stated. Model usage is separate; the Mac-only licence excludes cloud collaboration. |
| Penpot | Professional $0. Unlimited $7/editor/mo, capped at $175/mo. Enterprise $25/member/mo. Private Server listed at $50,000/year.13 | Open-source core is not the same purchase as managed hosting or enterprise controls. Budget model use and operations. |
| Pencil / pen.dev | Currently free until plans launch. Published planned tiers: Free $0, Pro $16/user/mo, Ultra $48/user/mo.16 | Planned agent-day allowances include external MCP use. Free lists five agent-days/month; your own model subscription/API charges remain separate. |
| OpenPencil | Free, MIT-licensed software.18 | Bring your own model or coding-agent access; local compute, maintenance and compatibility work are still costs. |
| Lunacy | Free editor. Personal cloud $4.99/mo; team $4.99/user/mo; full graphics $9.99/mo when purchased inside Lunacy.20 | Account for asset licensing and the model used to interpret the returned context. No write allowance is implied. |
| Framer | External-agent connections are free during preview. Internal agent credits, site hosting and collaboration are separate cost items. | |
| v0 | Free. Plus $30/user/mo; Business $100/user/mo; Enterprise quote.24 | Plus and Business each list $30 monthly credits/user, with daily login credits. Additional generation and hosting can add cost. |
| Lovable | Credits are not prompts. Build complexity, Cloud/runtime and app AI usage have different consumption rules. | |
| Google Stitch | Do not reuse third-party generation counts as a current allowance. Caller-model, Cloud and downstream hosting charges may be separate. | |
| Claude Design | Design, chat and Claude Code share usage. Do not budget them as separate unlimited allowances. | |
| OpenDesign | Local model/runtime charges remain yours. Hosted credits and team features follow the chosen plan. |
A planning model, not a supplier quote
Design access + agent/model use + running the result + review.
Count paid seats or workspace fees, generation and tool usage, previews/hosting, and the time spent correcting and approving changes. Calls, credits, tokens and agent-days are different units. A large allowance in one does not buy the others.
Paper Pro + Claude Pro
$20 + $20 = $40/month in monthly subscriptions before tax. That buys the published plan allowances, not unlimited model work, deployment or review.8, 36
Lovable Pro + Copilot Pro
$25 + $10 = $35/month before tax. A file/Git handoff remains possible without asserting that the MCP pairing has been tested. Credits, runtime and hosting can change the total.28, 49, 29
OpenPencil + Pi
$0 in software licence fees is not $0 to operate. Model calls, compute, integration and review remain. Record actual spend and rework on the same task before comparing value.18, 44
07 / SYSTEMS
Keep the system, not just the look.
A useful pairing should carry forward the decisions you already made. Compare tokens, components and design guidance as separate capabilities.
| Option | What it carries | Useful role | Trade-off |
|---|---|---|---|
| Canvas libraries and variables | Designers reuse components, variants, layouts and themes in the design tool. | Figma libraries/variables, Sketch symbols, Penpot tokens, Pencil components. | |
| DTCG token JSON | Typed values and aliases shared between compatible tools. | Use as a machine-readable token source; transform to CSS or platform outputs. | |
| Google DESIGN.md | Structured YAML values plus Markdown rationale for coding agents. | Carry a compact visual identity through Stitch and a repository workflow. | |
| Code components + stories | The implementation, variants and representative states people will actually ship. | Connect a component repo to Storybook; add Code Connect where applicable. | |
| Plain design Markdown / agent instructions | Explain layout intent, exceptions, component choices and boundaries. | A repository guide, AGENTS.md, CLAUDE.md or a design brief referenced by the harness. | |
| Codebase-derived system context | Extract a usable system description from existing product material. | Claude Design /design-sync; design-system context supplied to a builder. |
Map the design to code.
Connect design components to production implementation examples. The mapping improves context; it does not rewrite every consumer when a design changes.6
Save an implementation adapter.
Use a reviewed starter, source references and a reusable skill. Revision history tracks skill changes; existing app code needs an explicit update.58
Release and attach the system.
React components and schema-derived rules are copied into connected projects. Updates require acceptance. One system per project; npm-wrapper systems are Enterprise-only.57
My recommendation
Do not make the team choose between a canvas, tokens and Markdown as though they were substitutes. Pick one authoritative source for each kind of decision: values, implemented components and design rationale. Define how changes move between them and who resolves a disagreement.
01 / VALUESSemantic tokens
Names such as surface, text and action explain purpose better than copied hex values.
02 / BEHAVIORComponents and states
Reuse the actual button, field and dialog, including error, focus and disabled states.
03 / INTENTDesign guidance
Explain hierarchy, density, tone and exceptions, with examples the agent can reference.
04 / EVIDENCEChecks and review
Compare the result with an approved baseline and test the paths people need.
This is a proposed operating pattern, not a feature that every product supplies. Token export can help connect layers; it does not make every transform lossless or establish a synchronized source of truth.
08 / DESIGN-MD
Where Google’s DESIGN.md fits.
A portable way to explain a visual identity is valuable. It becomes more useful when its role and limits are explicit.
More than prose. Less than a complete system.
Google’s format combines YAML token values with a Markdown explanation of the visual identity. Tokens supply exact values; prose supplies context. The specification is currently alpha.51
That makes it useful for handing design intent to a coding agent without requiring the agent to infer everything from pixels. It does not replace the components, interactions or product rules already implemented in your repo.
Documented CLI · pin a reviewed version in a real project
npx @google/design.md lint DESIGN.md
npx @google/design.md diff DESIGN.md DESIGN-next.md
npx @google/design.md export --format dtcg DESIGN.mdlint checks the document; diff reports token changes and whether errors/warnings increased; export can produce DTCG or Tailwind outputs. A successful export does not require a clean lint result.50
Regression ≠ regression
The CLI’s regression flag is about increased validation findings. It is not a screenshot, interaction or accessibility regression test of the application. A layout can change substantially while that flag stays false. Keep the rendered-product checks below.
When an existing DTCG repository owns the tokens, generate or reconcile the DESIGN.md values from it rather than hand-editing a competing copy. For a small new system, DESIGN.md may be the starting source, with generated platform files treated as outputs. These are two deliberate choices, not automatic bidirectional synchronization.
09 / REGRESSION
How to catch unintended changes.
The agent needs instructions before the change and evidence after it. Use different checks for different failure modes.
| Protection | What it catches | How to use it | What it does not prove |
|---|---|---|---|
| Token and schema checks | Broken aliases, missing definitions, unsupported values and unintended token edits. | Validate the source and inspect its diff. Build generated CSS/platform outputs from the reviewed version. | |
| Component/reuse checks | The agent recreated a component, detached an instance or introduced a hard-coded style. | Check actual imports, component identifiers, variants and allowed styling rules. | Requires project-specific rules; there is no universal component-reuse guarantee. 6 |
| Visual comparisons | Unexpected spacing, typography, clipping, layering or theme changes. | Capture approved states at fixed viewports with controlled fonts, data, browser and OS. Review changes before accepting new baselines. | |
| Interaction and accessibility tests | The page looks right but an error, keyboard path or assistive interaction is broken. | Exercise critical tasks and component states. Combine automated checks with manual keyboard and accessibility review. | Automated accessibility tests detect only part of the problem. 56 |
| Scope, version and approval checks | A narrow request silently alters shared components or unrelated screens. | Work on a branch or versioned copy, state what must stay unchanged, and review the affected consumers. | A branch helps review and recovery; it is not proof the change is good. 21 |
Some tools add their own checks: Lovable documents scans for raw colors, off-scale values and recreated components, with corrective retries. v0 rechecks its starter when a system skill changes. Treat these as useful controls, not replacements for independent product tests.57, 58
Define the boundary.
Name the screen, permitted changes, canonical tokens/components and states that must stay intact. Include an approved baseline and realistic fixture content.
Make a scoped change.
Ask it to reuse before adding, inspect the changed output and run the relevant checks. Keep generation and baseline approval as separate responsibilities.
Review the difference.
Inspect the design/code diff and rendered states. Require an explanation for new components, tokens or snapshot updates. Reject “the test passed” when the baseline was simply replaced.
A useful minimum scenario pack includes narrow and wide layouts, light/dark themes where supported, long labels, empty/loading/error states, focus/keyboard paths, and important roles or permissions. Select the relevant cases; this is a proposed review pattern, not a completed benchmark.
10 / CHOOSE
Which combination would I try first?
These are starting configurations, not winners. Begin with the artifacts, constraints and team habits you already have.
Figma + a supported coding client + the component repo
Start where the team’s components and decisions already live. Use mappings rather than asking the agent to approximate everything from a frame.
The trade-off Seat/client gates and Code Connect plan requirements. Test one real change and its affected component consumers.6, 2
Pencil or Paper + Claude Code / Codex / OpenCode
Compare a structured design-file workflow with an HTML/CSS-oriented canvas. Choose on the artifacts and review path your team needs, not a generic “AI-native” label.
The trade-off Pencil’s planned agent-day model versus Paper’s call allowances; running-app constraints and what survives reuse.15, 7
OpenPencil or Penpot + a compatible harness
Choose local .fig editing/headless work or an open web platform with token support. Their ownership and operational models are different.
The trade-off File fidelity and maintenance for OpenPencil; plugin/session dependencies and hosting for Penpot.18, 12
Stitch + DESIGN.md, or Claude Design + Claude Code
Generate alternatives, select a direction, then bring the chosen rules and code into a reviewed implementation.
The trade-off A design-system document is not proof that generated code uses the production components. Validate the handoff.33, 35
v0 / Lovable for app projects; Framer for its site/CMS workflow
Compare the code/hosting route with the site-editing route. Use the platform’s real integration, not a shared assumption that every generator has the same output.
The trade-off Runtime services, deployment permissions, credit consumption and the cost of moving away.23, 26, 21
Existing components + tokens + design guidance + coding agent
A valid option when the repo already has a useful system and review setup. Add a canvas only when visual exploration or shared review is the missing capability.
The trade-off More responsibility for visual direction and system maintenance stays with the team. Keep stories, snapshots and interaction checks.53, 55
OpenDesign + a supported coding runtime
Consider this when the desired change is how the team briefs, previews and exports agent-built work, rather than which precision canvas it uses.
The trade-off Check the actual adapter, model account, resume behavior and output path. Copilot CLI support does not establish VS Code support.37
Compare on one real task
Use the same approved components, tokens and scenarios. Record setup time, successful changes, corrections, review time and total usage cost. A short task can expose a bad pairing without pretending to rank the whole market.
11 / PLAYBOOK
Use the comparison to make a decision.
Choose a small, representative assignment before a platform migration or a large automation commitment.
What this readout establishes
A dated map of documented product surfaces, connections and commercial terms. Named integrations, generic routes and file handoffs are kept distinct. Product documentation describes the offered capability; it does not establish comparative output quality.
What still needs a trial
Authentication, exact versions, account entitlements, production-file fidelity, model/tool reliability and actual cost per accepted change. No end-to-end tool-pairing benchmark was performed for this article.
The shortlist is not a complete market census. Prices are snapshots, not quotes; licence, hosting, model-provider and data-processing terms should be checked for the actual engagement. The workflow and regression recommendations are my synthesis, separate from the cited vendor claims.
12 / SOURCES
Sources and review basis.
Follow the capability or cost claim back to its primary documentation.
Primary vendor documentation, official repositories and standards/testing documentation. Reviewed . Undated pages describe the retrieved state, not a first-release date.
- Figma · MCP overview Official access model and approved-client policy.
- Figma · Write to canvas Native editing, supported clients, seat requirements and current limits.
- Figma · Code to canvas Rendered UI capture, drafts, variables and remote-server requirement.
- Figma · Rate limits and access Read allowances and tool-specific exemptions; not interchangeable with AI credits.
- Figma · Pricing USD plan and seat prices; annual and monthly billing differ.
- Figma · Code Connect Component-to-code mapping; Organization/Enterprise Dev or Full seats.
- Paper · MCP documentation CLI/stdio and local HTTP routes, named clients and import limitations.
- Paper · Pricing Free and Pro call allowances; monthly versus annual editor prices.
- Paper · Product overview HTML/CSS canvas and design workflow.
- Sketch · MCP server Local server, scripting API, clients and installation requirements.
- Sketch · Pricing Annual workspace plans and Mac-only licence.
- Penpot · MCP documentation Remote/local servers, connected plugin and active-page requirements.
- Penpot · Pricing Free core/cloud tier and paid collaboration, enterprise and private-server options.
- Penpot · Design tokens Aliases, token sets, themes and import/export documentation.
- Pencil / pen.dev · AI integration External-agent bridge and structured operations; product naming redirects may change.
- Pencil / pen.dev · Pricing Plans explicitly marked coming soon; agent-day definition and allowances.
- Pencil · .pen format File representation; a file schema is distinct from the application licence.
- OpenPencil · Official repository MIT licence, .fig workflow, MCP/CLI, components and named agent runtimes.
- Lunacy · LLM/MCP integration Inspection, component/variable context and local server; mutation not established here.
- Lunacy · Subscriptions Free editor versus optional graphics, cloud and team entitlements.
- Framer · External agents Official agent bridge, named harnesses, canvas/CMS, branches and preview terms.
- Framer · Pricing Site plans, editor charges and billing basis.
- v0 · MCP server Remote OAuth server; generation, project and code operations.
- v0 · Pricing Free, Plus, Business and credit allowances.
- Vercel · Figma and design systems in v0 Design-system context and reuse in code generation.
- Lovable · Official MCP server External-agent direction, OAuth, named clients and client-ID requirements.
- Lovable · Figma integration Frame/plugin/file context; not a native editable .fig round trip.
- Lovable · Published pricing Official localized page exposes the USD monthly plan cards; Pro $25 and Business $50 with 100 credits.
- Lovable · Credits and usage Shared usage accounting; build complexity and runtime costs differ.
- Google · Stitch MCP codelab Official Antigravity connection and design-to-code workflow.
- Google Labs · Stitch SDK Generation/editing/variants and design exports; API-key and OAuth setup.
- Google · Real-time design in Stitch May 19, 2026 release: streaming iteration and production handoffs.
- Google · Open-sourcing DESIGN.md Portable design rules and rationale; April 21, 2026.
- Anthropic · Claude Design help Current design workflow, outputs and shared Claude usage.
- Anthropic · Design systems in Claude Design Codebase/design-reference context and /design-sync workflow.
- Anthropic · Claude pricing Pro and higher-plan prices; shared usage and billing options.
- OpenDesign · Official repository Open-source studio, external tools and supported coding-agent runtimes.
- OpenDesign · Pricing Hosted Go/Plus standard prices versus introductory and annual offers.
- Anthropic · Claude Code MCP Transports, authentication, tool discovery and project configuration.
- OpenAI · Codex MCP Official local/remote MCP configuration; current documentation redirects retained.
- OpenAI · Codex pricing Included plan access and separately billed API use.
- OpenCode · MCP servers, v2 Current local/remote connections, OAuth and Codemode; match installed version.
- OpenCode · Product overview Open-source terminal/IDE/desktop agent and provider options.
- Pi · Official product documentation Current built-in MCP, Codemode, extensibility and operating model.
- Pi · Release 1.0.4 October 5, 2026 release; version context for the current harness.
- DeepSeek · Harness repository Official dsh runtime, MIT licence and developer-preview status.
- DeepSeek Harness · MCP client stdio/Streamable HTTP and headers; automatic browser OAuth not established by this reference.
- Microsoft · MCP servers in VS Code Agent tools, trust/authentication and workspace configuration.
- GitHub · Copilot plans Individual subscription prices and current GitHub AI Credits model.
- Google Labs · DESIGN.md repository and CLI YAML plus prose; lint, diff, export; alpha status and exit-code semantics.
- Google Labs · DESIGN.md specification Normative token structure and prose sections; not a full component implementation.
- Design Tokens Community Group · Format 2025.10 Typed values and references; Community Group specification, not a W3C Recommendation.
- Style Dictionary · Design tokens Transform a token source into platform-specific outputs.
- Playwright · Visual comparisons Screenshot baselines, assertions and environment-sensitive rendering.
- Storybook · Visual testing Component-state visual review; hosted services have separate terms.
- Storybook · Accessibility testing Automated accessibility checks and their limits.
- Lovable · Design systems React system projects, generated schema, accepted version updates, adherence checks and npm-wrapper plan gate.
- v0 · Design Systems 2.0 Saved system skills, source adapters, reviewed starters and explicit app updates.
- Google · Stitch extension for Gemini CLI Official extension; MCP explicitly described as free of charge, with separate service terms.