| name | any-to-design |
| description | Route approved URLs, HTML, public Figma JSON, images, PDFs, PSD, AI, EPS, or PS through a configured any-to-design MCP; extract CSS-backed design systems, generate agent-ready artifacts, and bridge editable scenes to or from Figma. Use when users ask to convert a website or design source, reconstruct a design system, create editable Figma layers, compile design tokens or components for web, mobile, dashboards, presentations, PDFs, or documents, or explicitly use hosted code.to.design/anything.to.design APIs. |
| license | MIT |
| compatibility | Requires a separately configured any-to-design MCP server. Local HTML or URL capture requires Chrome or Chromium; optional hosted routes require user-provided API keys, network access, and credit-spend authorization. |
| metadata | {"author":"Eldergenix","version":"1.0.0","tier":"execution","effects":"external-network, credit-spend, local-file-write"} |
any-to-design
Route design-conversion work through a configured any-to-design MCP. Prefer
a self-hosted path when its declared fidelity is sufficient. The upstream
tools are API integrations, not a method for reconstructing DivRIOTS'
conversion algorithms or proprietary payload formats.
Both local scene documents and upstream APIs can return large, mode-dependent
payloads. Route by source type and preserve outputs as files instead of model
context so a successful conversion never loses its artifact or job result.
Required runtime
This catalog entry is a routing and safety contract. It does not bundle the
MCP server, Chromium renderer, loopback Figma plugin, or optional hosted API
adapters. Configure the any-to-design MCP separately and confirm that it
exposes the tools named below. Start every operation with
design_api_status. If that tool is unavailable, report that the runtime is
not configured and stop; do not invent a substitute tool or claim conversion.
The Figma materializer is supplied by the full runtime checkout. Without that
plugin, the agent can still create a local scene or design-system artifact but
must report Figma materialization as unavailable and unverified.
Inputs and authority
Always required:
- source content supplied or named by the user;
- user authority to process that source.
The local HTML route additionally requires Chrome or Chromium. Legacy
AI/EPS/PS requires a capability-probed Ghostscript executable; PDF-compatible
AI does not. An upstream route additionally requires its configured API key
plus authority to transmit the source to a third party and spend credits.
The local URL route deliberately makes external page requests in a fresh
browser profile. Public destinations are allowed by default; localhost and
private destinations require explicit operator opt-in.
A direct request to convert a named source is conversion authority. If the
user is only exploring options, explain the data transfer and documented cost
before making a metered call.
Do not use this skill to reverse engineer proprietary algorithms, bypass
authentication, resell an upstream API, process unapproved confidential data,
or train a model on service output.
Route
| User intent | Tool |
|---|
| Inspect readiness | design_api_status |
| Approved public URL to an owned local scene | design_url_to_scene |
| HTML to an owned local scene with no external requests | design_html_to_scene |
| HTML to DTCG 2025.10 primitives, aliases, components, modes, and CSS evidence | design_extract_system |
| Responsive, theme, state, locale, direction, or DPR system capture | design_capture_matrix |
| Design-system v2 to concrete web, mobile, or document artifacts | design_compile_target |
| Allowlisted FIG replacement JSON, PDF, PSD, AI, EPS, PS, HTML, or image to an owned carrier | design_convert_local |
| Continue a bounded local conversion job | design_get_local_job |
| Public Figma plugin JSON to inline or Tailwind HTML ZIP | design_figma_json_to_html |
| Check code.to.design credits | design_get_balance |
| One HTML document to Figma | design_html_to_figma |
| Responsive pages, flows, or variations | design_html_screens_to_figma |
| Annotated component variants | design_html_components_to_figma |
| Native Figma clipboard to hosted HTML | design_figma_to_html (upstream, metered) |
| File or public URL through hosted anything.to.design | design_convert_file (upstream, metered) |
| Continue an upstream asynchronous job | design_get_job |
Prefer design_url_to_scene for an authorized live public page,
design_html_to_scene for one authored state, design_extract_system for one
reusable system snapshot, and design_capture_matrix when responsive, theme,
contrast, interaction, locale, direction, or DPR differences matter. Follow a
system or matrix artifact with design_compile_target when the user needs
executable target files. Use design_convert_local for approved files and
design_figma_json_to_html after exporting a Figma selection through the
runtime's loopback-only plugin. The fig local input is public JSON_REST_V1
replacement JSON, not a native .fig file. Prefer a hosted tool only when the
user explicitly requires its proprietary carrier or hosted fidelity and
separately authorizes transmission and credit spend.
Procedure
- Call
design_api_status. For a local URL or HTML capture, stop if the
Chromium renderer is unavailable. For legacy AI/EPS/PS, inspect the
reported interpreter. For all local files, stop if the source is outside
configured input roots. For upstream work, also stop if the key is absent.
- Confirm the source is approved. For upstream processing, separately confirm
external transmission and credit spend. Never put an API key in a tool
argument.
- Choose exactly one route from the table. For component conversion, ensure
each component has
data-c2d-cmp-name and data-c2d-cmp-variants.
- For a local route, retain the returned artifact and report its carrier and
diagnostics. When Figma materialization is requested, import scene or
plugin-import JSON through the runtime's
figma-plugin/manifest.json. Keep
visual verification enabled, preserve its heatmap and report JSON, and
treat Figma fidelity as a separate proof lane. Export selected Figma nodes
through that plugin before reverse conversion.
- For an upstream route, call the conversion tool once. Do not retry a
metered call after an unknown transport failure until billing and job state
have been checked.
- If an upstream result is
accepted, retain job_id and call
design_get_job at a restrained cadence until state is done or error.
Jobs are documented as pollable for seven days, so rapid polling is
unnecessary.
- Report the artifact's absolute path, MIME type, size, provider, diagnostics
or documented cost, and proof lane. State that successful rendering does
not by itself prove pixel-perfect Figma output.
For a job reported as done, leave download_when_done=true; the result URL
is short-lived and the tool will preserve it locally.
Output contract
A successful local or synchronous upstream conversion, or a completed job,
returns:
status: completed;
- a private local artifact with absolute
path, file uri, name, MIME type,
and byte count; and
- provider metadata plus route-specific cost, mode, or diagnostics.
Local routes return provider: self-hosted and a private scene,
design-system JSON, public REST projection, plugin-import JSON, HTML, or ZIP
artifact. The canonical owned schemas are any-to-design.scene.v1 and
any-to-design.design-system.v2. A design-system artifact carries DTCG
2025.10 primitives, semantic and component aliases, mode values, provenance,
and confidence-backed component properties. A capture matrix uses
any-to-design.capture-matrix.v1; a compiler result uses
any-to-design.compiled-target.v1 and includes target files, explicit
supported, approximated, and omitted coverage, diagnostics, and token-to-file
provenance. Authorized browser assets use bounded c2d-asset:// manifests and
computed SHA-256 hashes. HTML archives expose tokens.dtcg.json alongside the
owned design-system.json envelope and AGENT-DESIGN.md.
Caller-supplied HTML and file routes report upstream_requests: false. URL
capture reports external_page_requests: true while still reporting
upstream_requests: false: the page loads directly and no proprietary
conversion service is called.
A local asynchronous start returns status: queued and
next_tool: design_get_local_job. An upstream asynchronous start returns
status: accepted and next_tool: design_get_job.
Done means the artifact exists locally and the final response names it, or an
upstream terminal error is reported without an untracked retry.
Checks
From this standalone catalog skill directory, run:
bash scripts/validate.sh
When operating inside the full any-to-design runtime checkout, also run its
implementation gates from that repository root:
npm run check
npm run validate:parity
npm run test:chrome
npm run benchmark:fidelity
In the full runtime, the MCP entry point is src/server.ts; the local renderer
is under src/self-hosted/; upstream routing is under src/clients/; and the
Figma materializer is under figma-plugin/. Those implementation paths are
not included in this standalone catalog entry.
Failure behavior
- Missing MCP runtime: report the missing tool or server configuration and
stop.
- Missing key: report the exact environment variable and stop.
- Missing local Chromium: set
ANY_TO_DESIGN_CHROME_EXECUTABLE or install a
supported Chrome or Chromium build.
- Private or local URL rejected: preserve the public-only default. Set
ANY_TO_DESIGN_ALLOW_PRIVATE_URLS=true only when the operator explicitly
approved that development target.
- Native
.fig or clipboard bytes on a local route: export the selection as
public JSON with the runtime plugin; do not decode the proprietary carrier.
- Missing Ghostscript for legacy AI/EPS/PS: configure
ANY_TO_DESIGN_GHOSTSCRIPT_EXECUTABLE, use a PDF-compatible AI file, or
report that conditional lane as unavailable.
- Local fidelity diagnostic: preserve the scene artifact and name the
unsupported feature; never claim a placeholder is exact.
- CSS fidelity boundary: use the scene PNG reference as visual truth. Qualify
any CSS feature that cannot map losslessly to editable Figma properties.
- Missing Figma corpus results: report the browser-to-Figma gate as
not-evaluated; never promote browser-to-HTML success into a Figma claim.
- Disallowed path or URL: report the boundary; never widen it implicitly.
- HTTP 401, 402, or 429: report authentication, credits, or throttling without
an automatic metered retry.
- Async
error: report the upstream error and its documented refund behavior.
- Unknown response shape: preserve safe response metadata, report contract
drift, and stop for adapter maintenance.