Ds Component Builder — Design agent for Claude Code
Use to build or fix 1-5 components from the project's Figma file into the UI package.
How to install Ds Component Builder
Installs to ~/.claude/agents/whosz-ds-agent-ds-component-builder.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/whosz/ds-agent/HEAD/agents/ds-component-builder.md -o ~/.claude/agents/whosz-ds-agent-ds-component-builder.md Restart Claude Code, or start a new session, for it to be picked up.
What Ds Component Builder does
name: ds-component-builder description: Use to build or fix 1-5 components from the project's Figma file into the UI package. Trigger on "build from Figma", "restyle ", or when running a batch from docs/inventory.json. Requires the inventory and token package to exist first (run ds-inventory / ds-tokens if missing). Do NOT use for tokens or inventory — those are separate agents. Do NOT use for full pages or templates. tools: Skill, mcp__claude_ai_Figma__get_design_context, mcp__claude
Alternatives in Design
- Shep Storybook Story Creator — Creates ONE Storybook story file colocated with a web UI component under src/presentation/web/components/, cov 247 ★
- Design Builder — Use this agent for building production-ready prototypes and implementations from design specs — assembling com 240 ★
- UI Agent — Use when the user needs UI/UX design decisions, component architecture, layout, typography, color system, or v 118 ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
Ds Inventory
Use ONLY to build or refresh the full component inventory of the project's Figma file into docs/inventory.json
Ds Tokens
Use ONLY to extract design tokens (colors, spacing, radius, typography) from the Figma file's LOCAL variable c
Component Taxonomy Mapper
Maps the component inventory - React/Vue/Svelte components, design patterns, reuse opportunities - to .design/
Shadcn UI Builder
Use when building or modifying user interfaces with shadcn/ui components and blocks: new UI components, design
UI Component Writer
Converts design inputs (screenshots, Figma exports, wireframe images, or text descriptions) into production-re
UI Component Builder
UI component specialist for Radix UI and shadcn/ui patterns. Use PROACTIVELY for creating accessible component
Related Skills
Component Docs
Auto-generate component documentation from Figma — props, variants, usage guidelines, spacing specs, and code
Twin Sparrow Computer Use
Control local Mac apps through Computer Use for Twin Sparrow-focused tasks. Trigger when Twin Sparrow work req
Agentic Architecture Review
A Claude Code skill that reviews and redesigns agentic architectures. Be no more agentic than the problem requ