claude-design

Claude Design

Use the claude-design MCP tools when the user asks to work with Claude Design projects, designs, prototypes, imports, or exports.

Connector routing

• When the user explicitly names Claude Design, its plugin, or its MCP, keep the entire request on the claude-design connector. Words such as "open", "retrieve", "read", "download", and "export" describe the intended connector action; they are not instructions to switch to a browser.
• Use browser tooling only when the user explicitly asks for it or when render_preview returns a short-lived serve_url needed for visual QA. Browser inspection supplements the connector and does not replace it.
• If the connector cannot complete a requested operation after inspecting its tools, report that exact limitation before offering another route. Never silently switch surfaces.

Design context routing

Before creating or materially redesigning a deliverable, decide whether design system context applies:

• Use a design system when the user requests one or the project has one bound.
• When extending an existing branded product, inspect the project, linked resources, and available design systems for established context. Ask for context only when it cannot be found.
• When no design system or existing brand context is relevant, skip the reuse workflow below. Do not add design-system ceremony or imply compliance.

Call get_claude_design_prompt before every write. Pass both project_id and design_system_id when using a bound or selected system. For polished product screens, mockups, or prototypes, also call read_design_skill with hifi-design before planning the files. Use frontend-design only when no existing system or brand governs the work.

Native Claude Design handoff

When the user wants Claude inside Claude Design to perform the design work, prefer a supported Claude agent client using the Design MCP over having Codex perform the visual generation itself.

1. Inspect the target project and applicable design context. Prepare a self-contained execution brief with the goal, audience, project ID, relevant files, reuse manifest, constraints, acceptance criteria, and QA expectations.
2. Inspect the available MCP tools for a prompt-submission or agent-run tool. Use one only when its result confirms that Claude accepted the turn. Do not infer this capability from a generic Claude API or an undocumented web route.
3. When no run tool exists, check for Claude Code with command -v claude and claude auth status. Do not start or automate login without the user.
4. When Claude Code is authenticated, create a task-specific temporary MCP configuration that runs this plugin's claude-design.mjs server bridge for the selected local account. Put no credentials in that file. Run the brief non-interactively with claude -p, --mcp-config, and --strict-mcp-config; restrict allowed tools and permissions to the required Claude Design operations. Capture the session result, then independently verify project source and previews through this connector.