ui-design

Generate design specifications and enforce typography, color, and layout rules for frontend projects.

72|5|Updated Jan 22, 2026

Search Tags:#typography #design #frontend #UI #aesthetic #color-palette

Ready to run

npx skills add https://github.com/TencentCloudBase/skills --skill ui-design-tencentcloudbase

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/TencentCloudBase/skills/tree/main/skills/ui-design
Command: npx skills add https://github.com/TencentCloudBase/skills --skill ui-design-tencentcloudbase

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Professional UI design guidance and a repeatable process to produce production-grade frontend interfaces, reducing guesswork and rework.

Core Features & Use Cases

Design Specification Mandatory: Output a formal Design Specification before coding, including purpose, aesthetics, color, typography, and layout rules.
Aesthetic Direction & Style: Define a unique visual language (no default UI clichés) and apply consistent branding.
Self-Audit & Compliance: Run pre-design audits for color, typography, icons, and layout constraints; ensure asymmetry and break-the-grid.

Quick Start

Start by creating a design specification covering purpose, aesthetics, color palette, typography, and layout strategy, then generate a high-fidelity UI prototype with asymmetric layouts, professional icons, and an implementation-ready style guide.

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 design specification for a frontend web project before coding?▼

Yes, you can enforce UI design specifications for mini-programs and component libraries. The skill automates professional design planning, applying typography, color rules, and layout constraints across web pages and mini-programs to ensure visual consistency.

How do I generate frontend UI prototypes with asymmetric layouts?▼

You generate frontend UI prototypes with asymmetric layouts by running pre-design audits for color, typography, and icons. This approach breaks default grid patterns, applying a unique visual language to produce high-fidelity, implementation-ready style guides.

What is the best way to enforce consistent color palette and typography rules in UI design?▼

The best way to enforce consistent color palette and typography rules is through automated self-audit checks. These audits verify compliance against your formal design specification, ensuring explicit rules are followed and preventing default UI clichés.

Does automated UI design planning work for component libraries and web pages?▼

Yes, automated UI design planning works for component libraries and web pages. It enforces explicit design specifications, aesthetic directions, and layout constraints across planning, prototyping, and implementation workflows to deliver production-grade interfaces.

Why does my frontend interface lack a unique visual language and professional aesthetics?▼

Your frontend interface lacks a unique visual language if no formal design specification is enforced. Defining aesthetic direction, applying asymmetry, and running self-audit checks ensures professional aesthetics and removes default UI clichés.