Semantic design token generator: choose and verify the right output

The exact query covers several incompatible jobs. DesignSystems.One advertises a configurable browser generator spanning color, typography, spacing, density, radius, shadow, and motion. Figma describes agent-assisted token creation and organization on its canvas. Andrew Flett's Claude Code skill starts with an exported color-token file and scaffolds an opinionated component stack. These routes overlap. They don't end at the same artifact or transfer the same decisions.

Don't rank them with one generic score. First decide whether you need broad token generation, assistance inside a design tool, or implementation scaffolding for a particular stack. Then inspect what remains unresolved when that route finishes.

The matrix below reports what the frozen pages advertise. "Unverified" means the captured evidence doesn't establish that capability. It doesn't mean the product lacks it. No cross-tool quality, speed, interoperability, or consumer benchmark was performed.

Use the broad generator when you need to configure several token categories together, inspect its built-in previews and contrast signals, and export a starting artifact. The remaining work is substantial: validate the chosen format, resolve references, transform it for the target stack, identify the emitted artifact, map it into a project, and inspect actual consumers.

Use Figma's route when generation and organization need to happen inside the design environment. That can shorten design-side setup. By itself, though, it doesn't establish which portable artifact is authoritative, how an external build transforms it, or whether a shipped component adopted it.

Use the Claude Code skill when its opinionated stack matches your project and you want instructions for moving an exported color-token file into components and documentation. That specificity is useful, but record the input file, skill revision, generated files, local changes, and unresolved categories. Without that record, the scaffold is difficult to reproduce or audit later.

A useful contract joins the design authority to the generator run without pretending that the generator owns every decision. Complete it before generation where possible. Add artifact identities only after the files exist, and leave observations open until someone inspects the named consumer.

generation_contract:
  record_id: "SG-001"
  status: "planned | generated | validated | accepted | blocked"

  source_authority:
    name: "[approved design or brand source]"
    revision: "[version, commit, or dated approval]"
    owner: "[person or team allowed to approve semantic decisions]"
    scope: "[decisions this source actually governs]"

  generator:
    name: "[product or workflow]"
    version_or_observed_date: "[version, URL capture date, or skill revision]"
    run_identity: "[run ID, export ID, or not supplied]"
    operator: "[person or automation]"
    settings:
      color_space: "[value or not applicable]"
      brand_inputs: "[recorded inputs]"
      typography: "[recorded settings]"
      spacing_and_density: "[recorded settings]"
      radius_shadow_motion: "[recorded settings]"
      other: "[all settings that can change output]"

  required_output:
    layers: ["primitive", "semantic", "component or explicitly omitted"]
    categories: ["color", "typography", "spacing", "other required categories"]
    modes: ["light", "dark", "other required modes"]
    interaction_and_status_roles: "[required roles and states]"
    alias_policy: "[where aliases are required, allowed, or forbidden]"
    target_schemas: ["DTCG 2025.10", "CSS", "Tailwind", "other declared targets"]

  unresolved_decisions:
    - decision: "[missing or disputed semantic choice]"
      state: "unresolved"
      owner: "[decision owner]"
      blocked_outputs_or_consumers: ["[affected target]"]
      due_or_trigger: "[when it must be decided]"

  artifacts:
    - purpose: "[authored, resolved, transformed, or serialized output]"
      path_or_package: "[file path, package identity, or export identity]"
      version_or_digest: "[immutable version or digest when available]"
      producer: "[generator, resolver, or transformer]"
      schema_or_format: "[declared format and version]"

  named_consumers:
    - name: "[project and surface]"
      environment: "[framework, theme, viewport, and relevant versions]"
      mapping_owner: "[person or team]"
      representative_component: "[component, variant, and states]"

  retest_triggers:
    - "source revision changes"
    - "generator or skill changes"
    - "resolver or transformer changes"
    - "artifact identity changes"
    - "project mapping or component contract changes"
    - "supported mode or consumer environment changes"

The contract makes omissions visible. A color-focused input may be acceptable when typography and spacing are governed elsewhere. It isn't acceptable to imply that those categories were generated. Likewise, a component scaffold may be useful without serving as the authority for brand decisions.

The Design Tokens Format Module 2025.10 is a final Design Tokens Community Group report for exchanging tokens between tools. It defines structures such as tokens, groups, types, aliases, and composite values. The report explicitly says it is not a W3C Standard and is not on the W3C Standards Track. Use its conformance and reference rules when the declared source format is DTCG 2025.10, but don't turn document conformance into a claim about an application.

1. 1

   1. Freeze the authored input

   Identify the approved source revision, generator settings, semantic relationships, required modes, alias policy, and unresolved decisions. This is the input authority, not the generated result.

2. 2

   2. Capture the generated document

   Save the generator's direct output without silently correcting it. Record its format, generator identity, run or export identity when available, and a digest or immutable version.

3. 3

   3. Validate the declared format

   Check the document against the schema and rules it claims to follow. For a DTCG 2025.10 artifact, inspect required token properties, groups, types, composite values, and reference syntax under that report.

4. 4

   4. Resolve references

   Run the declared resolver separately. Record missing targets, circular references, incompatible types, and the resolved values. Valid reference syntax doesn't prove successful resolution.

5. 5

   5. Transform for the target

   Apply the named transformer and version to the resolved input. Record mappings, omitted categories, mode handling, name changes, unit conversion, and any local policy added by the transformation.

6. 6

   6. Serialize the output

   Write the target representation, such as CSS, Tailwind configuration, or another declared format. Check that serialization preserved the intended names, values, references or flattened values, modes, and categories.

7. 7

   7. Identify the delivered artifact

   Record the exact file, package, registry item, or export identity consumed by the project. A successful build against an unknown or stale artifact is weak evidence.

