Tencent CloudBase UI Design

The Core Challenge in Frontend Interface Design

In modern web and mini-program development, interface design often confronts two primary pain points: first, developers lack clear design direction, often falling into a 'functional enough' mindset, which leads to uniform interfaces that lack brand identity; second, during rapid iterations, visual decisions are often delayed or arbitrary, resulting in a lack of design standards and high maintenance costs for consistency later. This not only harms user experience but also diminishes the professional perception of the product.

How This Skill Addresses the Problem

This skill is a structured frontend UI design guide designed to forcibly integrate professional design workflows into the development process. Its core capability lies in mandating the output of a complete design specification before writing any interface code. This covers the entire chain of decisions from aesthetic direction to specific visual rules.

• Mandatory Pre-Design Specification: It requires explicit output of a design document including Purpose Statement, Aesthetic Direction, Color Palette, Typography, and Layout Strategy before code generation. This eliminates design arbitrariness from direct coding.
• Clear Design Process: It follows a six-step methodology: User Experience Analysis → Product Interface Planning → Aesthetic Direction Determination → High-Fidelity UI Design → Frontend Prototype Implementation → Realism Enhancement. This ensures systematic and comprehensive thinking.
• Explicit Style Guidelines & Prohibition List: The skill details various aesthetic directions (e.g., Brutally Minimal, Retro-Futuristic, Luxury/Refined) and strictly prohibits generic AI aesthetics (e.g., using purple/violet gradients, Inter/Roboto fonts, centered shadow cards, or emoji as icons), forcing designs toward uniqueness and high quality.
• Integrated Implementation Requirements: It mandates the use of Tailwind CSS for styling, requires professional icon libraries such as FontAwesome or Heroicons, and mandates a self-audit of the generated code for color, font, icon, and layout compliance, ensuring the final output aligns with the initial design intent.

Applicable Boundaries and Notes

This skill focuses on decisions regarding interface visual and interaction design, not general-purpose code generation. Use it in the following scenarios:

• Suitable for: Creating web or mini-program interface prototypes; designing the visual style of a frontend component library; determining the overall visual direction and interaction details before development.
• Not suitable for: Pure backend logic, database schema design; simply applying an existing, fixed UI; any coding task not involving visual decisions.

Important Note: The skill includes a brand override mechanism. If a project already has approved brand colors, font tokens, or a design system, you should adhere to these constraints as higher priority and explicitly document which default UI-design rules are being overridden. The skill's purpose is to raise the design baseline, not to replace established brand assets.