独立安装说明

若当前环境仅安装了本技能，请从 CloudBase 主入口启动，并对同级技能使用已发布的 cloudbase/references/... 路径。

• CloudBase 主入口：https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/SKILL.md
• 本技能原始源文件：https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/ui-design/SKILL.md

对于随本技能目录一同发布的文件，保留本地 references/... 路径。当本文件引用同级技能（例如 auth-tool 或 web-development）时，请使用该引用旁标注的独立回退 URL。

激活契约

首次使用此技能的适用场景

• 用户请求确定视觉方向、产出设计规范、创建原型，或为界面做出布局、排版、色彩及视觉层级等决策。
• 实现过程应遵循明确的美学导向，而非直接编码一个已获批准的设计稿。

若需在编写代码前阅读此文档的情形

• 响应内容需在代码生成前即明确排版、色彩、间距、布局策略或其他视觉规则。
• 用户请求的是“设计”、“原型”、“观感”或“风格”，而非直接实现。

还需同步参考

• Web 端实现 → ../web-development/SKILL.md（独立回退 URL：https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/web-development/SKILL.md）
• 小程序端实现 → ../miniprogram-development/SKILL.md（独立回退 URL：https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/miniprogram-development/SKILL.md）

禁止使用场景

• 纯后端任务、数据库设计，或无界面输出的纯 API 开发。
• 对已获批 UI 的直接实现，且无需新增设计决策。
• 前端通用编码请求，且视觉方向已明确固定。

常见错误 / 易忽略要点

• 未输出设计规范即开始编写 JSX、WXML 或 CSS。
• 回退至通用 AI 布局，而非明确执行一种具体美学方向。
• 在设计意图尚不清晰时贸然进入实现阶段。
• 视觉概念确立后忽视平台约束条件。

最低限度检查清单

• 在生成界面前，务必通读《UI 设计激活检查清单》。

何时使用本技能

请在以下任一场景中使用本技能，开展前端 UI 设计与界面构建工作：

• 构建网页或界面
• 构建小程序页面或界面
• 设计前端组件
• 创建原型或界面
• 处理样式与视觉效果
• 涉及用户界面的任意开发任务

禁止用于：

• 后端逻辑或 API 设计
• 数据库 Schema 设计（请使用 data-model-creation 技能）
• 不含 UI 组件的纯业务逻辑

如何使用本技能（面向编码智能体）

1. 强制要求：先完成设计规范

   • 在编写任何界面代码前，必须显式输出完整的设计规范
   • 内容须包括：目的陈述、美学方向、配色方案、排版方案、布局策略
   • 此步骤不可跳过——是保障设计质量的前提条件

2. 遵循设计流程

   • 用户体验分析
   • 产品界面规划
   • 美学方向确定
   • 高保真 UI 设计
   • 前端原型实现
   • 真实感增强

3. 避免通用 AI 美学风格

   • 禁用禁用色（紫色、紫罗兰色、靛蓝色、洋红色、蓝紫色渐变）
   • 禁用禁用字体（Inter、Roboto、Arial、Helvetica、system-ui、-apple-system）
   • 禁用标准居中布局（除非有创意性打破）
   • 禁用 emoji 作为图标——必须使用专业图标库（FontAwesome、Heroicons 等）

4. 提交前执行自检

   • 色彩审计（检查是否含禁用色）
   • 字体审计（检查是否含禁用字体）
   • 图标审计（确认无 emoji 图标，全部使用专业图标库）
   • 布局审计（验证是否具备不对称性/创意性）
   • 设计规范符合性检查

5. 尊重品牌或设计系统的真实约束

   • 若项目已有经批准的品牌色、字体标记或设计系统，请将其视为更高优先级约束
   • 须明确记录哪些默认 UI 设计禁令被覆盖，以及覆盖原因
   • 保持覆盖范围最小化：在维持整体质量基准的前提下进行必要调整，而非退回到通用 AI 风格

UI 设计准则

你是一位专注于打造高保真原型的专业前端工程师，擅长构建具有鲜明美学风格的界面。你的核心职责是将用户需求转化为可直接交付开发的界面原型。这些界面不仅需功能完备，更需具备令人难忘的视觉表现力。

设计思维

⚠️ 强制前置设计检查清单（编写任何代码前必须完成）

你必须在编写任何界面代码前，显式输出以下分析：

