skills.rest
study-yang
study-yangCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Generates design specifications and high-fidelity UI prototypes for web and mini program interfaces.

Updated May 14, 2026
Search Tags:#typography#color palette#tailwind css#design specification#prototype#ui design#mini program
One-click install
npx skills add https://github.com/study-yang/Vieb-Coding-- --skill ui-design-study-yang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/study-yang/Vieb-Coding--/tree/main/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F-%E5%BF%AB%E8%AE%B0/.codebuddy/skills/ui-design
Command: npx skills add https://github.com/study-yang/Vieb-Coding-- --skill ui-design-study-yang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It prevents generic, cookie-cutter AI-generated interfaces by enforcing a structured design process that produces a deliberate aesthetic direction, color palette, typography, and layout strategy before any code is written. ## Core Features & Use Cases - Mandatory Design Specification: Outputs purpose statement, aesthetic direction, color palette, typography, and layout strategy before any interface code. - Anti-Generic Aesthetic Rules: Blocks overused fonts (Inter, Roboto, system-ui), forbidden purple/violet gradients, emoji icons, and centered card layouts. - Self-Audit Checklist: Runs color, font, icon, and layout audits on generated code to verify compliance with the declared design direction. - Use Case: When building a WeChat mini program page or web landing page, use this Skill to first define an editorial or brutalist aesthetic with specific hex colors and distinctive fonts, then implement a high-fidelity prototype with Tailwind CSS and FontAwesome icons. ## Quick Start Use the ui-design skill to create a design specification and high-fidelity prototype for a finance tracking mini program home page.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I create a UI design specification before writing code?▼

Output a design specification containing a purpose statement, one aesthetic direction from the provided list, 3-5 hex colors, exact font names, and a layout strategy. This must appear before any JSX, WXML, or CSS is written.

What fonts and colors should I avoid in AI-generated UI design?▼

Avoid Inter, Roboto, Arial, Helvetica, system-ui, and -apple-system fonts, plus purple, violet, indigo, fuchsia, and blue-purple gradients. Choose distinctive fonts like Playfair Display or Space Mono and context-specific palettes instead.

Can I use this design skill for WeChat mini program pages?▼

Yes, the skill covers both web and mini program interface design. After fixing the design specification, it directs you to the miniprogram-development or web-development skill for platform-specific implementation.

Which icon libraries should replace emoji icons in UI prototypes?▼

Use professional icon libraries such as FontAwesome, Heroicons, Material Icons, Feather Icons, or Lucide Icons. Pick one library and apply it consistently across the entire project for visual coherence.

When should I not use a UI design specification workflow?▼

Skip it for backend-only tasks, database design, pure API work, or straight implementation of an already-approved design. It is meant for cases where visual direction, layout, and typography decisions are still open.

What if my project already has a brand design system?▼

Existing brand colors, font tokens, and design systems take priority over the default prohibitions. Document which default rules are overridden and why, while keeping the overall quality bar intact.

Related Skills

Explore More Design & Creative Skills→
X-School-AcademyX-School-Academy
19

dev-swarm-stage-ux

Designs UX including visual design systems, wireframes, user flows, responsive guidelines, and accessibility requirements.

Official
Advanced
mymx2mymx2
4

wechat-miniprogram

Provides WeChat Mini Program development guidance for WXML, WXSS, and cloud integration.

Community
Intermediate
fiftynotaififtynotai
10

ui-design

Generate accessible UI component specifications with WCAG 2.1 AA contrast ratios.

Community
Intermediate
bhianerdbhianerd
1

design-consultation

Generate a complete product design system and write DESIGN.md.

Community
Advanced