UI Design

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 data-model-creation 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 without creative breaking
   • 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 (verify asymmetry/creativity)
   • 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

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
====================
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: [Describe specific asymmetric/diagonal/overlapping approach]
   ❌ FORBIDDEN: Standard centered layouts, simple grid without creative breaking

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

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