skills.rest
leon30083
leon30083COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/leon30083/wenjing-aigc --skill ui-designer-leon30083
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
imehrimehr

visual-diff

Compare replica screenshots against references to compute pixel diffs and fidelity scores.

Community
Advanced
nidhalboumaiza-0nidhalboumaiza-0

frontend-design

Convert UI style requirements into frontend code with a tokens-first design system.

Community
Advanced
chicongstchicongst
2

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

Community
Intermediate
frankxaifrankxai
6

design-system-architecture

Implement token hierarchies with semantic, alias tokens for scalable design systems.

Community
Advanced