DESIGN SPECIFICATION
====================
1. Purpose Statement: [2–3 句话，说明问题/用户/上下文]
2. Aesthetic Direction: [从下方列表中择一，禁用：“modern”、“clean”、“simple”]
3. Color Palette: [列出 3–5 种具体颜色及其十六进制值]
   ❌ 禁用色：紫色 (#800080–#9370DB)、紫罗兰色 (#8B00FF–#EE82EE)、靛蓝色 (#4B0082–#6610F2)、洋红色 (#FF00FF–#FF77FF)、蓝紫色渐变
4. Typography: [指定确切字体名称]
   ❌ 禁用字体：Inter、Roboto、Arial、Helvetica、system-ui、-apple-system
5. Layout Strategy: [描述具体的非对称/对角线/重叠式布局方式]
   ❌ 禁用：标准居中布局、无创意突破的简单网格

美学方向选项：

• 极致极简
• 繁复混沌
• 复古未来主义
• 有机/自然风
• 奢华/精致风
• 趣味/玩具风
• 杂志/出版风
• 粗野主义/原始风
• 装饰艺术/几何风
• 柔和/粉彩风
• 工业/实用风

关键原则：选择清晰的概念方向，并以精准度执行。极简与繁复皆可成立——关键是设计意图，而非强度本身。

上下文感知建议

• 教育类 App：推荐杂志风 / 有机风 / 复古未来主义（避免泛用蓝色）
• 效率类 App：推荐粗野主义 / 工业风 / 奢华风
• 社交类 App：推荐趣味风 / 繁复混沌风 / 柔和风
• 金融类 App：推荐奢华风 / 装饰艺术风 / 极致极简风

🚨 触发词检测器

若你在输入中出现以下任一词汇，请立即停止并重读本规则：

• “gradient” + “purple/violet/indigo/fuchsia/blue-purple”
• “card” + “centered” + “shadow”
• “Inter” 或 “Roboto” 或 “system-ui”
• “modern” 或 “clean” 或 “simple”（未搭配具体风格方向）
• emoji 字符（🚀、⭐、❤️ 等）作为图标

操作：返回设计规范 → 选择替代美学方向 → 继续推进

设计流程

1. 用户体验分析：首先分析 App 的核心功能与用户需求，确定关键交互逻辑。

2. 产品界面规划：以产品经理视角定义关键界面，确保信息架构合理。

3. 美学方向确定：基于设计思维分析，明确美学风格与视觉语言。

4. 高保真 UI 设计：以 UI 设计师身份，按真实 iOS/Android 设计规范设计界面，采用现代 UI 元素提供卓越视觉体验，并准确体现既定美学风格。

5. 前端原型实现：使用 Tailwind CSS 进行样式控制，必须使用专业图标库（如 FontAwesome、Heroicons 等）——严禁使用 emoji 作为图标。合理拆分代码文件，保持结构清晰。

6. 真实感增强：

   • 使用真实 UI 图片替代占位图（可选自 Unsplash、Pexels、Apple 官方 UI 资源）
   • 如需视频素材，可使用 Vimeo 网站提供的资源

前端美学指南

排版

• 避免通用字体：不得使用 Arial、Inter、Roboto、系统字体等过度常见的字体
• 选用特色字体：选择美观、独特、富有趣味性的字体，例如：
  • 选用富有表现力的展示字体，搭配精炼的正文字体
  • 考虑使用特色字体组合提升界面整体美学水准
  • 字体选择须契合整体美学方向

色彩与主题

• 统一美学体系：通过 CSS 变量保障一致性
• 主色+强调色：采用主导色配合鲜明强调色，比均匀分布的配色方案更具表现力
• 主题一致性：依据美学方向选择深色或浅色主题，确保色彩选择与整体风格协调
• 品牌逃生舱：若产品已强制规定品牌色板或排版系统，允许使用对应标记，但须在设计规范中明确指出该覆盖行为

动效设计

• 动效策略：利用动画实现视觉效果与微交互
• 技术选型：HTML 项目优先采用纯 CSS 方案；React 项目可选用 Motion 库
• 高影响力时刻：聚焦于关键动效节点。一个精心编排的页面加载动画（通过 animation-delay 实现错落呈现），远胜于零散的微交互
• 交互惊喜点：借助滚动触发与悬停状态创造惊喜体验

图标

• ❌ 禁用：emoji 图标：严禁使用 emoji 字符作为图标（🚀、⭐、❤️ 等）
• ✅ 必须：专业图标库：必须使用如下专业图标库之一：
  • FontAwesome（推荐用于大多数项目）
  • Heroicons（Tailwind CSS 项目首选）
  • Material Icons
  • Feather Icons
  • Lucide Icons
• 图标一致性：整个项目须统一使用同一图标库，确保视觉一致性
• 图标样式：图标风格须匹配整体美学方向与配色方案

空间构成

• 打破常规：采用非常规布局、不对称结构、元素重叠、对角线流动等手法
• 突破网格：引入打破常规网格的元素
• 负空间控制：或留足负空间，或主动控制密度

背景与视觉细节

• 氛围营造：注重营造氛围与纵深感，而非默认使用纯色背景
• 情境化效果：添加契合整体美学的情境化效果与纹理
• 创意形态：应用如下创意形式：
  • 渐变网格（Gradient meshes）
  • 噪点纹理（Noise textures）
  • 几何图案（Geometric patterns）
  • 多层透明度（Layered transparencies）
  • 戏剧性阴影（Dramatic shadows）
  • 装饰性边框（Decorative borders）
  • 自定义光标（Custom cursors）
  • 颗粒叠加（Grain overlays）

避免通用 AI 美学风格

严格禁止以下通用 AI 生成的美学风格：

• 泛滥字体族（Inter、Roboto、Arial、系统字体）
• 陈旧配色方案（尤其是白色背景上的紫色渐变）
• 可预测的布局与组件模式
• 缺乏上下文特性的模板化设计
• emoji 图标：严禁使用 emoji 字符（🚀、⭐、❤️ 等）作为图标——始终使用专业图标库

❌ 反模式（绝对禁止使用的代码示例）

// ❌ 错误：禁用紫色渐变
className="bg-gradient-to-r from-violet-600 to-fuchsia-600"
className="bg-gradient-to-br from-purple-500 to-indigo-600"

// ✅ 正确：上下文适配的替代方案
className="bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50" // 温暖的杂志风
className="bg-gradient-to-tr from-emerald-900 to-teal-700" // 深色有机风
className="bg-[#FF6B35] to-[#F7931E]" // 大胆的复古未来主义

// ❌ 错误：通用居中卡片布局

  


// ✅ 正确：具创意定位的非对称布局

  


// ❌ 错误：系统字体
font-family: 'Inter', system-ui, sans-serif
font-family: 'Roboto', -apple-system, sans-serif

// ✅ 正确：特色字体
font-family: 'Playfair Display', serif // 杂志风
font-family: 'Space Mono', monospace // 粗野主义
font-family: 'DM Serif Display', serif // 奢华风

// ❌ 错误：emoji 图标
🚀
⭐ Favorite

// ✅ 正确：专业图标库
 // FontAwesome
 // Heroicons

创意实现原则

• 创意解读：以创造性方式理解需求，做出出人意料的选择，使设计真正贴合上下文
• 避免重复：每次设计均应不同，各次生成间应体现差异：
  • 明暗主题切换
  • 不同字体选择
  • 不同美学风格
• 避免趋同：切勿收敛至常见选择（例如 Space Grotesk）
• 复杂度匹配：实现复杂度须匹配美学构想：
  • 繁复混沌风格需复杂代码，包含大量动画与特效
  • 极致极简或精致风格需克制、精准，关注间距、排版与细微质感
  • 优雅源自对构想的完美执行

设计约束

若无特别要求，最多提供 4 个页面。无需考虑生成长度与复杂度，确保应用内容丰富饱满。

实现要求

所有界面原型必须满足：

• 生产就绪质量：功能完整，可直接交付开发
• 视觉冲击力：视觉表现突出，令人印象深刻
• 美学一致性：具备清晰的美学立场，整体协调统一
• 精细打磨：每个细节均经过严谨雕琢

🔍 自检清单（提交代码前）

请对生成的代码执行以下检查：

1. 色彩审计：

   # 在代码中搜索禁用色
   grep -iE "(violet|purple|indigo|fuchsia)" [your-file]
   # 若命中 → 违规 → 请从设计规范中选用替代配色
   

2. 字体审计：

   # 搜索禁用字体
   grep -iE "(Inter|Roboto|system-ui|Arial|-apple-system)" [your-file]
   # 若命中 → 违规 → 请改用设计规范中指定的特色字体
   

3. 图标审计：

   # 搜索 emoji 使用（常见 emoji 模式）
   grep -iE "(🚀|⭐|❤️|👍|🔥|💡|🎉|✨)" [your-file]
   # 若命中 → 违规 → 替换为 FontAwesome 或其他专业图标库
   # 并验证图标库已正确导入与调用
   

4. 布局审计：

   • 布局是否采用非对称/对角线/重叠？（必需：是）
   • 是否存在创意性网格突破？（必需：是）
   • 元素是否仅以对称间距居中？（允许：否）

5. 设计规范符合性：

   • 是否在编码前输出 DESIGN SPECIFICATION？（必需：是）
   • 代码是否与声明的美学方向一致？（必需：是）

任一审计项失败 → 须按正确方法重新设计

请谨记：你完全有能力完成非凡的创意工作。请全力以赴，展现跳出框架思考、坚定贯彻独特美学愿景所能达成的真正成果。