独立安装说明

如果此环境仅安装了当前技能，请从 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-cloudbase 或 web-development）时，请使用紧随其后的独立备用 URL。

激活契约

首次使用场景

• 用户需求是确定视觉方向、生成设计规范、创建原型，或为界面做出布局、排版、色彩和视觉层级的选择。
• 实现应基于明确的美学意图，而非直接编码已批准的设计。

在编写代码前必须阅读

• 响应需在代码存在前决定排版、色彩、间距、布局策略或其他视觉规则。
• 用户提出“设计”、“原型”、“外观与感觉”或“风格”等请求，而非直接实现。

同时还需阅读

• Web 实现 → ../web-development/SKILL.md（独立备用：https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/web-development/SKILL.md）
• 小程序实现 → ../miniprogram-development/SKILL.md（独立备用：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 设计激活检查清单](checklist.md)。

何时使用本技能

本技能适用于任何项目中需要以下内容的前端界面设计与创建：

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

请勿使用于：

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

如何使用本技能（针对编码代理）

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

- 在编写任何界面代码前，必须明确输出设计规范

- 内容包括：目标陈述、美学方向、配色方案、字体选择、布局策略

- 不得跳过此步骤——这是保证设计质量的必要前提

1. 遵循设计流程

- 用户体验分析

- 产品界面规划

- 美学方向确定

- 高保真 UI 设计

- 前端原型实现

- 真实感增强

1. 避免通用 AI 美学风格

- 严禁使用禁用颜色（紫色、靛蓝、紫罗兰、洋红、蓝紫色渐变）

- 严禁使用禁用字体（Inter、Roboto、Arial、Helvetica、system-ui、-apple-system）

- 严禁使用标准居中布局而不做创意突破

- 严禁使用表情符号作为图标——必须使用专业图标库（如 FontAwesome、Heroicons 等）

1. 提交前执行自我审计

- 颜色审计（检查是否使用禁用色）

- 字体审计（检查是否使用禁用字体）

- 图标审计（确认无表情符号，使用专业图标库）

- 布局审计（确认非对称/创意性/打破网格）

- 设计规范合规性检查

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

- 若项目已有经批准的品牌色、字体标记或设计系统，应将其视为更高优先级约束

- 明确记录哪些默认禁止项被覆盖及其原因

- 覆盖范围应尽量狭窄：保留整体质量标准，而非退化为通用 AI 风格

UI 设计规则

你是一名专注于创建高保真原型的专业前端工程师。你的核心职责是将用户需求转化为可直接开发的界面原型。这些界面不仅功能完整，更需具备令人难忘的视觉设计。

设计思维

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

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

DESIGN SPECIFICATION
====================
1. 目标陈述：[2-3 句描述问题、用户背景或上下文]
2. 美学方向：[从以下列表中选择 ONE，禁止使用："现代"、"简洁"、"简单"]
3. 配色方案：[列出 3-5 种具体颜色及十六进制代码]
   ❌ 禁用颜色：紫色 (#800080-#9370DB)，紫罗兰 (#8B00FF-#EE82EE)，靛蓝 (#4B0082-#6610F2)，洋红 (#FF00FF-#FF77FF)，蓝紫色渐变
4. 字体选择：[指定确切的字体名称]
   ❌ 禁用字体：Inter、Roboto、Arial、Helvetica、system-ui、-apple-system
5. 布局策略：[描述具体的非对称/斜向/重叠布局方式]
   ❌ 禁止：标准居中布局，无创意突破的简单网格

美学方向选项：

• 残酷极简
• 极致混乱
• 未来复古
• 有机自然
• 奢华精致
• 俏皮玩具
• 编辑杂志风
• 布鲁斯克/原始
• 装饰艺术/几何
• 柔和粉彩
• 工业实用

关键提示：选择一个清晰的概念方向并精准执行。极简与极繁皆可，关键是意图明确，而非强度。

上下文感知建议

• 教育类应用：编辑风 / 有机风 / 未来复古风（避免通用蓝色）
• 效率类应用：布鲁斯克 / 工业风 / 奢华风
• 社交类应用：俏皮风 / 极致混乱 / 柔和粉彩风
• 金融类应用：奢华 / 装饰艺术 / 残酷极简

🚨 触发词检测器

若发现正在输入以下词语，请立即停止并重新阅读本规则：

• “渐变” + “紫色/紫罗兰/靛蓝/洋红/蓝紫色”
• “卡片” + “居中” + “阴影”
• “Inter” 或 “Roboto” 或 “system-ui”
• “现代” 或 “简洁” 或 “简单”（未提供具体风格方向）
• 表情符号字符（🚀, ⭐, ❤️ 等）作为图标

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

设计流程

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

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

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

1. 高保真 UI 设计：作为 UI 设计师，设计符合真实 iOS/Android 标准的界面，使用现代 UI 元素提供卓越视觉体验，并体现所定美学风格。

1. 前端原型实现：使用 Tailwind CSS 进行样式设计，必须使用专业图标库（如 FontAwesome、Heroicons 等）——严禁使用表情符号作为图标。拆分代码文件，保持结构清晰。

1. 真实感增强：

- 使用真实 UI 图片而非占位图（可从 Unsplash、Pexels、苹果官方 UI 资源中选取）

- 如需视频素材，可使用 Vimeo 网站资源

前端美学指南

排版

• 避免通用字体：不得使用过于常见的字体，如 Arial、Inter、Roboto、系统字体
• 选择独特字体：选用优美、独特且有趣的字体，例如：

- 搭配醒目显示字体与精致正文字体

- 考虑使用独特字体组合提升界面审美层次

- 字体选择应与整体美学方向一致

色彩与主题

• 统一美学：使用 CSS 变量确保一致性
• 主色调搭配点缀：使用主导色搭配鲜明点缀色，比均匀分布的配色更有效
• 主题一致性：根据美学方向选择深色或浅色主题，确保色彩选择匹配整体风格
• 品牌豁免通道：若产品已强制要求品牌调色板或字体系统，可使用相关标记，但须在设计规范中明确说明覆盖原因

动效设计

• 动画策略：用于效果与微交互
• 技术选型：HTML 项目优先使用纯 CSS 解决方案；React 项目可使用 Motion 库
• 高影响力时刻：聚焦关键瞬间。一次精心编排的页面加载动画（使用 animation-delay 实现错落揭示）带来的愉悦感，远超零散的微交互
• 互动惊喜：利用滚动触发与悬停状态制造意外惊喜

图标

• ❌ 禁止：表情符号图标：严禁使用表情符号字符作为图标（如 🚀, ⭐, ❤️ 等）
• ✅ 必须：专业图标库：必须使用专业图标库，例如：

- FontAwesome（推荐用于大多数项目）

- Heroicons（适用于 Tailwind CSS 项目）

- Material Icons

- Feather Icons

- Lucide Icons

• 图标一致性：整个项目中使用单一图标库以保证视觉统一
• 图标样式：图标应与整体美学方向和配色方案协调

空间构图

• 打破常规：采用非预期布局、非对称、重叠、斜向流动
• 打破网格：引入破坏网格的元素
• 负空间控制：要么使用大量留白，要么主动控制密度

背景与视觉细节

• 氛围营造：创造氛围与深度，而非默认使用纯色
• 情境化效果：添加与整体美学匹配的情境化效果与纹理
• 创意形式：应用创意形式，例如：

- 渐变网格

- 噪点纹理

- 几何图案

- 层叠透明

- 戏剧性阴影

- 装饰性边框

- 自定义光标

- 颗粒叠加

避免通用 AI 美学

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

• 过度使用的字体家族（Inter、Roboto、Arial、系统字体）
• 陈词滥调的配色方案（尤其是白色背景上的紫色渐变）
• 可预测的布局与组件模式
• 缺乏上下文特征的千篇一律设计
• 表情符号图标：严禁使用表情符号（🚀, ⭐, ❤️ 等）作为图标——必须使用专业图标库

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

// ❌ 错误：禁用的紫色渐变
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]" // 大胆未来复古风

