SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsui-blueprint

ui-blueprint

Design & creation

View repository

Updated 11-06 16:22

About this skill

UI Blueprint Builder

Overview

This skill supports systematically extracting a design system from reference UI images through a multi-step workflow: analyze visual patterns → generate design system documentation → create a PRD → produce UI prompts that can be used directly for implementation.

Use Cases

  • The user provides UI screenshots, design mockups, or design reference images
  • Need to extract color schemes, typography, and spacing specifications from existing designs
  • Want to generate design system documentation based on visual examples
  • Build an MVP interface that needs to match a reference style
  • Need to create multiple UI options following unified design principles

Workflow

Step 1: Collect Input Materials

Request from the user:

  • Reference image directory: the folder path containing UI screenshots/design mockups
  • Project idea document: a document describing the product concept and goals
  • Existing PRD(optional): if a PRD already exists, skip Step 3

Step 2: Extract the Design System from Images

Use the Task tool to launch a general-purpose subagent, providing the following:

Prompt templatefrom assets/design-system.md：

  • Analyze the color scheme (primary, secondary, accent, and functional colors)
  • Extract typography (font families, font sizes, font weights, line heights)
  • Identify component styles (buttons, cards, input fields, icons)
  • Record the spacing system
  • Note motion/transition patterns
  • Include dark mode variants (if any)

Attach the reference images tothe subagent's context.

Output: a complete design system Markdown document generated according to the template format

Save to：documents/designs/{图片目录名}_design_system.md

Step 3: Generate the MVP PRD (if not provided)

Use the Task tool to launch a general-purpose subagent, providing the following:

Prompt templatefrom assets/app-overview-generator.md：

  • Replace {项目背景} with the content of the project idea document
  • The template guides completion of: elevator pitch, problem statement, target audience, unique selling points, feature list, UX/UI considerations

Interact with the userto refine and clarify product requirements

Output: a structured PRD Markdown document

Save as a variablefor use in Step 4 (can also be saved to documents/prd/）

Step 4: Combine the Final UI Implementation Prompt

Use assets/vibe-design-template.md to combine the design system and PRD:

Replacement rules:

  • {项目设计指南} → the design system extracted in Step 2
  • {项目MVP PRD} → the PRD from Step 3 or the user-provided PRD file

Output: a complete, ready-to-implement prompt containing:

  • Design aesthetic principles
  • Project-specific color/typography specifications
  • Application Overview and Functional Requirements
  • Implementation Task Description (Multiple UI options, component structure)

Save to：documents/ux-design/{创意文件名}_design_prompt_{时间戳}.md

Step 5: Verify the React environment

Check whether a React project already exists:

find . -name "package.json" -exec grep -l "react" {} \;

If not found, inform the user that initialization is required:

npx create-react-app my-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install lucide-react

Step 6: Implement the UI

Use the final prompt generated in Step 4 to implement the UI in the React project.

This prompt will guide:

  • Create multiple design options (3 for mobile, 2 for web)
  • Organize by component:[方案名称]/pages/[页面名称].jsx
  • Aggregate all options into a showcase page

Template Resource Description

assets/design-system.md

A template for extracting visual design patterns. It includes the following sections:

  • Color scheme (primary, secondary, accent, functional colors, background colors)
  • Typography (font families, font weights, text styles)
  • Component styles (buttons, cards, input fields, icons)
  • Spacing system (4dp-48dp scale)
  • Motion specifications (durations, easing curves)
  • Dark mode variants

Use this template when analyzing reference images to ensure comprehensive coverage of the design system.

assets/app-overview-generator.md

A template for collaborative PRD generation. It guides the completion of the following:

  • Elevator pitch
  • Problem statement and target audience
  • Unique selling points
  • Target platforms
  • Feature list (including user stories)
  • UX/UI considerations for each screen

Aimed at refining requirements through interactive communication with the user.

assets/vibe-design-template.md

A final implementation prompt template that combines the design system and the PRD. It includes:

  • Aesthetic principles (minimalism, whitespace, color theory, typographic hierarchy)
  • Practical requirements (Tailwind CSS, Lucide icons, responsive design)
  • Task specifications (multiple options, component organization approach)

The prompt generated by this template can be used directly for UI implementation without further modification.

Best Practices

Image Analysis

  • Read all images before starting the analysis
  • Look for common patterns across multiple screens
  • Pay attention to both explicit styles (colors, fonts) and implicit principles (spacing, hierarchy)
  • If the reference images include dark mode, be sure to record it

Design System Extraction

  • Proceed systematically: cover all sections of the template
  • Use specific values (hex color values, px dimensions), avoid vague descriptions
  • Where inferable, record the reasoning behind design choices
  • Include various state variants (hover state, disabled state)

PRD Generation

  • Actively engage with the user to clarify ambiguities
  • Proactively suggest features based on understanding of the problem
  • Ensure the MVP scope is practical and feasible
  • Record UX considerations for each screen/interaction scenario

Output File Organization

  • Design system file names should be descriptive (based on the image directory name)
  • Final prompts are timestamped for version tracking
  • All outputs are saved in the documents/ directory for easy reference
  • Retain intermediate outputs for iterative refinement

Usage Example

User provides:

  • reference-images/saas-dashboard/(5 screenshots)
  • ideas/project-management-app.md(Project concept document)

Execution flow:

  1. Read reference-images/saas-dashboard/ 5 images in
  2. Use Task tool → design-system.md template → analyze images
  3. Save to documents/designs/saas-dashboard_design_system.md
  4. Use Task tool → app-overview-generator.md combined with project concept
  5. Refine PRD through interaction with the user
  6. Use vibe-design-template.md to combine design system + PRD
  7. Save to documents/ux-design/project-management-app_design_prompt_20251025_153000.md
  8. Check React environment, notify user if initialization is needed
  9. Implement UI using the final prompt

Additional notes

  • This is ahigh-flexibilityworkflow—adjust steps flexibly according to actual conditions
  • Templates provide a structural framework, but thoughtful analysis is encouraged rather than mechanical filling
  • User interaction during PRD generation is crucial to quality
  • The quality of the final prompt directly affects the UI implementation result
  • Keep all intermediate outputs for subsequent iteration and optimization