ui-designer

Name: ui-designer
Availability: InStock
Author: huubar

Extract design systems from reference UI images into structured documentation.

Updated Apr 21, 2026

Search Tags:#typography #ui-design #design-system #color-palette #image-analysis #design-prompt #component-styles

Ready to run

npx skills add https://github.com/HuuBar/skill-routing-experiment --skill ui-designer-huubar

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/HuuBar/skill-routing-experiment/tree/main/unified_skills/daymade/ui-designer
Command: npx skills add https://github.com/HuuBar/skill-routing-experiment --skill ui-designer-huubar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

Extract design systems from reference UI images to generate cohesive design system documentation and implementation-ready prompts that guide developers and designers.

Core Features & Use Cases

Analyze reference UI screenshots to extract color palettes, typography, spacing, component styles, and design tokens into a reusable design system.
Generate implementation-ready prompts (PRD-like) for MVP UIs that align with reference aesthetics and design principles.
Produce multiple design variations and organize outputs for handoff and collaboration.

Quick Start

Provide reference UI screenshots and a project brief to generate a design system and ready-to-implement UI prompts.

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

Extracting a design system from a UI screenshot involves analyzing the reference image to identify core visual tokens. The system processes the screenshot to output structured color palettes, typography scales, spacing rules, and component styles for design handoff.

Can I generate a PRD-like prompt for an MVP UI from a mockup?▼

You can generate a PRD-like prompt for an MVP UI from a mockup by providing the reference screenshot alongside a project brief. This process yields implementation-ready design documentation that aligns with the reference aesthetics and core design principles.

What is needed to start turning UI references into ready prompts?▼

To turn UI references into ready prompts, you need to provide reference UI screenshots and a project brief. These inputs allow the system to generate a cohesive design system and structured, implementation-ready UI prompts for your MVP.

Does this design system extraction support organizing outputs for handoff?▼

Yes, design system extraction supports organizing outputs for handoff and collaboration. It structures the extracted design tokens and component styles into a design-focused directory structure and exports assets to facilitate developer handoff.

What's the best way to ensure accessibility and consistency when extracting design tokens from images?▼

The best way to ensure accessibility and consistency when extracting design tokens is to prioritize them during the design system generation process. The system structurally analyzes reference images to produce cohesive, accessible component styles and reusable color palettes.

Why does my UI reference need a project brief to generate component styles?▼

A UI reference needs a project brief to generate component styles because the brief provides essential context for the MVP's goals. This ensures the extracted design system and PRD-like prompts align with both the reference aesthetics and your specific project requirements.