ui-design
Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI.
npx skills add TencentCloudBase/CloudBase-AI-Toolkit --skill ui-design --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
## 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 interfac
- Sibling skills (local only)
- Activation Contract
- Use this first when
- Read before writing code if
- Then also read
- Do NOT use for
- Common mistakes / gotchas
- Minimal checklist
- When to use this skill
- How to use this skill (for a coding agent)
- Design Thinking
- ⚠️ MANDATORY PRE-DESIGN CHECKLIST (MUST COMPLETE BEFORE ANY CODE)
- Context-Aware Recommendations
- 🚨 TRIGGER WORD DETECTOR
grep -iE "(violet|purple|indigo|fuchsia)" [your-file] grep -iE "(Inter|Roboto|system-ui|Arial|-apple-system)" [your-file] grep -iE "(🚀|⭐|❤️|👍|🔥|💡|🎉|✨)" [your-file]
What does the ui-design skill do?
Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI.
How do I install it?
Run `npx skills add TencentCloudBase/CloudBase-AI-Toolkit --skill ui-design --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From TencentCloudBase/CloudBase-AI-Toolkit, a repository with 1,066 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.