Force Claude to Output Design Tokens as JSON

1. 01

   System prompt

   Token format rules and conventions

2. 02

   User prompt

   Brand guide, screenshot, or description

3. 03

   Assistant prefill

   Open the response with `{` or `[`

4. 04

   Parseable JSON

   No preamble. Pipe straight to a parser.

When to Use

• You are extracting tokens from a brand guide and want them in a script-readable format
• You want Claude to skip the “Here are your tokens:” preamble and return raw JSON
• You are wiring Claude into a build pipeline and need predictable output every time
• You have tried Output as JSON and Claude still wraps things in code fences or commentary

Why prefill works

Every time Claude wraps your tokens in three paragraphs of explanation, you are doing this wrong. Claude is helpful by default. It explains. It hedges. It adds preamble. For most chat work that is fine. For pipelines it is noise.

Prefill is the technique of putting the first character of the response into Claude’s mouth before it generates anything. If you prefill with [, Claude continues a JSON array. If you prefill with {, Claude continues a JSON object. It does not say “Here you go:” first because there is no room. Claude must continue from where you stopped.

This works specifically with the API and the Anthropic Console (using the assistant message slot). It does not work in plain Claude.ai chat.

The Prompt

In the Anthropic Console or API, set up the request like this.

System prompt:

You are a design token specialist. You convert brand guidelines and screenshots into design tokens following the W3C DTCG format.

Output requirements:
- Use the W3C DTCG format with $value and $type.
- Group tokens by category (color, spacing, typography, radius, shadow).
- Use semantic names where possible (color.background.primary, not blue-500).
- Reference primitives where appropriate using {primitive.name} syntax.
- Do not invent values. If a token is not defined in the source, omit it or flag it.

User prompt:

Convert these brand guidelines into design tokens.

[paste brand guidelines, attach screenshot, or describe in plain text]

Assistant prefill (this is the trick):

{

That single open brace is the prefill. Claude will continue from there with valid JSON. No preamble. No code fences.

What you get back

  "color": {
    "primitives": {
      "blue-500":  { "$value": "#3B82F6", "$type": "color" },
      "blue-600":  { "$value": "#2563EB", "$type": "color" },
      "neutral-100": { "$value": "#F5F5F5", "$type": "color" },
      "neutral-900": { "$value": "#171717", "$type": "color" }
    },
    "semantic": {
      "background.primary": { "$value": "#FFFFFF", "$type": "color" },
      "background.brand":   { "$value": "{color.primitives.blue-600}", "$type": "color" },
      "text.primary":       { "$value": "{color.primitives.neutral-900}", "$type": "color" }
    }
  },
  "spacing": {
    "sm": { "$value": "8px",  "$type": "dimension" },
    "md": { "$value": "16px", "$type": "dimension" },
    "lg": { "$value": "24px", "$type": "dimension" }
  }
}

Concatenated with the prefill, that is a complete JSON object. No markdown. No commentary. Pipe it straight to a parser.

Variations

For an array of tokens, prefill with [:

[
  {

To force a specific schema, prefill with the schema’s first key:

{
  "tokens": {

To get back DTCG-style tokens with a top-level group, prefill the group:

{
  "color": {

The pattern: whatever shape you want, prefill the first character or two of that shape. Claude does the rest.

Common gotchas

• Claude.ai does not support prefill. Use the API, the Anthropic Console, or any client that exposes the assistant message slot.
• Trailing whitespace in your prefill matters. { and {\n give slightly different continuations. Test both if you are picky.
• Claude can still emit invalid JSON if the source is messy. Always parse with a try/catch and validate. Prefill is a hint, not a guarantee.
• For very long token sets, hit the max output token limit. Increase max_tokens or chunk the source.

Why I use this

I have a small build script that takes a brand guide PDF, sends it to Claude with this exact pattern, and outputs a tokens.json file ready for Style Dictionary. The script does not parse Claude’s prose. It does not need to. The output starts with { and ends with } and parses every time.

That is the whole point of prefill: shape the output until parsing is boring.

Source

Prefill is documented in the Anthropic API docs but rarely shown applied to design work. The technique was highlighted in the Prompting 101 session by Hannah and Christian from Anthropic’s Applied AI team. They used it to force a <final_verdict> XML tag on insurance claims. The same principle works for any structured output, including JSON tokens.