Verified against your design. Uses your tokens. Ships to your framework.
/plugin marketplace add d2c-ai/d2c/plugin install d2c@d2cSource design
Generated · UserCard.tsx
export function UserCard({ user }) { return ( <Card> <Avatar src={user.avatar} /> <Stack> <Heading>{user.name}</Heading> <Text>{user.bio}</Text> </Stack> <Button variant="primary">Follow</Button> </Card> ); }
Scan, build, stitch a flow, audit, guard — each skill reads the same .claude/d2c/design-tokens.json so output stays coherent.
Scan your codebase, extract design tokens, write the contract.
Turn a Figma URL into verified code in your framework and conventions.
Stitch Figma frames into a connected flow — routes, stepper, or hybrid. Walks the loaded path end-to-end with Playwright, pixel-diffs each step, handles auth.
Score adherence to the design system; auto-fix drift.
Always-on enforcement as you edit component files.
A page too large for one pass isn't a dead end. /d2c-build assesses the design and, when it's too large, splits it into sections and dispatches a sub-agent per section — each running the same full build flow in parallel. A component that shows up in more than one section is reconciled and built once, then every section merges into a single page that's pixel-diffed as a whole. Planning, parallelism, reuse, verification — handled.
d2c reads .claude/d2c/design-tokens.json before it writes a line of code. Same contract that drives this page — change a value and the whole surface responds.
--canvas-accent site-wide.--canvas-radius-base--playground-spacing(scoped to preview)One skill, six frameworks. Each reference page is pulled live from the d2c-ai/d2c repo — so the docs can never drift from the skill.
These docs don't describe d2c — they are d2c. Skill reference pages render directly from github.com/d2c-ai/d2c, revalidated hourly. A "View source" pill on every upstream-backed page links to the exact file — so if the docs say it, the plugin does it.