8. 8

   8. Verify project mapping

   Confirm that the named project loads that artifact and maps the intended semantic role to the expected framework variable, utility, component property, or theme slot.

9. 9

   9. Inspect component consumption

   Check a representative component, variant, mode, and state. Look for hardcoded values, local overrides, detached components, incorrect aliases, and fallbacks that bypass the intended mapping.

10. 10

    10. Record the rendered observation

    Inspect the declared environment and compare the observed result with the expectation written before the test. Record the first divergent stage and choose accept, revise, or block.

Choose a component that crosses several semantic boundaries. A primary form submission button works well because it can exercise background and foreground roles, focus treatment, disabled behavior, status feedback, typography, spacing, and both color modes. Write the expected behavior before opening the rendered consumer.

The matrix doesn't prescribe universal token values or pass thresholds. It makes the team name the content, role, state, and evidence it will inspect. Add quantitative requirements only when an applicable standard, product contract, or approved internal policy supplies them.

Keep the expectation and observation in one record so nobody mistakes a planned check for a passing result. The example below is deliberately unexecuted. Replace the bracketed fields, run the check, and fill in the observations last.

consumer_acceptance:
  record_id: "SG-001-C1"
  evidence_state: "planned"

  source:
    authority_revision: "[approved source revision]"
    required_role: "[semantic role and mode relationship]"

  generated_document:
    identity: "[file plus digest or immutable version]"
    declared_format: "[format and version]"
    format_validation: "not_run"
    reference_resolution: "not_run"

  transformation:
    tool_and_version: "[transformer]"
    configuration_identity: "[config revision]"
    transformed_artifact: "[file or package identity]"
    serialization_check: "not_run"

  consumer:
    name: "[project / surface]"
    environment: "[framework, browser or renderer, theme, viewport]"
    project_mapping: "[source role -> project variable or property]"
    component: "[component / variant]"
    states: ["default", "hover", "focus", "disabled", "error"]
    test_content: "[representative visible content]"

  expectation:
    resolved_output: "[expected resolved value or reference]"
    mapped_property: "[expected component property]"
    visible_result: "[observable result, without claiming it occurred]"
    protected_surfaces: "[what must remain unchanged]"

  observation:
    observed_output: "unexecuted"
    evidence_location: "not_captured"
    first_divergence: "unknown_until_executed"
    notes: "[fill after inspection]"

  ownership:
    source_decision_owner: "[owner]"
    generator_or_artifact_owner: "[owner]"
    transformation_owner: "[owner]"
    project_mapping_owner: "[owner]"
    component_owner: "[owner]"

  disposition:
    value: "block"
    reason: "Required consumer evidence has not been executed."
    allowed_values: ["accept", "revise", "block"]
    next_action: "Run the declared component matrix and record the first divergence."

Use accept only when the required evidence matches the declared scope. Choose revise when the route is viable but a known layer needs correction and retesting. Use block when required evidence is missing, authority is unresolved, the artifact cannot be identified, or the failure prevents a trustworthy decision.

When the rendered result differs from the expectation, compare the chain in order. If the authored decision is wrong, fix it at the source. If the generated document differs from the approved input, inspect the generator settings or output. When references fail, fix the source reference or resolver path. If the resolved value is correct but the target file differs, inspect transformation and serialization. When the delivered artifact is correct but the component is wrong, inspect project mapping, component consumption, and local overrides.

This order prevents a common failure: changing an approved source token to compensate for a stale package or incorrect component mapping. Correct the earliest layer that diverged. Then regenerate downstream artifacts and rerun the affected consumer record.

Ambient Sage is a bounded public example of a system available for intake. Its public kit page describes a near-white warm-sage canvas, tonal card panels, a sparingly used vivid yellow accent, Plus Jakarta Sans for body and heading roles, JetBrains Mono for technical strings, and semantic light and dark roles. Identity Forge also makes implementation artifacts available for its kits through DTCG, Tailwind, shadcn, and DESIGN.md routes.

Those facts support an intake record: kit identity, available semantic roles and modes, typography roles, spacing context, and candidate delivery formats. They don't show that a particular project imported the correct revision, resolved every reference, preserved both modes, mapped a button correctly, or passed accessibility evaluation.

To use Ambient Sage in this workflow, select one delivery artifact and record its identity. Name one project and one component. Write down the expected role mapping and states. Leave observed output, first divergence, and disposition open until someone has inspected that consumer.

Pick the generator route that can produce or feed the artifact your first named consumer requires. Complete the generation contract, preserve unresolved decisions, and generate the required light and dark modes. Then map one representative component and run the matrix with real content.

Expand only after the acceptance record earns an accept disposition. If it doesn't, correct the first divergent layer instead of regenerating blindly. That single trace will tell you more about implementation readiness than another polished preview.

• Design Token Generator | Create CSS, SCSS, Tailwind & JSON ...: The captured page advertises generation from brand and typography settings, light and dark semantic roles, non-color token categories, interface previews, APCA contrast signals, and twelve export formats.
• AI Design Token Generator Built Into Figma: Figma describes prompting an agent to generate and organize semantic or component-oriented token structures within its design environment.
• A Claude Code skill for scaffolding design systems with semantic ...: The captured skill accepts an exported Tailwind or CSS color-token file and instructs Claude Code to scaffold an opinionated ShadCN, Radix, Lucide, and Tailwind component system.
• Design Tokens Format Module 2025.10: The final Design Tokens Community Group report defines a portable token exchange format, including tokens, groups, types, aliases, and composite values; it explicitly is not a W3C Standard or W3C Standards Track document.
• Ambient Sage Design Kit: The public Ambient Sage page documents a warm-sage visual system, semantic light and dark roles, Plus Jakarta Sans and JetBrains Mono typography roles, and publicly available implementation artifacts.