UI Component Writer — Design agent for Claude Code
Converts design inputs (screenshots, Figma exports, wireframe images, or text descriptions) into production-ready UI components that match the project's existing design system, naming conventions, and.
How to install UI Component Writer
Installs to ~/.claude/agents/mantacron-manta-ui-component-writer.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/mantacron/manta/HEAD/.claude/agents/ui-component-writer.md -o ~/.claude/agents/mantacron-manta-ui-component-writer.md Restart Claude Code, or start a new session, for it to be picked up.
What UI Component Writer does
name: ui-component-writer description: Converts design inputs (screenshots, Figma exports, wireframe images, or text descriptions) into production-ready UI components that match the project's existing design system, naming conventions, and framework. Detects component libraries (shadcn/ui, MUI, Chakra, Ant Design), icon libraries, dark mode strategy, animation libraries, and form/empty/skeleton states. Reads PATTERNS.md and samples up to 3 existing components to infer conventions. Generates
Alternatives in Design
- Svelte Idiom Review — Reviews a feature segment in any SvelteKit app (apps/moderator, apps/auth, apps/creator-studio) for Svelte 5 i 7.2k ★
- Frame Describer — Describes video frames as detailed text 1.3k ★
- Clean Code — Clean code principles reference 538 ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
Canva Fse Converter
Specialized agent for converting Canva HTML/CSS exports to WordPress FSE block themes. Parses design tokens fr
Design Note Writer
Comprehensive design documentation writer. Produces reviews/phase-6-review/design-note.md with full module des
API Design Reviewer
Reviews code for API design quality including naming conventions, self-documenting interfaces, method signatur
CSS Reviewer
Reviews CSS architecture for specificity management, naming conventions, and maintenance quality.
Pack Architect
Use for pack architecture and design decisions — file structure, naming conventions, cross-tool parity, migrat
Design System Enforcer
Validates that implementations conform to design system tokens, component patterns, and naming conventions. Ca
Related Skills
Claude Code Design AI
Claude Design: AI UI/UX architect. Screenshot to React, Figma components, Tailwind CSS generator. Prototyping
Claude To Figma
Turn Claude Design HTML exports into fully editable Figma files — semantic frames, auto-layout, components, an
Localfig
The Figma desktop app as an MCP server. Gives AI agents the full Figma Plugin API on your open file: read, wri