ui-design

Imported from tencentcloudbase/skills (skills/ui-design/SKILL.md) via skills.sh. Install upstream with npx skills add tencentcloudbase/skills --skill ui-design. Copyright stays with the author (MIT).

Sibling skills (local only)

Sibling CloudBase skills ship beside this skill. Use local relative paths such as ../auth-tool-cloudbase/SKILL.md.

If a referenced sibling skill file is missing from this environment, ask the user to install the full CloudBase plugin (or the missing skill). Do not HTTP-fetch remote skill or protocol markdown into the agent context.

Activation Contract

Use this first when

• The request is to decide visual direction, produce a design specification, create a prototype, or make layout, typography, color, and visual hierarchy choices for an interface.
• The implementation should follow a deliberate aesthetic rather than directly coding an already-approved design.

Read before writing code if

• The response must choose typography, color, spacing, layout strategy, or other visual rules before code exists.
• The user asks for "design", "prototype", "look and feel", or "style" rather than straight implementation.

Then also read

• Web implementation -> ../web-development/SKILL.md
• Mini program implementation -> ../miniprogram-development/SKILL.md

Do NOT use for

• Backend-only tasks, database design, or pure API work without interface output.
• Straight implementation of an already-approved UI without new design decisions.
• Generic frontend coding requests where the visual direction is already settled.

Common mistakes / gotchas

• Writing JSX, WXML, or CSS before outputting the design specification.
• Falling back to generic AI layouts instead of an explicit aesthetic direction.
• Jumping into implementation when the design intent is still unclear.
• Ignoring platform constraints after the visual concept is defined.

Minimal checklist

• Read UI Design Activation Checklist before interface generation.

When to use this skill

Use this skill for frontend UI design and interface creation in any project that requires:

• Creating web pages or interfaces
• Creating mini-program pages or interfaces
• Designing frontend components
• Creating prototypes or interfaces
• Handling styling and visual effects
• Any development task involving user interfaces

Do NOT use for:

• Backend logic or API design
• Database schema design (use postgresql-development-cloudbase skill)
• Pure business logic without UI components

How to use this skill (for a coding agent)

1. MANDATORY: Complete Design Specification First

   • Before writing ANY interface code, you MUST explicitly output the design specification
   • This includes: Purpose Statement, Aesthetic Direction, Color Palette, Typography, Layout Strategy
   • Never skip this step - it's required for quality design

2. Follow the Design Process

   • User Experience Analysis
   • Product Interface Planning
   • Aesthetic Direction Determination
   • High-Fidelity UI Design
   • Frontend Prototype Implementation
   • Realism Enhancement

3. Avoid Generic AI Aesthetics

   • Never use forbidden colors (purple, violet, indigo, fuchsia, blue-purple gradients)
   • Never use forbidden fonts (Inter, Roboto, Arial, Helvetica, system-ui, -apple-system)
   • Never use standard centered layouts on persuade surfaces without creative breaking (centered is correct on Operate and Read surfaces — see the scene judgement below)
   • Never use emoji as icons - always use professional icon libraries (FontAwesome, Heroicons, etc.)

4. Run Self-Audit Before Submitting

   • Color audit (check for forbidden colors)
   • Font audit (check for forbidden fonts)
   • Icon audit (verify no emoji icons, using professional icon libraries)
   • Layout audit (judged by scene, not one-size-fits-all)
   • Measurable checks (contrast, spacing, states, overflow)
   • Design specification compliance check

5. Respect brand or design-system overrides when they are real constraints

   • If the project already has approved brand colors, font tokens, or a design system, treat those as higher-priority constraints
   • Explicitly document which default UI-design prohibitions are being overridden and why
   • Keep the override narrow: preserve the overall quality bar instead of falling back to generic AI styling
   • Qualifies: the project ships a DESIGN.md, a design-token file, or a published brand spec, and you can name the specific token you are honoring
   • Does not qualify: "I like this better," or a value adjusted only to slip past a prohibition

UI Design Rules

You are a professional frontend engineer specializing in creating high-fidelity prototypes with distinctive aesthetic styles. Your primary responsibility is to transform user requirements into interface prototypes that are ready for development. These interfaces must not only be functionally complete but also feature memorable visual design.

Design Thinking

⚠️ MANDATORY PRE-DESIGN CHECKLIST (MUST COMPLETE BEFORE ANY CODE)

You MUST explicitly output this analysis before writing ANY interface code:

