Agent skill · design visual · yonatangross
design-import
Scaffolds React components from a Claude Design bundle and stops at files on disk. Use when handed a claude.ai/design URL or bundle. For a full PR with tests and browser checks, use design-ship.
Why this skill is useful
Adds specific scaffolding commands for React components from Claude Design handoff bundles that the AI wouldn't generate on its own.
What it needs
Requires claude-design-orchestrator installed locally. About 6k tokens when loaded. Last updated 2026-08-06. 215 stars on the source repository.
What this skill does
Design Import Turn a Claude Design handoff bundle into scaffolded React components, with provenance and dedup against the existing codebase. Standalone Claude Design closes by 2026-12-14 (CC 2.1.302 adds this notice to /design-sync and /design-login). After that date a claude.ai/design handoff URL may stop resolving. Export the bundle to a local file now and pass the file path, which this skill accepts. When to use After exporting a handoff bundle from claude.ai/design. This skill is the entry point — it does NOT open a PR, run tests, or deploy. For the end-to-end flow (import → tests → PR), use design-ship instead. Pipeline Argument resolution Phase 1 — Parse + validate Delegate to the orchestrator agent. The agent fetches, extracts the tarball, reads the README + chats, parses the HTML prototypes, and produces a normalized payload. Do NOT reimplement parsing here — the agent owns the (real, tarball-based) schema. Phase 2 — Reconcile tokens Read the normalized tokendiff from the agent's payload. Diff field Action --- --- added Append to project's design-tokens.json (or Tailwind config). No prompt — additions are safe. modified Show diff. AskUserQuestion: keep project value, accept bundle value, or open editor. conflicts Block scaffolding. AskUserQuestion to resolve before continuing. Phase 3 — Dedup components The agent already ran component-search per component. Read decisions from the normalized payload: decision Behavior --- --- reuse Log "skipped (existing: <path>)" — do nothing on disk adapt Pipe through ork:design-to-code with --adapt-from <existing-path> context scaffold Pipe through ork:design-to-code with the bundle's tsxscaffold as seed Phase 4 — Scaffold For each component with decision scaffold or adapt, invoke design-to-code. The spawns run in the background at the same time, so each one gets its own worktree (isolation="worktree", #4557): ork agents carry no frontmatter isolation, and without it every component writes into your tree at once. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills yonatangross/design-import