How do I install the Design skill?

Run npx skillmds@latest add nicknisi/design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Design?

nicknisi (@nicknisi) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design by nicknisi — Agent Skill

Name: Design
Author: nicknisi

Design

Create and iterate on UI designs, prototypes, decks, and mockups in Claude Design (claude.ai/design) via its official MCP server. Use when the user asks to design something, wants UI mockups or artboard options, says /design, or wants to import a Claude Design project into the codebase.

nicknisi abeaf7d 2.7 KB Updated Sep 17, 2026

File contents

Claude Design

Drive Anthropic's Claude Design through the claude-design MCP server. Designs live in real claude.ai/design projects: rendered previews, shareable links, editable in the web UI.

Prerequisites

The claude-design MCP tools (claude-design_*) must be available. If the server is not connected, connect it (mcp({ connect: "claude-design" })). If connecting fails with an auth error, tell the user to run /design-login and stop.

Workflow

Load Anthropic's design guidance first. Call claude-design_get_claude_design_prompt and follow it — it is the same system prompt the claude.ai/design agent uses (file conventions, artboard structure, quality bar). Consult claude-design_read_design_skill for specific design-quality topics when relevant. Do not improvise your own conventions when theirs conflict.
Pick a project. claude-design_list_projects to reuse an existing project when the user is iterating; otherwise claude-design_create_project. Check claude-design_list_design_systems and apply the user's design system when one exists.
Gather local context. When designing for the current codebase, scan it for design tokens (tailwind config, CSS variables), existing components, and brand assets, and reflect them in the design files.
Write the design. claude-design_finalize_plan with the exact paths, then claude-design_write_files. For multiple directions, produce distinct labeled variations (A/B/C) as separate artboards/files, per the loaded design prompt's conventions.
Show it. claude-design_render_preview and give the user the serve_url (and project URL) to open. Do not describe the design in prose as a substitute for the preview.
Iterate. Apply feedback with further finalize_plan → write_files rounds against the same project. Check claude-design_list_comments for inline comments left in the web UI and claude-design_ack_comments after addressing them.
Implement (optional). When the user picks a direction and wants it built, claude-design_read_file the chosen files and implement them in the codebase using its real components and conventions.

Notes

Auth is lazy; the first tool call may take a moment while the server connects and refreshes the token. A 401 after a long idle session means reconnect; a persistent auth failure means /design-login.
Sharing: claude-design_update_sharing / claude-design_add_member when the user asks to share.

---name: designdescription: Create and iterate on UI designs, prototypes, decks, and mockups in Claude Design (claude.ai/design) via its official MCP server. Use when the user asks to design something, wants UI mockups or artboard options, says /design, or wants to import a Claude Design project into the codebase.---# Claude DesignDrive Anthropic's Claude Design through the `claude-design` MCP server. Designs live in real claude.ai/design projects: rendered previews, shareable links, editable in the web UI.## PrerequisitesThe `claude-design` MCP tools (`claude-design_*`) must be available. If the server is not connected, connect it (`mcp({ connect: "claude-design" })`). If connecting fails with an auth error, tell the user to run `/design-login` and stop.## Workflow1. **Load Anthropic's design guidance first.** Call `claude-design_get_claude_design_prompt` and follow it — it is the same system prompt the claude.ai/design agent uses (file conventions, artboard structure, quality bar). Consult `claude-design_read_design_skill` for specific design-quality topics when relevant. Do not improvise your own conventions when theirs conflict.2. **Pick a project.** `claude-design_list_projects` to reuse an existing project when the user is iterating; otherwise `claude-design_create_project`. Check `claude-design_list_design_systems` and apply the user's design system when one exists.3. **Gather local context.** When designing for the current codebase, scan it for design tokens (tailwind config, CSS variables), existing components, and brand assets, and reflect them in the design files.4. **Write the design.** `claude-design_finalize_plan` with the exact paths, then `claude-design_write_files`. For multiple directions, produce distinct labeled variations (A/B/C) as separate artboards/files, per the loaded design prompt's conventions.5. **Show it.** `claude-design_render_preview` and give the user the `serve_url` (and project URL) to open. Do not describe the design in prose as a substitute for the preview.6. **Iterate.** Apply feedback with further `finalize_plan` → `write_files` rounds against the same project. Check `claude-design_list_comments` for inline comments left in the web UI and `claude-design_ack_comments` after addressing them.7. **Implement (optional).** When the user picks a direction and wants it built, `claude-design_read_file` the chosen files and implement them in the codebase using its real components and conventions.## Notes- Auth is lazy; the first tool call may take a moment while the server connects and refreshes the token. A 401 after a long idle session means reconnect; a persistent auth failure means `/design-login`.- Sharing: `claude-design_update_sharing` / `claude-design_add_member` when the user asks to share.

Frequently asked questions