◈ Completion Zone

AI-filled design,
constrained to your system.

Describe a component in plain language. Completion Zone generates it using only tokens, variants, and patterns that already exist in your design system — no hallucinated styles, no drift.

🔒 app.originmain.io/canvas — Completion Zone
Constrained generation
MetricsCard — completing…
Weekly Overview Live
Sessions
4,821
↑ 12%
Conversions
9.4%
↑ 2.1%
? metric badge
Goal progress68%
Add a metric badge to the top-right corner
Matching:
MetricBadge
·
color.success
constrained
generation
MetricsCard — completed
Weekly Overview Live
Sessions
4,821
↑ 12%
Conversions
9.4%
↑ 2.1%
Avg. session
3m 42s
↑ 8%
Goal progress68%
✓ MetricBadge variant="success" · color.success.600 · spacing.md
Architecture

From prompt to placed component in four steps.

Completion Zone is not a generic AI. Every generation pass is anchored to the full context of your Origin Graph — so the output is always on-system.

01

Prompt captured

"Add a stats row below the chart" — your plain-language intent is parsed and the target artboard region is identified.

Natural language
02

Graph context injected

Relevant components, design tokens, spacing scales, and color palettes are fetched from your Origin Graph and assembled into the model context.

Origin Graph
03

AI generates

Claude constrains its output strictly to the graph context — only existing variants, only tokens in your scale. No new styles are ever invented.

Constrained output
04

Component placed

The generated component is written into the artboard, the live canvas updates, and the result is emitted as an Intent Diff ready to ship.

Live Artboard
Key differentiator

Not generation —
completion.

Generic AI tools invent. Completion Zone finishes. The difference is the constraint layer: every output token is validated against your existing design system before anything touches the canvas.

  • Zero design drift — the AI only uses tokens that already exist in your system, never creating new ones.
  • Only variants that exist — if your Button has three variants, the AI can only choose from those three.
  • Only spacings from your scale — no magic numbers, no arbitrary pixel values slipping through.
  • Generates real code, not images — the output is a live component on your artboard, not a static screenshot.
Request early access
Generic AI
Output
Arbitrary stylesbackground: #2D3748 · padding: 14px 18px
New tokens introduced--new-color-7: #1a202c
Inconsistent variantsButton size="xl" — not in your system
Magic numbersborder-radius: 7px · margin: 11px
Hallucinated componentsStatsWidget — not in your library
Result: design drift. Manual cleanup required.
◈ Completion Zone
Output
Existing tokens onlycolor.success.600 · spacing.md
Zero new tokensOnly what's already in your Origin Graph
Constrained variantsButton variant="primary" size="md" — verified
Scale-only spacingsAll values drawn from your spacing scale
Verified componentsMetricBadge — confirmed in your library
Result: zero drift. Ships as-is.
Full graph context

The AI knows
your entire system.

Before Claude generates a single character, it receives the complete context of your Origin Graph — every token, every component name, every spacing value. The constraint is baked into the prompt, not tacked on afterward.

  • All design tokens — color palettes, typography scales, spacing systems — injected verbatim into the system prompt.
  • All component names, accepted props, and valid variant combinations from your live component library.
  • The current artboard snapshot — surrounding components inform what fits, stylistically and spatially.
  • Accepted completions feed back into the graph, making every future suggestion smarter over time.
Context assembly — completion_zone.ts
// 1. Fetch full Origin Graph context const graph = await originGraph.getContext({ tokens: true, // all design tokens components: true, // all names + props variants: true, // valid combos only snapshot: artboard.snapshot(), }); // 2. Build constrained system prompt const systemPrompt = buildPrompt({ instruction: "Only use tokens in this list. " + "Never invent new tokens or variants.", tokens: graph.tokens, components: graph.components, artboard: graph.snapshot, }); // 3. Call Claude with full context const result = await claude.complete({ system: systemPrompt, prompt: userIntent, model: "claude-sonnet-4-6", }); // 4. Validate against graph const validated = validateAgainstGraph( result.component, graph ); // 5. Place + record feedback loop if (validated.ok) { artboard.place(validated.component); feedbackLoop.accept(validated); }

Zero design drift

Every token, every spacing value, every color reference is pulled from your existing scale. Nothing new is ever introduced into your system.

Generates real code

The output is a live component placed on your artboard — actual JSX using your real component library, not a static image or an approximation.

Learns from your patterns

Every accepted completion feeds back into the Origin Graph. The more you build, the better Completion Zone understands your conventions.

Respects constraints

Only variants that exist in your library. Only spacings from your defined scale. Hard constraints enforced in the prompt, not soft suggestions.

Technical foundation

Engineered for design systems.

Completion Zone is not a thin wrapper around an LLM. It's a constraint engine built from the ground up for the specific demands of systematic design at scale.

Claude API + context injection

Claude powers generation, but the constraint work happens before and after the API call. The system prompt is fully assembled from your Origin Graph on every request — no stale cached context, no drift over time.

Claude API

Token-constrained generation

A validation layer sits between the LLM output and the canvas. Every proposed token value is checked against your design token registry. Invalid tokens are flagged or substituted with the nearest valid match from your scale.

Constraint layer

Graph context retrieval

The Origin Graph is queried with a relevance function to fetch the most pertinent subset of your component library for each prompt — keeping the context window focused and the generation latency low.

Origin Graph

Component snapshot diffing

Before placing a completion on the canvas, Originmain diffs it against the current artboard state. Only the minimal set of changes is applied, producing a clean Intent Diff entry with zero noise or redundancy.

Intent Diff

Prompt engineering for design systems

The system prompt template communicates your design system's grammar to the model — token naming conventions, component composition patterns, spatial reasoning cues, and variant inheritance rules.

Prompt design

Feedback loop

Accepted completions are written back into the Origin Graph as accepted pattern examples. Over time, these examples shift the model's priors toward your team's specific conventions without any fine-tuning or retraining.

Adaptive
What powers it

Completion Zone runs on the full stack.

Every piece of Originmain contributes to making completions possible — and every completion makes the rest of the platform smarter.

Fill the gaps in your
design system.

Early access is free. Connect your Origin Graph and run your first completion in under two minutes.