AI UI/UX architect that converts screenshots to React components, generates Figma-compatible designs, and produces Tailwind CSS code.
Claude-Code-Design-AI is easy to set up with strong trust signals. Check agent compatibility and use-case fit before adding it to your workflow.
npx skills add mikesheehan54/Claude-Code-Design-AIRun the command in your terminal.
Confirm that the skill files were added to your agent workspace.
Check the README requirements before invoking the skill in your agent.
Repository setup guidance
Strong trust signals; still review the README and permissions before production use.
Last commit was about 120 days ago.
76 GitHub stars indicate community interest.
1 open issues signal maintenance load.
MIT license detected.
3 security/trust notes recorded.
Setup difficulty is 2/5.
Generate design system documentation for UI components directly from your AI agent, rendering into Figma or portable .md files.
Argos is an open source visual testing platform that detects unintended UI changes to help teams maintain quality.
Bidirectional MCP bridge that lets AI draw UI directly on Figma canvas and read designs back as structured data.
Extract any website's complete design system with one command.
This tool acts as a design agent that takes visual inputs like screenshots or wireframes and turns them into production-ready frontend code, including React components, Tailwind styles, and SVG icons.
Claude Design is a sophisticated UI/UX framework for Anthropic-based AI applications, bridging advanced reasoning with elegant interface design. It supports screenshot-to-code conversion, Figma component generation, Tailwind CSS generation, prototyping, design systems, wireframe rendering, SVG icon creation, dark mode toggling, responsive layout tools, front-end code export, shadcn/ui integration, vector assets, and branding assistance.
Convert this e-commerce product page screenshot into a responsive React component using Tailwind CSS, with dark mode support.
76
Stars
2
Forks
1
Issues
MIT
License
AI UI/UX architect that converts screenshots to React components, generates Figma-compatible designs, and produces Tailwind CSS code.
Frontend developers, UI/UX designers, Product managers
The setup section provides repository-level starting guidance, not a guarantee of an independently verified installation. Check the official README and release notes.
Generated code should be reviewed for security vulnerabilities before production use Avoid sharing sensitive screenshots or proprietary designs
Similar or complementary options to evaluate include uSpec, Argos, figma-ui-mcp.
Aug 20, 2026