Claude Design: AI UI/UX architect. Screenshot to React, Figma components, Tailwind CSS generator. Prototyping agent, design systems, wireframe renderer. SVG icon creator, dark mode toggle, responsive layout tool. Front-end code export, shadcn/ui integration, vector assets, branding assistant.
Claude Code Agent Design Kit
Claude Code Agent Design Kit is an open-source design skill for Claude Code, published by MichelSR25. Its author describes it as: “Top AI-Powered UI/UX Design Generator & Code Assistant 2026”. The project has 0 stars on GitHub and does not declare a license, so check with the author before reuse. Add it to your setup with `/plugin marketplace add MichelSR25/Claude-Code-Agent-Design-Kit`.
Installation
Add Claude Code Agent Design Kit to your agent with:
/plugin marketplace add MichelSR25/Claude-Code-Agent-Design-KitAlways review a skill's source before installing it. This command comes from the skill's public repository; the linked repo is the source of truth for exact setup steps.
When to use it
Reach for Claude Code Agent Design Kit when you want design help from Claude Code without writing the same instructions every session. Load the skill and the agent picks it up automatically for relevant tasks.
Strengths
- Declares compatibility with Claude Code
- Actively maintained (recent commits)
Things to check
- No license declared — confirm terms with the author before reuse
- Limited adoption so far — evaluate before depending on it
Topics
Frequently asked questions
- What does Claude Code Agent Design Kit do?
- Top AI-Powered UI/UX Design Generator & Code Assistant 2026
- How do I install Claude Code Agent Design Kit?
- Run /plugin marketplace add MichelSR25/Claude-Code-Agent-Design-Kit in your agent, then reload your skills. Review the source at https://github.com/MichelSR25/Claude-Code-Agent-Design-Kit before installing.
- Is Claude Code Agent Design Kit free to use?
- Claude Code Agent Design Kit is publicly available on GitHub, but MichelSR25 has not declared a standard open-source license (No license). Confirm the terms with the author before reusing it.
- Which agents does Claude Code Agent Design Kit work with?
- Claude Code Agent Design Kit declares compatibility with Claude Code. Agent Skills use a portable SKILL.md format, so other compatible clients can usually load it too.
Related skills
More Design →
When the user needs to generate, iterate, or scale ad creative for paid advertising. Use when they say 'write ad copy,' 'generate headlines,' 'create ad variations,' 'bulk creative,' 'iterate on ads,' 'ad copy validation,' 'RSA headlines,' 'Meta ad copy,' 'LinkedIn ad,' or 'creative testing.' This is pure creative production — distinct from paid-ads (campaign strategy). Use ad-creative when you need the copy, not the campaign plan.
When the user wants to apply, document, or enforce brand guidelines for any product or company. Also use when the user mentions 'brand guidelines,' 'brand colors,' 'typography,' 'logo usage,' 'brand voice,' 'visual identity,' 'tone of voice,' 'brand standards,' 'style guide,' 'brand consistency,' or 'company design standards.' Covers color systems, typography, logo rules, imagery guidelines, and tone matrix for any brand — including Anthropic's official identity.
Agent skill for Claude Code & Codex: re-render an image under new light, palette or medium with the composition intact. 5 measured recipes, 2 refusals that show you the failed image.
One-liner PPT generation skill for OpenCode/Claude Code/Codex. 40,000+ styles, AI images, fully editable .pptx