Jonathon's AI Wiki

The /design Skill — Claude Design's Canvas Inside Claude Code

5 min read

Source: raw/Anthropic_just_launched_design_for_Claude_Code_it_s_awesome.md

Creator: Jay (Robonuggets) | URL: https://www.youtube.com/watch?v=n96nkLgRfoI | Platform: YouTube

Anthropic shipped an official /design skill for Claude Code that brings Claude Design’s artboard workflow into the terminal and VS Code extension. It produces a shareable, directly-editable canvas artifact — the same click-to-select, properties-panel editing surface Claude Design offers on the web — but generated from Claude Code, which means it inherits your workspace context instead of starting from an empty conversation. That context difference is the entire argument for using it.

Key Takeaways

  • It closes a boundary this wiki previously recorded as fixed. Claude Design states that “the skills are still the system that applies in Claude Code; Claude Design is the visual canvas that applies in claude.ai. Different surfaces, overlapping intent.” The /design skill puts the canvas inside Claude Code, so that separation no longer holds. This is a correction to a recorded claim, not just an addition.
  • The differentiator is memory, not rendering. The demo produced a complete landing page — copy, font choices, dark and light mode, correct business numbers — from one prompt, because Claude Code reads the user’s workspace: design systems, brand books, business details, and their own skills. The same request in Claude Design opened with clarifying questions (“what is Robonuggets? what is the visual direction?”) and then returned default fonts and a default black-and-blue palette with incorrect details, because each Claude Design chat is largely self-contained.
  • You can compose your own skills inside it. The creator invoked a personal /generate skill (wired to AI video and image models on pay-as-you-go) from within a /design run, and it generated a video and placed it as the page background. Claude Design’s skills dropdown exposes only the default skills Anthropic ships and does not allow creating new ones — so custom-skill composition is exclusive to the Claude Code path.
  • The output is a real Claude artifact with sharing and comments. The canvas gets a link, defaults to private, and can be opened to anyone-with-the-link like a Google Doc. Reviewers can leave comments on the canvas; you can also keep chatting in the originating session to apply larger changes.
  • Direct manipulation covers the usual properties. Accent colors, spacing between elements, font scale, and a right-hand sidebar (font family, weight) that the source compares to Figma. Text is editable inline.
  • It can deploy. Asked to push the site to Vercel, Claude Code did it and returned a live URL. The same request inside Claude Design returned an instruction for the user to do it themselves.
  • Not limited to web pages. The source shows a 3D object, email templates, and mobile-app mockups produced through the same skill.

When to use which surface

You want…Use
A design that already knows your brand, numbers, and design system/design in Claude Code
To invoke your own custom skills mid-design/design in Claude Code
To deploy the result without leaving the session/design in Claude Code
A visual canvas with no local setup, from a browser[[claude-ai/claude-design
To hand a design to a repo and build against real components/design-sync (see [[claude-ai/claude-design

The honest summary: Claude Design is the low-setup path, /design is the high-context path. If you have not built up a workspace with a design system and brand memory, the context advantage described here does not exist for you and the two surfaces converge.

Implementation

  • Tool/Service: /design skill, Claude Code (terminal or VS Code extension).
  • Setup: Update Claude Code, then type /design. The source reports it appearing as a built-in skill after update; no separate install step is shown.
  • Cost: Not stated in the source. Claude Code usage applies; artifact hosting is on claude.ai.
  • Integration notes: Output is a Claude artifact with a shareable link and comment threads. Custom skills in your Claude Code context are invokable from inside a /design run. Deployment (e.g. Vercel) runs through Claude Code’s normal tool access, not through the canvas.

Try It

  • Run /design against something you have real context for — a project whose brand book, design system, or numbers already live in your workspace. The one-prompt result is only as good as the memory behind it.
  • Compare the same prompt in both surfaces once. The gap between them is the value of your accumulated context, made visible.
  • Check the share toggle before sending a link. The canvas defaults to private; opening it is a deliberate step.
  • If your workspace has no design system yet, build that first. The feature rewards existing context and does little without it.

Open Questions

  • Which plans and versions include it? The source says “update Claude Code” but names no minimum version, and the release notes captured in W34 and W33 do not mention a /design skill. The shipping vehicle is unconfirmed.
  • Is it the same canvas implementation as Claude Design, or a parallel one? The source treats them as the same artboard workflow but does not establish shared implementation.
  • Does it round-trip with /design-sync? Claude Design gained bidirectional Claude Code sync in June 2026. Whether a /design-created canvas participates in that sync is not addressed.
  • What are the editing limits of the canvas artifact? The source demonstrates colors, spacing, font scale, weight, and text — not layout restructuring, component creation, or responsive breakpoints.
  • Single-source article. Everything here comes from one creator’s walkthrough, including the Claude Design comparison, which was run once. Treat the specific failure of the Claude Design attempt as one observation, not a benchmark.

Graph View

Backlinks