Transforms UI/UX designs into comprehensive technical specifications and developer-ready implementation guides.
The Frontend Designer skill acts as an AI-powered bridge between visual design and technical implementation. It systematically deconstructs UI mockups, wireframes, and screenshots into structured component architectures using Atomic Design principles. By extracting design tokens—such as color palettes, typography scales, and spacing systems—into machine-readable JSON and generating detailed Markdown documentation, it ensures that developers can build pixel-perfect, accessible, and performant interfaces across any modern frontend stack.
主な機能
01Automated design token extraction for colors, fonts, and spacing
02Comprehensive Markdown implementation specs for developers
030 GitHub stars
04Atomic design analysis and component decomposition
05Generation of machine-readable JSON design schemas
06Cross-framework support including React, Vue, and Tailwind CSS
ユースケース
01Refining existing interfaces for accessibility and responsive consistency
02Scaffolding a new design system from a Figma mockup or screenshot
03Creating detailed component documentation for developer handoffs
