Skip to content
Cloaked Design SystemFor agents

Build with an agent

Give Codex, Claude Code, Grok and Cursor the same decisions a person needs: what to use, how it behaves, and where the contract stops.

Implementation preview
Start with the current source
Read https://design.cloaked.team/data/design-system.json.
Retrieve the current contracts and named stories for the components this task needs.
Report the system version and content digest; do not combine records with different digests.
Identify the target platform and its implementation status before writing code.
Preserve the documented API, semantic tokens, behavior and accessibility requirements.
Return source paths, actual checks and unresolved differences. Do not infer approval or platform parity.
01

Keep the design decision attached

Use the smallest complete contract that answers the task, and verify that every record belongs to the same version.

  1. 01

    Retrieve

    Start with the system index and the bounded component or pattern record. Keep its version and content digest.

  2. 02

    Choose

    Read anatomy, states, accessibility and platform support. Record requirements the existing contract does not cover.

  3. 03

    Implement

    Use the available implementation for your platform. Treat reference-only platforms as explicit adaptation work.

  4. 04

    Validate

    Compile the consumer, exercise its behavior and compare the result with named stories. Report missing checks and differences.

02

Use the transport your agent has

Repository files, HTTPS records and the cloaked-design skill in the Work plugin are ways to retrieve the same current source. The remote design MCP server is retired. Availability depends on the client and its setup.

Codex

Repository files, HTTPS or the cloaked-design skill in the Work plugin

  1. Start with AGENTS.md and /data/design-system.json.
  2. Retrieve only the required component, token and platform records.
  3. Report version, digest, source paths, tests and unresolved differences.

Claude Code

Repository files, HTTPS or the cloaked-design skill in the Work plugin

  1. Read the same canonical package and versioned records.
  2. Use the cloaked-design skill in the Work plugin; use the repository files or HTTPS records otherwise.
  3. Preserve the component API and include actual verification evidence.

Cursor

Repository files, HTTPS or the cloaked-design skill in the Work plugin

  1. Attach the current system index and relevant component records to the task.
  2. Use the repository API and token definitions before generating a replacement.
  3. Review the rendered result and report the exact source version.

Grok

HTTPS or an attached context packet

  1. Provide the system index and selected component JSON or Markdown when direct retrieval is unavailable.
  2. Do not assume this client has a verified MCP integration.
  3. Keep platform limitations and missing facts in the output.
03

Build a focused context packet

JSON carries the contract; Markdown makes the same guidance easy to read. Attach the records when your agent cannot retrieve them directly.

SystemVersion 0.2.0-preview.1 · authority, platforms, components and content digestPatternProtected email · composition and required behavior

Button

JSON contract Markdown guidance Interactive reference

Input

JSON contract Markdown guidance Interactive reference

Field

JSON contract Markdown guidance Interactive reference

Every component Contracts and stories Exact token definitions JSON All named examples Story catalog
Translate tokens with their units and limits.

245 of 256 definitions have portable typed values. 11 require explicit runtime or font-relative translation; native mapping still needs consumer verification.

Typed token contract Light token document Dark token document
04

Ask for current context explicitly

The remote design MCP server is retired. Agents use the cloaked-design skill in the Work plugin, which carries the same CDS 4.5 data. These are the sources it reads.

packages/design-system/catalog.json

Discover the current design-owned scope and its source metadata.

generated/site/data/components/{id}.json

Read one component’s contract before choosing its props and composing behavior. The cloaked-design skill reads the same contracts and tokens from its bundled data.

Browser and accessibility testing

A contract check does not replace browser or accessibility testing. Check the rendered result in both themes.

05

Make the boundaries visible

Implementation, design-contract review and platform parity each need their own evidence.

WEB IMPLEMENTATION

Read the API before using it.

3 curated contracts and 63 source-derived contracts are retrievable, with the local web library and its named stories. Source-derived coverage does not establish approval. Each record identifies its source and review status. Earlier imported approval does not approve the local implementation.

Check platform support
VERIFY THE HANDOFF

Compare the answer across clients.

Use the same task and source digest. Compare component APIs, resolved token values, platform limitations and verification evidence.

Run the agent review task
Implementation preview

This design-owned implementation is ready to try and review. It does not establish product approval. Imported specifications retain their original review status.

Inspect version 0.2.0-preview.1