# C2d

> c2d2c c2d pipeline — the rules and process for exporting anything from code INTO Figma (code-to-design), UI components, state matrices, and design tokens/variables alike, and for keeping the token snapshot and its CI gate honest when tokens change. Use whenever the user wants code state reflected in Figma — "export/write/sync this component (or these tokens) to Figma", "update the Figma variables…

- **Type:** Skill
- **Install:** `agentstack add skill-biasia-c2d2c-c2d`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [BIAsia](https://agentstack.voostack.com/s/biasia)
- **Installs:** 0
- **Category:** [Developer Tools](https://agentstack.voostack.com/c/developer-tools)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [BIAsia](https://github.com/BIAsia)
- **Source:** https://github.com/BIAsia/c2d2c/tree/main/skills/c2d
- **Website:** https://c2d2c-site.vercel.app

## Install

```sh
agentstack add skill-biasia-c2d2c-c2d
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# c2d2c:c2d — code to design, every state

## Pre-flight: verify the token bridge

Before drawing anything, check that the target file actually has the project's synced tokens — rule 2 below binds against them, and binding into a file where they're missing or stale silently produces raw values or wrong colors.

1. Probe the file (`get_variable_defs` or a small `use_figma` query) for the `VAR_COLLECTIONS` collections; spot-check a few variables' values and `$codeSyntax.WEB` entries against `VAR_SNAPSHOT`.
2. Missing → sync them in first: the companion plugin's Pull if the project adopted it, otherwise create the collections via `use_figma` following the snapshot's layout (see the Tokens section).
3. Present but diverged from the snapshot → refresh them the same way before binding, and mention the drift to the user (it usually means someone skipped the snapshot discipline).

Only then start the export; from here on, binding is automatic — every value the code expresses as a token lands bound to its variable, per rule 2.

## Project parameters

Resolve parameters from `C2D2C.md` at the repo root (fallback: `.claude/c2d2c.md`); if absent, offer to bootstrap one from the template at `../../templates/C2D2C.template.md` (plugin root; standalone installs without that file fetch https://raw.githubusercontent.com/BIAsia/c2d2c/main/templates/C2D2C.template.md). This skill uses `EXPORT_FILE` (if the user gives a link, the link wins), `VAR_COLLECTIONS`, `VAR_SNAPSHOT`, `ICON_SOURCE`, `DS_ROUTE`, and for token work `TOKEN_HOME`, `TOKEN_EXPORT`.

## Three hard rules

### 1. Enumerate every state first (code census before drawing)

Before drawing anything, enumerate from source **every piece of information, content, field, and state** the element can show, and put each one on the canvas:

- Every variant axis: tone/size/kind/interactive etc., read from `tv()`/cx branches and type unions, never guessed from screenshots.
- Every data shape: value/empty/fallback (e.g. favicon fails → initial letter → globe icon), truncation/long text, loading, error.
- Every interaction state: rest/hover/focus/selected/disabled, plus hover popovers (tooltips/hover cards).
- The `DS_ROUTE` regression pages are a ready-made state checklist; read them first, then patch gaps from render source.
- Put a small gray annotation next to each state (state name + key class/token) for the designers.

### 2. Bind everything to tokens; no raw styles left behind

- Bind every color, radius, and text style to the already-synced variables and styles in `VAR_COLLECTIONS`; the inventory of record is `VAR_SNAPSHOT`.
- CSS var name → Figma variable name resolves through `$codeSyntax.WEB` (e.g. `var(--primary)` → `Product primary/default`).
- Spread paints with alpha become paint opacity or layer opacity bound to the same variable; never fork a new raw color.
- Values Figma cannot express (color-mix/oklch): bind the closest existing variable; if none exists, use the computed literal and record the derivation in the layer name/annotation. Never leave a silent raw color.
- If Figma already has the component/style (from earlier exports, Core/radius/* etc.), bind or instance it; don't redraw.
- Brand assets (third-party logos, favicon bitmaps) are exempt; placeholders are fine.

### 3. Ask before componentizing

Ask once before exporting: create Figma components (component/variant set) or flat frames? Follow the answer; don't decide unilaterally.

## Known gotchas (use_figma, earned over 4+ export jobs)

- Read the /figma-use skill before calling `use_figma`.
- The code must explicitly `return` a result or you get nothing back.
- resize flips auto-layout to FIXED along the primary axis and collapses it: resize first, then set sizing back to AUTO (do one recursive fix-up pass at the end).
- Wrap grids need a fixed-width container.
- `get_metadata` times out on large frames; prefer `get_design_context` or query in small chunks.
- Switching pages requires `await figma.setCurrentPageAsync(page)`.
- Inter's weight name is "Semi Bold" (with the space).
- Local fonts are invisible to the MCP session: leave a FONT TODO annotation on title layers.
- Split long jobs into multiple small idempotent calls (find-or-create, then mutate) so failures can re-run.
- **Never rely on `figma.currentPage`**: the user switching pages mid-run sends later calls to the wrong page. Re-resolve with `getNodeByIdAsync(targetPageId)` + `setCurrentPageAsync` on every call, and check for strays at the end.
- `setBoundVariableForPaint` discards any preset paint opacity, and variables that carry their own alpha get that alpha converted into paint opacity on bind. Correct order: bind first, then set opacity on the returned paint; for alpha-carrying variables the final opacity = variable alpha × CSS multiplier (e.g. `/80` → 0.05×0.8=0.04), don't overwrite with 0.8.
- Instance root fills snapshot the master's values at creation time: changing master fills later may not flow into existing instances. Fix: copy master.fills back onto the instance, or delete and recreate it.

## Tokens: the same pipeline, different payload

Design tokens are exported state too; the difference is they carry a generated snapshot and a CI gate that keeps the two sides honest.

- **Code is the source of truth.** When tokens change in `TOKEN_HOME` (mind every registration point: CSS variable + theme alias + class ladder), run `TOKEN_EXPORT` to regenerate `VAR_SNAPSHOT`, and commit the CSS change and the snapshot **together**. A red `check:figma-variables` gate means exactly "one side moved without the other" — that is the gate doing its job, not an error to silence. Never hand-edit the snapshot; it is generated output.
- **Getting variables into Figma**: if the project adopted the companion Token Sync plugin (`../../figma-plugin/`, source: https://github.com/BIAsia/c2d2c/tree/main/figma-plugin), designers Pull and everything — including bound foundation posters — updates in place. Without the plugin, create/update the variable collections yourself via `use_figma`, following the same collection/mode/`$codeSyntax.WEB` layout that `VAR_SNAPSHOT` records.
- **Renames start from the code side**: a Figma-side rename arrives as delete + add and orphans every binding.
- **Designer-side edits**: with the plugin adopted, designer pushes arrive as `figma-sync/*` MRs, red by design, with safe literal values already written back into the CSS and everything ambiguous itemized for a human. The engineer-side review flow lives in `../../ADAPTING.md` (Token sync section; standalone: https://github.com/BIAsia/c2d2c/blob/main/ADAPTING.md).

## After exporting

- Self-check with `get_screenshot`: alignment, lost variable bindings (scan for raw colors), clipped text.
- Reply with the Figma node link.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [BIAsia](https://github.com/BIAsia)
- **Source:** [BIAsia/c2d2c](https://github.com/BIAsia/c2d2c)
- **License:** MIT
- **Homepage:** https://c2d2c-site.vercel.app

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-biasia-c2d2c-c2d
- Seller: https://agentstack.voostack.com/s/biasia
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.