# Design-to-Code

> Design-to-code is turning a design — a Figma file, a screenshot, or a generated mockup — into working front-end code, increasingly by an AI agent.

Design-to-code is the practice of turning a design artifact into front-end code. In 2026 an agent does the translation, reading the design through an MCP server, a screenshot, or an exported bundle, and the quality of the result depends on how well your components and tokens are defined.

**Design-to-code is the practice of turning a design artifact — a Figma frame, a screenshot, a whiteboard sketch, or a generated mockup — into working front-end code.** It used to mean a developer reading a spec and rebuilding it by hand. In 2026 it usually means an agent doing the translation, with a person reviewing the diff.

The route matters more than the model. The strongest path is structured: [Figma MCP](/tools/figma-mcp) gives a coding agent the design's variables, components, and layout data, and Code Connect maps Figma components to the real ones in your repository, so the generated code reuses your system. [Figma to code with Claude](/guides/design/figma-to-code-with-claude) walks through that setup. The weaker but always-available path is visual: paste a screenshot and let a vision model infer the structure, which is covered in [screenshot to code with AI](/guides/vision/screenshot-to-code-with-ai). A third route skips the design file entirely, because the tool that generated the design also packages a handoff bundle for a coding agent — see the [Claude Design guide](/guides/design/claude-design-guide).

Whichever route you take, the output is only as good as the system underneath it. Well-defined [design tokens](/glossary/design-tokens) and a small, named component set give the agent something to reuse; a file full of one-off values gives it nothing but pixels to approximate. Design-to-code is best understood as a compiler for a design system, not a replacement for having one.

---

_Source: https://agentscamp.com/glossary/design-to-code — Term on AgentsCamp._