What happens if I already have a PRD for my project?

The workflow is flexible; you can provide an existing PRD file and the skill will skip the generation step, moving directly to composing the final UI implementation prompt.

Does this skill support dark mode extraction?

Yes, the analysis workflow explicitly looks for and documents dark mode variants and color mappings if they are present in your reference screenshots.

Can I use this for projects that aren't using React?

While the extraction and PRD generation steps are framework-agnostic, the implementation workflow is currently optimized for React and Tailwind CSS environments.

How does the skill extract design systems from images?

The skill uses a subagent to analyze visual patterns in your reference images, identifying hex codes, font hierarchies, spacing scales, and component behaviors based on a standardized template.

UI Design Architect

Name: UI Design Architect
Author: leon30083

byleon30083

•

设计工具

Transforms UI screenshots and reference images into comprehensive design systems and implementation-ready React code prompts.

The UI Design Architect skill bridges the gap between visual inspiration and production-ready code by systematically reverse-engineering UI screenshots. It analyzes color palettes, typography, and layout patterns to document a complete design system, generates structured Product Requirement Documents (PRDs) for MVPs, and composes specialized prompts that guide AI agents in building high-fidelity React components using Tailwind CSS. This skill is ideal for developers and designers who need to maintain visual consistency while rapidly prototyping new interfaces based on existing aesthetic references.

主要功能

012 GitHub stars

02Automated design system extraction from UI screenshots and mockups

03AI-driven generation of Product Requirement Documents (PRDs) from project ideas

04Creation of high-fidelity implementation prompts for React and Tailwind CSS

05Environment validation and setup for modern frontend development stacks

06Standardized documentation for colors, typography, spacing, and component styles

使用场景

01Rapidly prototyping an MVP that matches the specific aesthetic of a reference design

02Documenting a consistent design system based on existing legacy UI or external inspiration

03Generating multiple high-fidelity UI variations and component showcases for React projects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add leon30083/wenjing-aigc ui-designer

For use in Claude.ai and ChatGPT

Download Skill