skills.rest
majiayu000
majiayu000COMMUNITY
Explore all skills by this author →
GitHub

ui-designer

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

258|26|Updated Dec 9, 2025
Search Tags:#react#tailwind#ui-design#prd#design-system#reference-images#prompt-generation
One-click install
npx skills add https://github.com/majiayu000/spellbook --skill ui-designer-majiayu000
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/majiayu000/spellbook/tree/main/skills/ui-designer
Command: npx skills add https://github.com/majiayu000/spellbook --skill ui-designer-majiayu000

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

Extract design systems from reference UI images and translate them into implementation-ready prompts to accelerate design-to-development workflows.

Core Features & Use Cases

  • Gather inputs (reference images, project brief) and extract color palettes, typography, spacing, and component styles.
  • Generate MVP PRD and design guidelines to ensure consistency across platforms.
  • Produce implementation-ready prompts and assets for React/Tailwind projects.

Quick Start

Provide a set of reference UI images and a project brief; I will extract the design system and produce an implementation-ready UI prompt.

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 screenshot?▼

To generate implementation-ready UI prompts, provide a set of reference UI images and a project brief. The Skill extracts design system tokens and composes a final prompt with PRD generation templates for React and Tailwind projects.

Can I turn design references into React and Tailwind prompts?▼

Yes, you can generate React and Tailwind prompts from UI reference images. The Skill extracts design system rules and composes implementation-ready prompts containing PRD templates and asset guidelines for building web and mobile MVPs.

What is the best way to create a PRD from UI reference images?▼

The best way to create a PRD from UI reference images is to extract the visual design system and map it to PRD generation templates. This Skill analyzes screenshots to produce structured product requirements and design guidelines for MVP consistency.

Does this design system extraction work for both web and mobile MVPs?▼

Yes, this design system extraction supports both web and mobile MVPs. By analyzing provided UI screenshots, it generates unified design guidelines and implementation prompts that ensure visual consistency across different platforms.

What do I need to provide to generate implementation-ready UI prompts?▼

You need to provide reference UI images and a project brief to generate implementation-ready UI prompts. The Skill processes these inputs to extract color palettes, typography, and component styles, producing actionable development guidelines.

Related Skills

Explore More Design & Creative Skills→
htafollahtafolla
5

multimodal-looker

Analyze diagrams, screenshots, and UI mockups to extract information and assess design.

Community
Advanced
ncsound919ncsound919

ui-ux-pro-max

Generate design-system tokens, component specs, and accessibility guidance for web stacks.

Community
Advanced
hasnahasna

shadcn

Integrates reusable UI components into your Tailwind and React projects via the managed screen reader.

Official
Intermediate
dige04dige04

aesthetic

Generate UI design guidelines covering typography, color, layout, and micro-interactions.

Community
Intermediate