skills.rest
shinnytech
shinnytechOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-designer

Extract design systems from UI images and generate implementation-ready UI prompts.

Updated Jan 13, 2026
Search Tags:#design system#product design#ui design#prompt generation#ux/ui#mockup analysis
One-click install
npx skills add https://github.com/shinnytech/caiwenqiang-member-rank --skill ui-designer-shinnytech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/shinnytech/caiwenqiang-member-rank/tree/main/.cursor/skills/ui-designer
Command: npx skills add https://github.com/shinnytech/caiwenqiang-member-rank --skill ui-designer-shinnytech

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill automates the process of extracting design systems from reference UI images and generating implementation-ready UI design prompts, ensuring design consistency and accelerating UI development.

Core Features & Use Cases

  • Design System Extraction: Analyzes UI images to extract color palettes, typography, component styles, and spacing.
  • PRD Generation: Assists in creating a Product Requirements Document (PRD) based on project ideas.
  • UI Prompt Generation: Combines design systems and PRDs into comprehensive prompts for UI implementation.
  • Use Case: Provide screenshots of an existing app and a project idea, and get a detailed design prompt to build a new app with a consistent aesthetic.

Quick Start

Use the ui-designer skill to extract the design system from the images in the 'reference-images/dashboard' directory and generate a UI prompt for the 'new-crm-app' idea.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I extract a design system from a UI mockup?▼

To extract a design system from a UI mockup, the skill analyzes your reference UI screenshots to identify color palettes, typography, component styles, and spacing, generating comprehensive design system documentation.

How do I generate implementation-ready UI prompts from existing app screenshots?▼

You can generate implementation-ready UI prompts by providing existing app screenshots and a project idea. The skill combines the extracted design system with a generated PRD to compose final UI prompts.

Can I build an MVP UI that matches my reference app's aesthetic?▼

Yes, you can build an MVP UI matching a reference aesthetic by supplying UI screenshots. The skill extracts visual patterns and creates implementation prompts to ensure design consistency across your new application.

Does the UI design generation process include creating a Product Requirements Document?▼

Yes, the UI design generation process includes PRD generation. It assists in creating a Product Requirements Document based on your project idea before composing the final UI implementation prompt.

What do I need to provide to generate a consistent UI design prompt?▼

You need to provide reference UI images, such as screenshots in a specific directory, and your project idea. The skill extracts the design system and generates a UI prompt for your specified application concept.

Is React environment setup included when generating UI design prompts?▼

Yes, React environment setup is optionally included. The skill involves composing final UI implementation prompts with optional React environment setup to accelerate your UI development process.

Related Skills

Explore More Design & Creative Skills→
majiayu000majiayu000
258

ui-designer

Extract design systems from reference UI images into implementation-ready prompts.

Community
Intermediate
LuizEduPPLuizEduPP

ui-designer

Extract design systems and implementation-ready UI prompts from reference images.

Community
Advanced
shiro123444shiro123444

design-style-skill

Standardize PPT visuals with radii and spacing tokens across four design styles.

Community
Intermediate
HuuBarHuuBar

ui-designer

Extract design systems from reference UI images into structured documentation.

Community
Advanced