Design System — Design agent for Claude Code
Use this agent for creating new UI components, modifying existing components, working with Storybook stories, styling with Tailwind CSS and CVA, and design system architecture decisions.\n\nExamples:\.
How to install Design System
Installs to ~/.claude/agents/wallarm-design-system-design-system.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/wallarm/design-system/HEAD/.claude/agents/design-system.md -o ~/.claude/agents/wallarm-design-system-design-system.md Restart Claude Code, or start a new session, for it to be picked up.
What Design System does
name: design-system description: "Use this agent for creating new UI components, modifying existing components, working with Storybook stories, styling with Tailwind CSS and CVA, and design system architecture decisions.\n\nExamples:\n\n- User: \"Create a new Accordion component\"\n Assistant: \"I'll scaffold the Accordion component with proper structure, types, stories, and exports.\"\n \n\n- User: \"Add a new variant to the Button component\"\n Assistant: \
Alternatives in Design
- HTML CSS — Web standards for semantic markup, maintainable styling, and accessibility 31.9k ★
- Tailwind Agent — Styles Rails ERB views and ViewComponents using Tailwind CSS 4 utility classes and responsive design patterns 652 ★
- Module Debugger — Use this agent to debug module issues — registration failures, route problems, view errors, migration issues 407 ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
Developer Frontend
🔨 Use this agent when building or modifying frontend UI - components, pages, styling (CSS/SCSS/Tailwind or eq
Frontend UI Specialist
Use this agent when working on frontend UI components, styling, or visual elements. This includes creating new
Responsive Accessibility Designer
Use this agent when you need to implement or review responsive design and accessibility features for web inter
Frontend Vue Expert
Use this agent when you need to work on Vue 3 frontend code, TypeScript components, Tailwind CSS styling, or a
Frontend Engineer
Frontend implementation specialist for UI components, React patterns, CSS styling. Use proactively when task i
Sub Agent Designer
PROACTIVELY used when designing UI/UX, implementing Tailwind CSS styling, or building frontend components. MUS
Related Skills
Tailwindcss V4
Get up-to-date Tailwind CSS v4 documentation and help with frontend styling, utilities, and design changes. Us
Matt
Activates Matt, Frontend Engineering Specialist. Implements UI components, design systems, theming, Storybook,
Claude Code Design AI
Claude Design: AI UI/UX architect. Screenshot to React, Figma components, Tailwind CSS generator. Prototyping