ui-design-guide

Standalone Install Note

If this environment only installed the current skill, start from the CloudBase main entry and use the published cloudbase/references/... paths for sibling skills.

• CloudBase main entry: https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/SKILL.md
• Current skill raw source: https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/ui-design/SKILL.md

Keep local references/... paths for files that ship with the current skill directory. When this file points to a sibling skill such as auth-tool or web-development, use the standalone fallback URL shown next to that reference.

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 (standalone fallback: https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/web-development/SKILL.md)
• Mini program implementation -> ../miniprogram-development/SKILL.md (standalone fallback: https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/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