skills.rest
mrpersimmon
mrpersimmonCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Generate frontend UI design specifications for web pages and mini-program interfaces.

Updated Aug 27, 2026
Search Tags:#typography#color palette#design specification#ui design#web mini-program#frontend prototype#layout strategy
One-click install
npx skills add https://github.com/mrpersimmon/xiao-han-studio --skill ui-design-mrpersimmon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/mrpersimmon/xiao-han-studio/tree/main/.agents/skills/cloudbase/references/ui-design
Command: npx skills add https://github.com/mrpersimmon/xiao-han-studio --skill ui-design-mrpersimmon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you turn vague product ideas into a clear, high-quality interface design so developers can implement the correct visual direction. This reduces rework caused by missing layout, typography, spacing, and visual hierarchy decisions.

Core Features & Use Cases

  • Visual Direction & Specifications: Define an aesthetic direction, color palette, typography, and layout strategy before any UI code is written.
  • Prototype-Ready Interface Planning: Produce a design that works as a blueprint for web or mini-program UI implementation.
  • Design Quality Guardrails: Includes concrete checks to avoid generic AI aesthetics and ensure platform-appropriate constraints are respected.

Quick Start

Use the ui-design skill to generate a complete UI design specification for your target page, including purpose, aesthetic direction, color palette, typography, and an explicit layout strategy.

Frequently Asked Questions about ui-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create UI design specifications for a web or mini-program interface?▼

UI design specifications are structured documents that define interface hierarchy, layout, typography, color, and prototype planning for web pages or mini-program interfaces, ensuring developers implement the correct visual direction without missing design decisions.

What is the best way to plan frontend prototype layouts before writing UI code?▼

The best way to plan frontend prototype layouts is to generate a structured UI design specification that enforces explicit layout strategy, typography, and color decisions, serving as a prototype-ready blueprint for web or mini-program implementation.

Can I use this to define typography and color palettes for both web and mini-program platforms?▼

Yes, you can define typography and color palettes for both web and mini-program platforms. The specification process enforces platform-appropriate constraints and compliance checks to ensure the visual direction respects specific interface requirements.

How does a design specification prevent generic AI aesthetics in frontend interfaces?▼

A design specification prevents generic AI aesthetics by applying concrete design quality guardrails and compliance checks during the visual direction process, ensuring explicit layout and typography decisions avoid generic outputs.

Do I need existing UI code to generate a layout strategy for my mini-program?▼

No, you do not need existing UI code to generate a layout strategy. The specification process turns vague product ideas into a clear interface blueprint before any implementation begins, defining the aesthetic direction and visual hierarchy first.

Related Skills

Explore More Design & Creative Skills→
Claude-Code-Community-IrelandClaude-Code-Community-Ireland
10

brainstorming

Guide vague ideas into validated designs and specifications through structured reasoning.

Official
Advanced
yuhle-qugyuhle-qug

ui-ux-pro-max

Search a UI/UX knowledge base for design patterns, palettes, typography, and layout guidelines.

Community
Intermediate
GyananoGyanano
5

arrange

Assess interface layouts and propose consistent spacing scales and hierarchy adjustments.

Community
Advanced
jasonmeansjasonmeans
2

todo-create-figma-mockup

Convert text-based product requirements into Figma mockups.

Community
Intermediate