ui-design
starsforks
How to install ui-design?
tencentcloudbase/cloudbase-skills/ui-design
$npx -y skills add TencentCloudBase/cloudbase-skills --skill ui-designUse when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI.
SKILL.md
| 1 | ## Standalone Install Note |
| 2 | |
| 3 | If this environment only installed the current skill, start from the CloudBase main entry and use the published `cloudbase/references/...` paths for sibling skills. |
| 4 | |
| 5 | - CloudBase main entry: `https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/SKILL.md` |
| 6 | - Current skill raw source: `https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/ui-design/SKILL.md` |
| 7 | |
| 8 | 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. |
| 9 | |
| 10 | ## Activation Contract |
| 11 | |
| 12 | ### Use this first when |
| 13 | |
| 14 | - 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. |
| 15 | - The implementation should follow a deliberate aesthetic rather than directly coding an already-approved design. |
| 16 | |
| 17 | ### Read before writing code if |
| 18 | |
| 19 | - The response must choose typography, color, spacing, layout strategy, or other visual rules before code exists. |
| 20 | - The user asks for "design", "prototype", "look and feel", or "style" rather than straight implementation. |
| 21 | |
| 22 | ### Then also read |
| 23 | |
| 24 | - 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`) |
| 25 | - 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`) |
| 26 | |
| 27 | ### Do NOT use for |
| 28 | |
| 29 | - Backend-only tasks, database design, or pure API work without interface output. |
| 30 | - Straight implementation of an already-approved UI without new design decisions. |
| 31 | - Generic frontend coding requests where the visual direction is already settled. |
| 32 | |
| 33 | ### Common mistakes / gotchas |
| 34 | |
| 35 | - Writing JSX, WXML, or CSS before outputting the design specification. |
| 36 | - Falling back to generic AI layouts instead of an explicit aesthetic direction. |
| 37 | - Jumping into implementation when the design intent is still unclear. |
| 38 | - Ignoring platform constraints after the visual concept is defined. |
| 39 | |
| 40 | ### Minimal checklist |
| 41 | |
| 42 | - Read [UI Design Activation Checklist](checklist.md) before interface generation. |
| 43 | |
| 44 | ## When to use this skill |
| 45 | |
| 46 | Use this skill for **frontend UI design and interface creation** in any project that requires: |
| 47 | |
| 48 | - Creating web pages or interfaces |
| 49 | - Creating mini-program pages or interfaces |
| 50 | - Designing frontend components |
| 51 | - Creating prototypes or interfaces |
| 52 | - Handling styling and visual effects |
| 53 | - Any development task involving user interfaces |
| 54 | |
| 55 | **Do NOT use for:** |
| 56 | - Backend logic or API design |
| 57 | - Database schema design (use data-model-creation skill) |
| 58 | - Pure business logic without UI components |
| 59 | |
| 60 | --- |
| 61 | |
| 62 | ## How to use this skill (for a coding agent) |
| 63 | |
| 64 | 1. **MANDATORY: Complete Design Specification First** |
| 65 | - Before writing ANY interface code, you MUST explicitly output the design specification |
| 66 | - This includes: Purpose Statement, Aesthetic Direction, Color Palette, Typography, Layout Strategy |
| 67 | - Never skip this step - it's required for quality design |
| 68 | |
| 69 | 2. **Follow the Design Process** |
| 70 | - User Experience Analysis |
| 71 | - Product Interface Planning |
| 72 | - Aesthetic Direction Determination |
| 73 | - High-Fidelity UI Design |
| 74 | - Frontend Prototype Implementation |
| 75 | - Realism Enhancement |
| 76 | |
| 77 | 3. **Avoid Generic AI Aesthetics** |
| 78 | - Never use forbidden colors (purple, violet, indigo, fuchsia, blue-purple gradients) |
| 79 | - Never use forbidden fonts (Inter, Roboto, Arial, Helvetica, system-ui, -apple-system) |
| 80 | - Never use standard centered layouts without creative breaking |
| 81 | - Never use emoji as icons - always use professional icon libraries (FontAwesome, Heroicons, etc.) |
| 82 | |
| 83 | 4. **Run Self-Audit Before Submitting** |
| 84 | - Color audit (check for forbidden colors) |
| 85 | - Font audit (check for forbidden fonts) |
| 86 | - Icon audit (verify no emoji icons, using professional icon libraries) |
| 87 | - Layout audit (verify asymmetry/creativity) |
| 88 | - Design specification compliance check |
| 89 | |
| 90 | 5. **Respect brand or design-system overrides when they are real constraints** |
| 91 | - If the project already has approved brand colors, font tokens, or a design system, treat those as higher-priority constraints |
| 92 | - Explicitly document which default UI-design prohibitions are being overridden and why |
| 93 | - Keep the override narrow: preserve the overall quality bar instead of falling back to generic AI styling |
| 94 | |
| 95 | --- |
| 96 | |
| 97 | # UI Design Rules |
| 98 | |
| 99 | You are a professional frontend engineer specializing in creating high-fidelity prototypes |
People who liked this also viewed
6 picksType
- web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026
- lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026
- design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026
- caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026
- codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026
