ui-designer

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

2|Updated Dec 28, 2025

Search Tags:#typography #prompts #ui-design #design-system #design-tokens #extract #color-palette

Ready to run

npx skills add https://github.com/leon30083/wenjing-aigc --skill ui-designer-leon30083

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/leon30083/wenjing-aigc/tree/main/.claude/skills/ui-designer
Command: npx skills add https://github.com/leon30083/wenjing-aigc --skill ui-designer-leon30083

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

Design teams often struggle to translate reference UI visuals into a cohesive design system and implementation-ready prompts, causing inconsistency and slower handoffs.

Core Features & Use Cases

Extract design tokens: derive color palettes, typography, spacing, and component styles from UI images.
Generate design-system docs: produce markdown documentation with components, tokens, and usage guidance.
Produce implementation prompts: create ready-to-use prompts that drive UI implementations across web and mobile.

Quick Start

Provide a reference UI image and run the workflow to generate a design-system 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 design tokens from a UI screenshot?▼

You can extract design tokens from a UI screenshot by providing the reference UI image to generate color palettes, typography rules, spacing metrics, and documented component styles.

Can I generate a design system from an existing mockup image?▼

Yes, you can generate a design system from a mockup image by deriving its design primitives and outputting structured markdown documentation containing components, tokens, and usage guidance.

How do I create implementation-ready prompts from UI images?▼

You create implementation-ready prompts by running the reference UI image through an extraction workflow that outputs templated prompts for production-ready UI across web and mobile platforms.

What is the best way to document color palettes and typography from reference UI?▼

The best way to document color palettes and typography from reference UI is generating a design-system markdown file that records extracted design tokens and component styles for team handoffs.

Does the design token extraction support both web and mobile platforms?▼

Yes, the design token extraction supports both web and mobile platforms by generating templated implementation prompts that drive consistent UI production across multiple platform targets.