skills.rest
xongtao
xongtaoCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Codify frontend UI design directions with mandatory design specifications and prototypes.

Updated Mar 10, 2026
Search Tags:#typography#frontend#prototyping#aesthetic#ui design#design-system#iconography
One-click install
npx skills add https://github.com/xongtao/openclaw-backup --skill ui-design-xongtao
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/xongtao/openclaw-backup/tree/main/skills/cloudbase/references/ui-design
Command: npx skills add https://github.com/xongtao/openclaw-backup --skill ui-design-xongtao

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides professional UI design and frontend interface guidelines to standardize production-grade aesthetics across web pages, mini-program interfaces, prototypes, and UI components, ensuring consistent visual language and actionable design standards.

Core Features & Use Cases

  • Establish a mandatory design specification before coding
  • Define Aesthetic Direction, Color Palette, Typography, and Layout Strategy
  • Enforce asymmetric/creative layouts and professional icon usage for consistent UI design
  • Provide guidelines for frontend prototype implementation and real-world project alignment

Quick Start

Complete the design specification first, then generate a high-fidelity UI prototype aligned with the chosen aesthetic.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I establish a design specification before coding frontend interfaces?▼

To establish a design specification, define the aesthetic direction, color palette, typography, and layout strategy for your frontend interface to ensure consistent visual language before generating a high-fidelity UI prototype ready for development.

What is the best way to create production-grade UI for web and mini-programs?▼

Production-grade UI for web and mini-programs requires enforcing asymmetric layouts, professional icon usage, and strict typography and color constraints to deliver a distinctive frontend aesthetic aligned with real-world development standards.

Can I use this for prototyping mobile and mini-program formats?▼

Yes, you can apply these UI design guidelines to prototyping mobile and mini-program formats, ensuring consistent visual language and actionable design standards across web, mobile, and mini-program interfaces.

How do I enforce professional iconography and typography constraints in UI design?▼

You enforce professional iconography and typography constraints by codifying a distinctive frontend UI design direction that outputs a mandatory design specification, ensuring consistent visual language across all pages and components.

Does UI design require a mandatory design specification output?▼

Yes, UI design requires a mandatory design specification output to standardize production-grade aesthetics across web pages, mini-program interfaces, prototypes, and UI components before generating the final frontend prototype.

Related Skills

Explore More Design & Creative Skills→
EverettFieldEverettField
2

ui-design

Define frontend design specifications with color palettes, typography, and layout strategies.

Community
Advanced
yyds-xyyds-x

ui-design

Generate UI design guidelines and prototypes for web and mini-program interfaces.

Community
Advanced
erichowenserichowens
181

windows-3-1-web-designer

Convert modern web interfaces into Windows 3.1 aesthetics with beveled borders and system-gray palettes.

Community
Advanced
otto-poblyshotto-poblysh

frontend-design

Generate production-grade React/HTML/CSS frontend interfaces with cohesive typography and motion.

Community
Intermediate