ui-analyzer

Name: ui-analyzer
Availability: InStock
Author: staruhub

Analyze UI design screenshots to generate React TypeScript components with Tailwind CSS.

662|124|Updated Oct 31, 2025

Search Tags:#automation #typescript #react #tailwind #design-to-code #ui-analysis

Ready to run

npx skills add https://github.com/staruhub/ClaudeSkills --skill ui-analyzer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-analyzer
Source: https://github.com/staruhub/ClaudeSkills/tree/main/skills/ui-analyzer
Command: npx skills add https://github.com/staruhub/ClaudeSkills --skill ui-analyzer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill translates UI design screenshots into structured React TS + Tailwind code, with layout analysis, component breakdown, design token extraction, and production-ready code generation following best practices.

Core Features & Use Cases

Layout analysis & component extraction: identifies layout, sections, and reusable UI components.
Design tokens & Tailwind mapping: extracts colors, typography, spacing and maps to Tailwind classes.
Production-ready code generation: outputs clean, accessible React components with TypeScript and Tailwind.

Quick Start

Provide a design screenshot or mockup. I will analyze the image and generate the component structure and starter code.

Frequently Asked Questions about ui-analyzer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert UI design screenshots into React components?▼

Upload a design screenshot or mockup to analyze the layout and generate production-ready React components with TypeScript and Tailwind CSS. The Skill extracts component hierarchy, design tokens, and accessibility-friendly markup automatically.

Can I use this with Figma exports and design mockups?▼

Yes, the Skill processes UI design screenshots, mockups, and Figma exports to produce component structures and starter code with design token extraction and Tailwind class mapping.

What does design token extraction do in the component generation?▼

Design token extraction identifies colors, typography, and spacing from your UI design and maps them to Tailwind CSS classes, ensuring consistent styling and maintainable design systems in your generated components.

Does the generated code include TypeScript types and accessibility features?▼

Yes, generated React components include TypeScript typings, accessibility-friendly markup, and Tailwind integration following production best practices and common design patterns.

What layout analysis does this provide for component breakdown?▼

The Skill analyzes your design to identify layout structure, sections, and reusable UI components, producing a scalable component architecture that organizes hierarchies for maintainability.

Can I generate components from multiple design variations at once?▼

Process design screenshots and mockups individually to generate components for each variation. The analysis produces clean, production-ready starter code for each design iteration you provide.