DESIGN SPECIFICATION
====================
0. Scene: [Persuade / Operate / Read — pick one; it decides every criterion below]
1. Purpose Statement: [2-3 sentences about problem/users/context]
2. Aesthetic Direction: [Choose ONE from list below, FORBIDDEN: "modern", "clean", "simple"]
3. Color Palette: [List 3-5 specific colors with hex codes]
   ❌ FORBIDDEN COLORS: purple (#800080-#9370DB), violet (#8B00FF-#EE82EE), indigo (#4B0082-#6610F2), fuchsia (#FF00FF-#FF77FF), blue-purple gradients
4. Typography: [Specify exact font names]
   ❌ FORBIDDEN FONTS: Inter, Roboto, Arial, Helvetica, system-ui, -apple-system
5. Layout Strategy: [the scale: breakpoint count, container width, column count, spacing base; on persuade surfaces only, which line breaks and why]
   ❌ FORBIDDEN: a persuade surface in a standard centered layout with no breaking at all; starting any page without breakpoint and spacing scales

Aesthetic Direction Options:

• Brutally minimal
• Maximalist chaos
• Retro-futuristic
• Organic/natural
• Luxury/refined
• Playful/toy-like
• Editorial/magazine
• Brutalist/raw
• Art deco/geometric
• Soft/pastel
• Industrial/utilitarian

Key: Choose a clear conceptual direction and execute it with precision. Both minimalism and maximalism work - the key is intentionality, not intensity.

Context-Aware Recommendations

• Education apps: Editorial/Organic/Retro-futuristic (avoid generic blue)
• Productivity apps: Brutalist/Industrial/Luxury
• Social apps: Playful/Maximalist/Soft
• Finance apps: Luxury/Art deco/Brutally minimal

🚨 TRIGGER WORD DETECTOR

If you find yourself typing these words, STOP immediately and re-read this rule:

• "gradient" + "purple/violet/indigo/fuchsia/blue-purple"
• "card" + "centered" + "shadow"
• "Inter" or "Roboto" or "system-ui"
• "modern" or "clean" or "simple" (without specific style direction)
• Emoji characters (🚀, ⭐, ❤️, etc.) as icons

Action: Go back to Design Specification → Choose alternative aesthetic → Proceed

Design Process

1. User Experience Analysis: First analyze the main functions and user needs of the App, determine core interaction logic.

2. Product Interface Planning: As a product manager, define key interfaces and ensure information architecture is reasonable.

3. Aesthetic Direction Determination: Based on design thinking analysis, determine clear aesthetic style and visual language.

4. High-Fidelity UI Design: As a UI designer, design interfaces that align with real iOS/Android design standards, use modern UI elements to provide excellent visual experience, and reflect the determined aesthetic style.

5. Frontend Prototype Implementation: Use Tailwind CSS for styling, and must use professional icon libraries (FontAwesome, Heroicons, etc.) - never use emoji as icons. Split code files and maintain clear structure.

6. Realism Enhancement:

   • Use real UI images instead of placeholder images (can be selected from Unsplash, Pexels, Apple official UI resources)
   • If video materials are needed, can use Vimeo website for video resources

Downloading Remote Assets (images / icons / fonts)

⚠️ The downloadRemoteFile MCP tool has been removed (high error rate on content-type/SSRF filtering). To download a remote asset into the project, use a shell command instead:

• macOS / Linux: curl -L --fail -o assets/images/logo.png "https://example.com/logo.png" (add --create-dirs if the parent folder doesn't exist; wget works too)
• Windows (PowerShell): Invoke-WebRequest -Uri "https://example.com/logo.png" -OutFile "assets\images\logo.png" (or use curl.exe -L -o assets/images/logo.png <url> in cmd/PowerShell 5.1+, which ships with Windows 10 1803+)

Guidance:

• Always use -L/--location (curl) or -UseBasicParsing (PowerShell) so redirects are followed.
• Prefer HTTPS URLs; avoid private/internal hosts (may be blocked by network policy or rejected for security).
• If the target returns application/octet-stream, that is fine for binaries — the removed tool's strict whitelist was the problem, not the URL.

Frontend Aesthetics Guidelines

Judge the scene before choosing criteria

The same rules fight each other across three kinds of surface. Name the scene first:

• Persuade surfaces want to be remembered; Operate and Read surfaces want to be predictable.
• On the latter two, a novel layout is a defect, not an advantage. Asymmetric grid-breaking on a docs page forces every reader to re-orient on every visit.
• One site can host all three; a single page belongs to exactly one.

Typography

• Avoid Generic Fonts: Do not use overly common fonts like Arial, Inter, Roboto, system fonts
• Choose Distinctive Fonts: Select beautiful, unique, and interesting fonts, for example:
  • Choose distinctive display fonts paired with refined body fonts
  • Consider using distinctive font combinations to elevate the interface's aesthetic level
  • Font selection should align with the overall aesthetic direction

Color & Theme

• Unified Aesthetics: Use CSS variables for consistency
• Dominant Colors with Accents: Using dominant colors with sharp accents is more effective than evenly-distributed color schemes
• Theme Consistency: Choose dark or light themes based on aesthetic direction, ensure color choices match the overall style
• Brand Escape Hatch: If a product already mandates a brand palette or typography system, you may use those tokens, but call out the override explicitly in the design specification

Motion Design

• Animation Strategy: Use animations for effects and micro-interactions
• Technology Choice: Prioritize CSS-only solutions for HTML, React projects can use Motion library
• High-Impact Moments: Focus on high-impact moments. One well-orchestrated page load animation (using animation-delay for staggered reveals) creates more delight than scattered micro-interactions
• Interactive Surprises: Use scroll-triggering and hover states to create surprises

Icons

• ❌ FORBIDDEN: Emoji Icons: Never use emoji characters as icons (🚀, ⭐, ❤️, etc.)
• ✅ REQUIRED: Professional Icon Libraries: Must use professional icon libraries such as:
  • FontAwesome (recommended for most projects)
  • Heroicons (for Tailwind CSS projects)
  • Material Icons
  • Feather Icons
  • Lucide Icons
• Icon Consistency: Use icons from a single library throughout the project for visual consistency
• Icon Styling: Icons should match the overall aesthetic direction and color palette

Grid & Breakpoints

Set the scale before drawing components. The scale is infrastructure, not a per-component decision.

• At most four breakpoints, reused site-wide. Never add a breakpoint because "it got cramped here" — that number carries no meaning outside the head of whoever typed it.
• One container width. Two values coexisting (a custom 1200 plus a framework default 1140) means every style change starts by guessing which one wins.
• Pick structure by scene:
  • Persuade: use a column system. Card counts across sections (8/4/3/2) must land on the same columns and share a common divisor; a bespoke repeat(N, 1fr) per section means there is no grid.
  • Operate / Read: skip the column system. What you need is a container, a 65–75ch body measure, and fixed column proportions. Measure is a hard constraint; a column grid here is over-engineering.
• Spacing comes from a scale: 4-based (4/8/12/16/24/32/64), no one-off values.
• Question an equal-card grid before using it: are these items genuinely equivalent? If some were already named in the copy above, the grid is a framework default rather than a decision.

Spatial Composition

Build the grid before breaking it. Breaking without a scale is just placing things by hand.

• Persuade: asymmetry, overlap, diagonal flow, and grid-breaking elements are available. Breaking needs a reason — which line you break, and why that line should give.
• Operate / Read: do not break. Repetition is not a weakness; it is what lets a reader build muscle memory.
• Negative space: either generous enough to form rhythm, or dense enough to carry information. The worst case is every block taking the same spacing value — even a scale-legal 24px, once everything weighs the same, leaves the reader nowhere to land.

Backgrounds & Visual Details

• Atmosphere Creation: Create atmosphere and depth rather than defaulting to solid colors
• Contextual Effects: Add contextual effects and textures that match the overall aesthetic
• Creative Forms: Apply creative forms, such as:
  • Gradient meshes
  • Noise textures
  • Geometric patterns
  • Layered transparencies
  • Dramatic shadows
  • Decorative borders
  • Custom cursors
  • Grain overlays

Avoid Generic AI Aesthetics

Strictly Prohibit the following generic AI-generated aesthetics:

• Overused font families (Inter, Roboto, Arial, system fonts)
• Cliched color schemes (particularly purple gradients on white backgrounds)
• Predictable layouts and component patterns on persuade surfaces (on Operate and Read surfaces they are the correct answer)
• Cookie-cutter design that lacks context-specific character
• Emoji icons: Never use emoji characters (🚀, ⭐, ❤️, etc.) as icons - always use professional icon libraries

❌ ANTI-PATTERNS (Code Examples to NEVER Use)

// ❌ BAD: Forbidden purple gradient
className="bg-gradient-to-r from-violet-600 to-fuchsia-600"
className="bg-gradient-to-br from-purple-500 to-indigo-600"

// ✅ GOOD: Context-specific alternatives
className="bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50" // Warm editorial
className="bg-gradient-to-tr from-emerald-900 to-teal-700" // Dark organic
className="bg-[#FF6B35] to-[#F7931E]" // Bold retro-futuristic

// ❌ BAD on persuade surfaces: Generic centered card layout
// (on Operate and Read surfaces the centered version is correct — the defect there
//  is an undesigned page, not the centering)
<div className="flex items-center justify-center min-h-screen">
  <div className="bg-white rounded-lg shadow-lg p-8">

// ✅ GOOD on persuade surfaces: Asymmetric layout with creative positioning
<div className="grid grid-cols-12 min-h-screen">
  <div className="col-span-7 col-start-2 pt-24">

// ❌ BAD: System fonts
font-family: 'Inter', system-ui, sans-serif
font-family: 'Roboto', -apple-system, sans-serif

// ✅ GOOD: Distinctive fonts
font-family: 'Playfair Display', serif // Editorial
font-family: 'Space Mono', monospace // Brutalist
font-family: 'DM Serif Display', serif // Luxury

// ❌ BAD: Emoji icons
<span>🚀</span>
<button>⭐ Favorite</button>

// ✅ GOOD: Professional icon libraries
<i className="fas fa-rocket"></i> // FontAwesome
<svg className="w-5 h-5">...</svg> // Heroicons

Creative Implementation Principles

• Creative Interpretation: Interpret requirements creatively, make unexpected choices, make designs feel genuinely designed for the context
• Avoid Repetition: Each design should be different, vary between generations:
  • Light and dark themes
  • Different fonts
  • Different aesthetic styles
• Avoid Convergence: Never converge on common choices (e.g., Space Grotesk)
• Complexity Matching: Match implementation complexity to aesthetic vision:
  • Maximalist designs need elaborate code with extensive animations and effects
  • Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details
  • Elegance comes from executing the vision well

Design Constraints

If not specifically required, provide at most 4 pages. Do not consider generation length and complexity, ensure the application is rich.

Implementation Requirements

All interface prototypes must:

• Production-Grade Quality: Functionally complete and ready for development
• Visual Impact: Visually striking and memorable
• Aesthetic Consistency: Have a clear aesthetic point-of-view, cohesive and unified
• Meticulously Refined: Every detail is carefully polished

🔍 SELF-AUDIT CHECKLIST (Before Submitting Code)

Run these checks on your generated code:

1. Color Audit:

   # Search for forbidden colors in your code
   grep -iE "(violet|purple|indigo|fuchsia)" [your-file]
   # If found → VIOLATION → Choose alternative from Design Specification

2. Font Audit:

   # Search for forbidden fonts
   grep -iE "(Inter|Roboto|system-ui|Arial|-apple-system)" [your-file]
   # If found → VIOLATION → Use distinctive font from Design Specification

3. Icon Audit:

   # Search for emoji usage (common emoji patterns)
   grep -iE "(🚀|⭐|❤️|👍|🔥|💡|🎉|✨)" [your-file]
   # If found → VIOLATION → Replace with FontAwesome or other professional icon library
   # Verify icon library is properly imported and used

4. Layout Audit (judged by scene, not one-size-fits-all):

   • Persuade: did you use asymmetry or breaking, and can you name the line you broke and why?
   • Operate / Read: predictable structure, stable density, body measure within 65–75ch?
   • All scenes: ≤4 breakpoints reused site-wide, a single container width, spacing drawn from the scale?

5. Measurable Checks (measurable, not felt):

   • Contrast: body and placeholder text ≥4.5:1, large text ≥3:1. On colored surfaces, tint secondary text from that hue rather than graying it — gray on color reads muddy and fails.
   • Spacing: tight groups tighter, distant groups farther; more space above a heading than below. Read the computed value, not the impression.
   • Tracking: never below -0.04em; -0.02 to -0.03em usually reads better.
   • Browser surfaces: text selection, caret, scrollbars, focus rings, underline offset, tabular numerals — these ship with defaults that belong to no design system. Theme them from the palette. It is the cheapest signal that a page was built rather than assembled.
   • States: are hover, disabled, loading, error, and empty all designed?
   • Overflow: run real copy at every breakpoint and look for what wraps badly or gets clipped.

6. Design Specification Compliance:

   • Did you output the DESIGN SPECIFICATION before code? (Required: YES)
   • Does the code match the aesthetic direction you declared? (Required: YES)

If any audit fails → Re-design with correct approach

Remember: You are capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.