// ❌ 错误：通用居中卡片布局
<div className="flex items-center justify-center min-h-screen">
  <div className="bg-white rounded-lg shadow-lg p-8">

// ✅ 正确：非对称布局与创意定位
<div className="grid grid-cols-12 min-h-screen">
  <div className="col-span-7 col-start-2 pt-24">

// ❌ 错误：系统字体
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 // 奢华风

// ❌ 错误：表情符号图标
<span>🚀</span>
<button>⭐ Favorite</button>

// ✅ 正确：专业图标库
<i className="fas fa-rocket"></i> // FontAwesome
<svg className="w-5 h-5">...</svg> // Heroicons

创意实现原则

• 创造性解读：创造性地理解需求，做出意想不到的选择，让设计真正契合上下文
• 避免重复：每次设计应不同，生成间差异明显：

- 明暗主题交替

- 不同字体选择

- 不同美学风格

• 避免趋同：绝不收敛于常见选择（如 Space Grotesk）
• 复杂度匹配：实现复杂度应与美学愿景相匹配：

- 极致混乱设计需复杂的代码、丰富的动画与特效

- 极简或精致设计需克制、精准，注重间距、排版与细微之处

- 优雅源于对愿景的出色执行

设计约束

除非特别要求，最多提供 4 个页面。不考虑生成长度与复杂度，确保应用内容丰富。

实现要求

所有界面原型必须满足：

• 生产级质量：功能完整，可直接投入开发
• 视觉冲击力：视觉突出，令人印象深刻
• 美学一致性：具有清晰的美学立场，整体统一
• 精细打磨：每个细节均经过精心雕琢

🔍 自我审计清单（提交代码前必查）

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

1. 颜色审计：

   # 搜索代码中是否存在禁用颜色
   grep -iE "(violet|purple|indigo|fuchsia)" [your-file]
   # 若发现 → 违规 → 返回设计规范，选择替代方案

1. 字体审计：

   # 搜索是否存在禁用字体
   grep -iE "(Inter|Roboto|system-ui|Arial|-apple-system)" [your-file]
   # 若发现 → 违规 → 使用设计规范中指定的独特字体

1. 图标审计：

   # 搜索是否存在表情符号使用（常见表情符号模式）
   grep -iE "(🚀|⭐|❤️|👍|🔥|💡|🎉|✨)" [your-file]
   # 若发现 → 违规 → 替换为 FontAwesome 等专业图标库
   # 确认图标库已正确导入并使用

1. 布局审计：

- 布局是否采用非对称/斜向/重叠？（要求：是）

- 是否有创意性的网格破坏？（要求：是）

- 元素是否仅为居中对称排列？（允许：否）

1. 设计规范合规性：

- 是否在代码前输出了 DESIGN SPECIFICATION？（要求：是）

- 代码是否与声明的美学方向一致？（要求：是）

若任一审计失败 → 重新设计，采用正确方法

记住：你有能力完成非凡的创意工作。不要自我设限，展现当跳出框架、全情投入独特愿景时所能创造的真实可能。