# UI Design

Use when users need visual direction, interface hierarchy, layout decisions, design...

- Repository: https://github.com/TencentCloudBase/CloudBase-AI-Toolkit (1153 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add TencentCloudBase/CloudBase-AI-Toolkit --skill ui-design -g -a claude-code -y`
Codex: `npx skills add TencentCloudBase/CloudBase-AI-Toolkit --skill ui-design -g -a codex -y`
Cursor: `npx skills add TencentCloudBase/CloudBase-AI-Toolkit --skill ui-design -g -a cursor -y`
Gemini CLI: `npx skills add TencentCloudBase/CloudBase-AI-Toolkit --skill ui-design -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add TencentCloudBase/CloudBase-AI-Toolkit`

## Description

Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

## 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](checklist.md) before interface generation.

## When to use this skill

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

The rest: https://github.com/TencentCloudBase/CloudBase-AI-Toolkit/blob/HEAD/config/.claude/skills/ui-design/SKILL.md