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
Figma Reader
Discovery agent for Figma files. Extracts variables as tokens, components and variants as an inventory, and pa
Component Taxonomy Mapper
Maps the component inventory - React/Vue/Svelte components, design patterns, reuse opportunities - to .design/
Ads Design Builder
Design pipeline'ının üçüncü aşaması. design-plan.md'deki görevleri sırayla alır ve çıktı tipine göre (Figma ve
Shadcn UI Builder
Use when building or modifying user interfaces with shadcn/ui components and blocks: new UI components, design
Related Skills
Anydesign
Claude skill that analyzes images, websites, and Figma files and generates a structured design.md with token s
Styles To Token Migration
Pipeline for migrating Figma components from hardcoded Paint Styles to semantic Variables — via Component→YAML
Ads Component Library
Mevcut tasarım çıktısından component library oluşturur. components/ klasörü varsa oradan alır, yoksa screens/