skills.rest
LuizEduPP
LuizEduPPCOMMUNITY
Explore all skills by this author โ†’
GitHub

ui-designer

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

Updated Apr 10, 2026
Search Tags:#ui-design#design-system#visual-analysis#prompt-generation#ux-analysis#react-setup
One-click install
npx skills add https://github.com/LuizEduPP/skills --skill ui-designer-luizedupp
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/LuizEduPP/skills/tree/main/ui-designer
Command: npx skills add https://github.com/LuizEduPP/skills --skill ui-designer-luizedupp

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill includes assets (resource) components.

What problem does it solve?

This workflow removes the manual effort of decoding visual references and producing implementation guidance by extracting every design detail and pairing it with structured product requirements so teams can ship consistent UIs faster. It reads reference images, captures palettes, typography, spacing, and components, then combines that insight with product ideas to generate actionable prompts for multi-variation React implementations while confirming the React toolchain is ready.

Core Features & Use Cases

  • Design System Extraction: Use the design-system.md template to document color palettes, typography, component styles, spacing, animations, and dark-mode variants from any set of UI screenshots, producing a reusable design system file.
  • Collaborative PRD Generation: Apply the app-overview-generator.md template to turn project ideas into an elevator pitch, problem statement, USP, feature list, and UX/UI considerations through interactive clarification with the user.
  • Implementation Prompt Composition: Merge the generated design system and PRD using vibe-design-template.md to create detailed, implementation-ready prompts covering aesthetics, Tailwind/Lucide usage, and multiple component variations.
  • React Readiness & Execution Guidance: Search for existing React environments, suggest scaffolding steps if missing, and prepare the final prompt to guide creation of pages/components organized by solution name for web and mobile showcases.

Quick Start

Ask the UI Designer skill to analyze reference-images/saas-dashboard and the project idea file to produce the template-driven design system, MVP PRD, and final implementation prompt for your React work.

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 UI mockups?โ–ผ

To extract a design system from UI mockups, you provide reference UI images to the workflow, which then captures color palettes, typography, spacing, and component styles to produce a reusable design system file.

Can I generate build-ready React prompts from a project idea document?โ–ผ

Yes, you can generate build-ready React prompts from a project idea document by combining extracted visual design details with collaboratively generated PRD features to create actionable implementation guidance.

What is the best way to turn UI screenshots into Tailwind implementation prompts?โ–ผ

The best way to turn UI screenshots into Tailwind implementation prompts is to merge extracted design system details and PRD requirements using a vibe-design template to output detailed React instructions.

Do I need an existing React environment to use UI design extraction prompts?โ–ผ

You do not need an existing React environment to use UI design extraction prompts, as the workflow searches for React setups and suggests scaffolding steps if the toolchain is missing.

How does collaborative PRD generation work for MVP UI builds?โ–ผ

Collaborative PRD generation for MVP UI builds works by applying an app-overview template to interactively clarify project ideas into an elevator pitch, problem statement, USP, and feature list.

Related Skills

Explore More Design & Creative Skillsโ†’
shinnytechshinnytech

ui-designer

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

Official
Advanced
daymadedaymade
1.3k

ui-designer

Extract color palettes, typography, spacing, and component styles from reference UI images.

Community
Advanced
iredrion-imgiredrion-img

wms-component-generator

Create and modify React UI components with Tailwind CSS and Recharts.

Community
Intermediate
FutureAtomsFutureAtoms
1

react-native-2026-figma-to-code

Convert Figma designs into React Native code using Locofy.ai and Builder.io.

Community
Intermediate