Claude Design for any coding agent

Use Claude Design from your favorite coding agents—no Claude Code installation or Anthropic API key required.

curl -fsSL https://github.com/maxritter/open-claude-design/releases/latest/download/install.sh | sh

macOS · Linux · WSL2

Install ·
Capabilities ·
Agents ·
Contribute

⭐ If this makes your favorite coding agents better at design, give it a star.

Claude Design is excellent. Using it alongside your favorite coding agents can still mean switching back and forth: open the visual workspace, export the generated prompt, return to the terminal, restore the context, then repeat after the next visual change.

The design and codebase can also drift apart as each changes independently. A newer component, state, or token can exist on only one side, making the two increasingly difficult to keep synchronized.

Open Claude Design solves both problems. It connects your favorite coding agents and your real codebase directly to Claude Design's visual workspace, so design context stays connected to implementation and changes can move safely in either direction.

To invoke Open Claude Design, mention Claude Design in your request to one of your favorite coding agents. It loads the Claude Design access skill and connects to your design workspace automatically.

Quick start

Prerequisites: macOS, Linux, or WSL2 and a Claude Pro, Max, Team, or Enterprise account. You can install before your coding agent; Claude Code is not required.

[!IMPORTANT]
Free accounts are not currently eligible. Claude Design uses the paid plan's shared usage limits. Enterprise administrators must enable it under Organization settings → Capabilities.

1. Run the one-line installer above. It installs the CLI and shared workflows, connects detected agents, and opens the standalone Claude login when a local browser is available.

2. Mention Claude Design in your request to one of your favorite coding agents. No special command or manual skill selection is needed.

   Create a Claude Design version of this settings flow, using the real components and states from the codebase.

3. View and edit your design in Claude Design. Open it from the Claude Design sidebar in the Claude Desktop app, or use the Claude Design web app.

One workflow, both sides

Design decisions stop living in a separate side conversation. They become part of the same implementation and verification loop as the code.

1. Create from code. Turn real components, tokens, assets, copy, and states into a Claude Design element.
2. Inspect visually. Open the result in Claude Design, compare options, and tweak it directly in the visual UI.
3. Sync both ways. Approved revisions move safely in either direction. If code or design changes afterward, the new diff comes back for review.

Why Claude Design is the design tool to beat

Most AI design tools end at a mockup. Claude Design stays interactive: generate, inspect, compare, comment, edit, and tune visually.

Open Claude Design connects that visual workspace to the real product:

• Codebase grounded. Real components, tokens, assets, copy, and states shape the design.
• Visually controllable. Inspect and adjust the rendered result without prompting every tweak.
• Two-way iteration. Approved designs return to code; newer code returns to Claude Design.

What you can do

• Full Claude Design access. Projects, files, previews, design systems, conversations, comments, members, and sharing.
• Current guidance, lean context. Live authoring context is cached on disk and loaded only when needed.
• Verified remote changes. Writes are rendered, inspected, and read back before synchronization completes.

Works with Impeccable

Impeccable adds refinement workflows, deterministic checks, supporting agents, and edit-time hooks. It remains optional.

[!TIP]
Want the complete engineering system? Pilot Shell is a context and harness engineering system for Claude Code and Codex, built around spec-driven development, TDD, enforced quality, persistent memory, and end-to-end verification. It installs Open Claude Design and the complete Impeccable package as part of that larger system.

Agent compatibility

Every supported agent receives the same automatic workflows and CLI access.

The installer auto-detects installed agents. Use --all-agents only when every available integration is wanted.

Included capabilities

The full Claude Design tool catalog. The latest authenticated audit found these 23 operations. The bridge discovers the catalog dynamically as it evolves.

Remote access is read-only by default; changes require explicit authorization. File writes, copies, deletes, support JavaScript, previews, and authoring plans never run as generic calls — they are only reachable through the guarded push, delete, planned-call, and preview helpers, which keep plan tokens, etag checks, backups, and verification inside one process.

Five automatically invoked Agent Skills:

Maintenance

Open for pull requests

Use the structured forms to report a bug or request a feature. See CONTRIBUTING.md before opening a pull request.

License

Open Claude Design is free and source-available. Personal and internal commercial use are allowed; redistribution, rebranding, competing publication, and hosted resale are restricted. See LICENSE.md.

This independent project is not affiliated with, sponsored by, or endorsed by Anthropic.