RonanCodes/design-studio-local

Design Studio (local)

Claude Design (claude.ai/design) is a hosted canvas that runs design skills server-side and gives you variants + an interactive preview, then exports a handoff bundle to Claude Code. The canvas is the clunky part. The skills underneath are open-source and run locally. This skill is a thin facade that runs those same Anthropic skills on your machine to get the same output — variants + a self-contained bundle.html you open in a browser — and skips the canvas.

It does not reimplement or copy Anthropic's skills. It vendors them, reads their SKILL.md as the spec, and executes them locally. When Anthropic updates a skill, you re-pull and get the update.

design-foundations  →  generate-design-brief  →  [ design-studio-local ]  →  claude-design-to-code / design-system-create  →  frontend-design  →  audit  →  app-polish
 (brand/voice/UX)        (the brief)               (THIS: local variants +        (productionise the chosen variant
                                                     bundle.html preview)            into the real stack)

Anthropic's design skills this facade drives

Pulled from anthropics/skills and anthropics/claude-code (both public):

• frontend-design — aesthetic direction; deliberate visual choices, bans generic fonts/AI-look.
• theme-factory — generate theme/colour variants.
• web-artifacts-builder — build a self-contained bundle.html (React + Tailwind + shadcn, all deps inlined) — the "interactive UI" output.
• brand-guidelines — apply a brand identity consistently.

(ro:frontend-design is a derived copy; this facade prefers Anthropic's upstream versions so you're running what Claude runs.)

When to use

• You want Claude-Design-style output (variants + interactive preview) but find the web canvas clunky / want it local + in-repo.
• After design-foundations (and optionally generate-design-brief): you have a point of view and want to see it as real screens.
• You want the design generation to read your actual repo + design system rather than a detached canvas.

When NOT to use

• You haven't decided the brand/voice/visual language yet → run /ro:design-foundations first (this facade reads its output).
• You already have a finished Claude Design handoff bundle → go straight to /ro:claude-design-to-code.
• You only need the production token module + primitives, no exploration → /ro:design-system-create.

Usage

/ro:design-studio-local                          # detect repo, screen from spec; 3 variants
/ro:design-studio-local --screen "fixture analysis result"   # target screen/feature
/ro:design-studio-local --variants 4             # how many variants (default 3)
/ro:design-studio-local --from docs/design       # design-foundations dir (default)
/ro:design-studio-local --update-skills          # re-pull Anthropic's skills to the latest
/ro:design-studio-local --no-open                # don't open the preview in a browser

Step 1 — Inputs

Resolve the repo + <app>. Read the design point of view: docs/design/** (from /ro:design-foundations) and any generate-design-brief output in the linked wiki. If docs/design/ is absent, stop and tell the user to run /ro:design-foundations first (don't invent a brand). Identify the target screen(s) from --screen or the spec/PRD's primary flows.

Step 2 — Vendor Anthropic's design skills locally

Cache dir: ~/.claude/vendor/anthropic-skills/ (shared across projects). Idempotent:

DEST="$HOME/.claude/vendor/anthropic-skills"
if [ ! -d "$DEST/.git" ]; then
  git clone --depth 1 https://github.com/anthropics/skills "$DEST"
else
  [ -n "$UPDATE" ] && git -C "$DEST" pull --ff-only   # only on --update-skills
fi
# frontend-design currently lives in anthropics/claude-code plugins; pull it too if absent
FD="$HOME/.claude/vendor/anthropic-frontend-design"
[ -d "$FD/.git" ] || git clone --depth 1 https://github.com/anthropics/claude-code "$FD"

Pin the commit you used in the run report so a regen is reproducible. Read the relevant SKILL.md files from the cache (skills/web-artifacts-builder/SKILL.md, skills/theme-factory/SKILL.md, skills/brand-guidelines/SKILL.md, and frontend-design's SKILL.md). Follow their instructions — this skill is the orchestrator, those skills are the method. If GitHub is unreachable, fall back to the user's installed ro:frontend-design + web-artifacts-builder plugin and say so.

Step 3 — Generate variants locally

For the target screen, produce --variants N (default 3) distinct directions, each honouring the design-foundations brand (palette, type, voice) but exploring a different layout/emphasis. For each variant, follow web-artifacts-builder to emit a self-contained bundle.html (React + Tailwind + shadcn, deps inlined) and theme-factory for the colour/theme treatment, with frontend-design governing the aesthetic. Seed real content from the spec (e.g. nutmeg: a real fixture + a populated matching-games table), not lorem ipsum.

Output layout (in-repo, gitignored unless the user commits):

design/studio/<screen-slug>/
  variant-1/bundle.html
  variant-2/bundle.html
  variant-3/bundle.html
  index.html        # side-by-side gallery of the variants (the "interactive UI" Claude Design shows)
  NOTES.md          # what each variant emphasises + the skills/commit used

Generate index.html as a simple gallery that iframes the variants side by side, so the local output mirrors Claude Design's variant view. Open it (open design/studio/<slug>/index.html) unless --no-open.

Step 4 — Iterate

The user reviews in the browser and gives feedback in chat (the local analogue of canvas inline-comments). Regenerate the affected variant(s) in place. Keep NOTES.md current. Optional: accept a COMMENTS.md in the screen dir where the user jots per-variant notes, and read it on regen.

Step 5 — Hand off to production

When the user picks a variant, do NOT ship the bundle.html as the app. Hand the chosen variant to:

• /ro:claude-design-to-code — map its tokens/components into the real repo (this is exactly the handoff that skill expects, just sourced locally instead of from the hosted canvas), or
• /ro:design-system-create — if the variant validates the visual language, codify the tokens + primitives + /styleguide.

Then /ro:frontend-design builds the remaining screens to match, /ro:design-system-audit enforces, /ro:app-polish finishes.

Relationship to the hosted Claude Design

Still reach for claude.ai/design when you specifically want the point-and-click canvas, web-capture of an existing site, or live adjustment knobs. This facade is for when you'd rather stay in the terminal/repo and find the canvas clunky. Output is compatible either way: both end at /ro:claude-design-to-code.

Keeping current

Anthropic iterates these skills. --update-skills re-pulls the cache; the run report names the commit used so a stale result is explainable. If Anthropic relocates a skill (e.g. frontend-design moving repos), update the clone paths in Step 2.

Related

• /ro:design-foundations — the brand/voice/UX docs this facade reads (run first).
• /ro:generate-design-brief — optional brief between foundations and this.
• /ro:claude-design-to-code — productionises the chosen variant (the handoff target).
• /ro:design-system-create — codifies the validated visual language into tokens.
• Alternative tool to evaluate: nexu-io/open-design — a heavier local-first Claude Design clone (desktop app + MCP, Apache-2.0). This facade stays lightweight by driving Anthropic's skills directly instead.

Provenance

• 2026-06-07 — created at Ronan's request: he finds the claude.ai/design web canvas clunky and wanted to run "the design skills Claude uses" locally via a facade. Research confirmed Anthropic's design skills (frontend-design, theme-factory, web-artifacts-builder, brand-guidelines) are open-source and locally runnable; the canvas is the separable, hosted layer. This facade vendors those skills and reproduces the variants + bundle.html preview locally, feeding the existing design pipeline.