Claude Code 
OpenDesign How to design interfaces with Claude Code in OpenDesign: CLAUDE.md and the Frontend Design skill as the constraints, one workspace-settings task from brief to reviewed file, and where the Figma round-trip stops.
“Workspace settings that follow
our tokens, not a template.”
THREE WAYS INTO THIS CLAUDE CODE GUIDE
This guide: brief, references, design rules and a reviewed HTML result.
Read this guide SETUPHere is the full path from a clean machine to a Claude Code that can build and verify UI.
Go to setup COMPARISONHow Claude Code differs from Codex, Cursor for design work, and when to choose another workflow.
See the comparisonOne Complete Claude Code Design Task
A single task, shown end to end: the brief and constraints you hand over, the artifact that comes back, and the checks you still run before it is done. The interface below is an illustrative example built for this page, not a recorded Claude Code run.
BriefDesign the workspace settings area for a small SaaS team: general, members, notifications and billing. Use the tokens in CLAUDE.md; nothing hand-tuned. It must work on desktop and on a phone.
data-od-id hooksWrite the brief, select the design system and define the acceptance criteria.
Plans the layout, writes the HTML, CSS and JavaScript and revises it on request.
Provides the design system and skill, renders the preview and stores every version as a file in the project.
Visual hierarchy, spacing on the 8px grid, both breakpoints and every interaction are checked before handoff.
Sub-navigation, form and actions sit on the 8px grid; the sticky save bar never overlaps a field.
Group titles outrank labels; the accent marks the enabled toggles and nothing else.
Sub-navigation becomes a segmented switch; toggles keep a 44px hit area; the save button spans the width.
Tab through every field, flip a toggle, cancel and confirm the unsaved-changes prompt.
Fit
Compatibility
This guide covers Claude Code as connected through the OpenDesign desktop app. Published references checked on 6 September 2026.
Claude Code is Anthropic’s agentic command-line tool: you describe a task in natural language and it reads, writes, and runs code in your project until the task is done. This page is about designing interfaces with Claude Code through OpenDesign, not about Claude Code’s own interface. OpenDesign’s setup notes list the available agents.
Anthropic API key (BYOK) or Claude subscription. Authenticate with your Anthropic API key (BYOK) or Claude subscription — nothing is proxied through us. This page does not promise a quota or price.
Surfaces: terminal CLI, VS Code / Cursor / JetBrains extensions, desktop app, web. Check the download page for desktop builds. The Node.js and pnpm requirements in the source quickstart apply to running from source, not to installing a desktop package. Minimum compatible Claude Code version: not verified here.
Follow the connection instructions shown by your installed version, then run a small task. Confirm that Claude Code handled it and that the artifact opens. A download alone does not establish a working connection.
Start with the desktop app
Download first, complete the Claude Code setup for your installed version, then check a small result. You do not need to build OpenDesign from source to follow this path.
Choose the package for your computer, install it and open the app.
Download OpenDesignFollow the Claude Code instructions in your installed version. Authenticate with your Anthropic API key (BYOK) or Claude subscription — nothing is proxied through us.
anthropics/skills — frontend-design skill# 1. Install Claude Code (native install, recommended)
curl -fsSL https://claude.ai/install.sh | bash
# or: brew install --cask claude-code
# Windows PowerShell: irm https://claude.ai/install.ps1 | iex
# 2. Start it in your project and sign in on first run
cd your-project
claude # sign in with your Claude subscription or API keyFrom the Claude Code setup notes in the published guide; check the vendor documentation for the current command.
Use a small brief so you can judge the whole loop, including one revision.
Build a settings screen with a profile form and a save confirmation. Use my design rules. Check it at desktop and mobile widths.
To run OpenDesign from source, follow the technical quickstart instead.
The Claude Code design workflow
The same settings screen task, followed from brief to verified file. Each step lists what you provide, what Claude Code does, what OpenDesign contributes and what you check.
Plain language, three to six lines. Name the audience, the job of the screen and the platforms.
A design system and a few hard rules. This is what separates on-brand output from a generic look.
Claude Code writes a self-contained HTML file: layout, styles, interactions and stable hooks.
The file renders inside OpenDesign at the widths you asked for. This is where the design is judged.
data-od-id targets for comments and edits.Request changes by pointing at elements in the preview. Every revision is a new file; nothing is overwritten silently.
Resources
Tutorials, documentation and walkthroughs for designing with Claude Code, as listed in the published guide.
The artifact types Claude Code can produce in OpenDesign, one skill per type.
Brand tokens and components to bind before Claude Code generates anything.
Starting points for decks, landing pages and product screens.
Limitations
FAQ
Start with a small task, judge the round trip, then bring the real brief. Choose the option that matches your setup; the page does not detect it.