What frameworks is this skill optimized for?

The workflow is specifically tailored for React projects using Tailwind CSS for styling and Lucide React for iconography.

What outputs does the skill produce?

It generates a design system markdown file, a structured PRD, a final implementation prompt, and functional React component files.

Can it help me if I don't have a PRD yet?

Yes, Step 3 of the workflow includes an interactive PRD generator that helps you define an elevator pitch, features list, and UX considerations based on your project idea.

Does it support dark mode extraction?

Yes, the design system template includes specific sections for identifying and documenting dark mode variants found in your reference images.

How does the UI Designer skill analyze images?

The skill utilizes a general-purpose subagent to scan provided screenshots and mockups, systematically identifying visual patterns such as hex codes, font weights, and spacing scales.

UI Designer & Design System Extractor

Name: UI Designer & Design System Extractor
Author: nguyendinhquocx

bynguyendinhquocx

0•

디자인 도구

Extracts visual design systems from reference images and generates implementation-ready UI components and documentation.

The UI Designer skill bridges the gap between visual inspiration and functional code by automating the analysis of screenshots and mockups. It enables developers to extract structured design systems—including color palettes, typography, and spacing—directly from reference images. The skill facilitates a complete end-to-end workflow: from visual pattern recognition and PRD generation to the creation of high-fidelity implementation prompts for React and Tailwind CSS. It is ideal for developers looking to build consistent MVPs that match specific reference aesthetics without manual design auditing.

주요 기능

01Comprehensive UI implementation prompts optimized for React and Tailwind

02Automated design system documentation in Markdown format

03Interactive PRD generation for rapid MVP scoping

04Environment auditing and setup for modern frontend projects

05Visual pattern analysis of color palettes, typography, and component styles

060 GitHub stars

사용 사례

01Generating functional React components that replicate a specific visual 'vibe'

02Converting reference UI screenshots into a documented, reusable design system

03Rapidly prototyping MVPs with consistent styling across mobile and web variations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nguyendinhquocx/code-ai ui-designer

For use in Claude.ai and ChatGPT

주요 기능

01Comprehensive UI implementation prompts optimized for React and Tailwind

02Automated design system documentation in Markdown format

03Interactive PRD generation for rapid MVP scoping

04Environment auditing and setup for modern frontend projects

05Visual pattern analysis of color palettes, typography, and component styles

060 GitHub stars

사용 사례

01Generating functional React components that replicate a specific visual 'vibe'

02Converting reference UI screenshots into a documented, reusable design system

03Rapidly prototyping MVPs with consistent styling across mobile and web variations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nguyendinhquocx/code-ai ui-designer

For use in Claude.ai and ChatGPT