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: