UI Design to Code
Bridges the gap between design artifacts and implementation by turning screenshots, Figma node data, or hybrid inputs into structured, traceable code generation pipelines. Exposes tools like `ingest_image_source`, `ingest_figma_source`, and `run_codegen_with_auto_review` to create isolated run directories, generate semantic UI IR and cross-platform node data, extract precise bitmap assets from source bboxes, and run visual acceptance gates against reference images. Supports Web, iOS, and Android targets. Built for Codex, Cursor, and Claude workflows where you need more than a single screenshot-to-code prompt: think multi-step decode, planning, target IR generation, and audit trails from generated code back to source pixels. Ships with installation commands that write stable local serve paths and optional daily update jobs.
- tools
- 14
- transport
- STDIO
- last updated
- Jun 26, 2026
Tools
14 toolsPublic tool metadata for what this MCP can expose to an agent.
get_run_modesReturns supported modes, target platforms, trigger examples, and the mode-selection prompt.
Returns supported modes, target platforms, trigger examples, and the mode-selection prompt.
No parameter schema in public metadata yet.
create_design_runCreates the run directory and artifact-run-manifest.json.
Creates the run directory and artifact-run-manifest.json.
No parameter schema in public metadata yet.
ingest_image_sourceRegisters a screenshot or image into the source manifests.
Registers a screenshot or image into the source manifests.
No parameter schema in public metadata yet.
ingest_figma_sourceRegisters Figma MCP node JSON, an optional screenshot, or both.
Registers Figma MCP node JSON, an optional screenshot, or both.
No parameter schema in public metadata yet.
slice_image_assetsCrops bitmap/icon assets from a source image using a layers.manifest.json with source_bbox entries.
Crops bitmap/icon assets from a source image using a layers.manifest.json with source_bbox entries.
No parameter schema in public metadata yet.
build_reference_analysisRegisters model-generated Reference Image Analysis before Vision IR.
Registers model-generated Reference Image Analysis before Vision IR.
No parameter schema in public metadata yet.
build_semantic_irRegisters model-generated Platform-neutral Semantic UI IR.
Registers model-generated Platform-neutral Semantic UI IR.
No parameter schema in public metadata yet.
build_cross_platform_nodesRegisters Cross-platform Node Data.
Registers Cross-platform Node Data.
No parameter schema in public metadata yet.
build_target_irRegisters target-platform layout IR for a selected target.
Registers target-platform layout IR for a selected target.
No parameter schema in public metadata yet.
run_codegenRecords implementation output and validation summary without enforcing visual review.
Records implementation output and validation summary without enforcing visual review.
No parameter schema in public metadata yet.
run_codegen_with_auto_reviewRecords implementation output plus visual review evidence.
Records implementation output plus visual review evidence.
No parameter schema in public metadata yet.
validate_pipelineValidates an existing run by checking required artifacts and traceability links between planning artifacts.
Validates an existing run by checking required artifacts and traceability links between planning artifacts.
No parameter schema in public metadata yet.
audit_image_decodingAudits screenshot/image decoding artifacts for dimensions, bounds, text metrics, media coverage, traceability and navigation slots.
Audits screenshot/image decoding artifacts for dimensions, bounds, text metrics, media coverage, traceability and navigation slots.
No parameter schema in public metadata yet.
cleanup_design_runRuns artifact cleanup in dry-run mode by default.
Runs artifact cleanup in dry-run mode by default.
No parameter schema in public metadata yet.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageReadme
UI Design to Code MCP
MCP server for Codex, Cursor, and Claude Code that turns UI screenshots, source images, Figma MCP node JSON, and Figma-plus-screenshot hybrid input into traceable design-to-code artifacts.
npx -y ui-design-to-code-mcp@latest install --client codex
Use it when you need more than a one-shot screenshot-to-code prompt:
- Decode UI screenshots and Figma data into source manifests, reference analysis, Vision IR, Node Compression IR, and Semantic UI node trees.
- Preserve traceability from generated code plans back to visual primitives, grouped candidates, and source pixels.
- Generate adapter-ready artifacts for Web, iOS, Android, and other UI implementation targets.
- Run audit gates for text overflow, media coverage, navigation structure, visual review evidence, and cleanup.
Links:
Details
- Repository
- github.com/kinglions/ui-design-to-code-mcp
- Categories
- Sales & Marketing, Design & Creative, Automation & Workflows, Data & Analytics
- Package
ui-design-to-code-mcp- Transport
- STDIO
- Registry
- MCP registry, active
Related Sales & Marketing MCP servers
View all
OpenJoblive.alpic.openjobs-3168f222/openjobsFind jobs in your own words and apply on the company website — no detours.0stars
Register Mcpmalkreide/register-mcpZefix commercial register with a company-UID join to amtsblattportal.ch (SHAB + cantonal gazettes)0stars
Mcp Servermatetools/mcp-server35 utility tools for AI agents — mate.tools API. Hash, regex, SEO, random, DNS, SSL, JWT.0stars
Hotmartmcp-dir/hotmart-mcpHotmart digital-products platform, sales (history, summary, commissions), subscriptions (list, cance0starsKiwifymcp-dir/kiwify-mcpKiwify digital-products platform, sales (list, detail), subscriptions (list, cancel), products and a0starsOlist Tiny ERPmcp-dir/olist-mcp# Olist Tiny ERP ERP de e-commerce Olist Tiny (ex-Tiny ERP) com a API REST oficial v3 completa, produtos, estoque, pedidos, notas fiscais (NF-e/NFC-e), contas a0stars