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 commands for scaffolding React components from Claude Design handoff bundles, which the AI wouldn't reliably 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--487e2f