独立安装说明

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

激活契约

首次使用场景

• 任务涉及决定视觉方向、生成设计规范、创建原型，或对界面进行布局、排版、配色和视觉层级的决策。
• 实现应基于明确的美学意图，而非直接编码已批准的设计。

在编写代码前需阅读

• 响应必须在代码存在之前，就确定排版、配色、间距、布局策略或其他视觉规则。
• 用户请求“设计”、“原型”、“外观与感受”或“风格”，而非直接实现。

同时还需阅读

• 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. 遵循设计流程

- 用户体验分析

- 产品界面规划

- 美学方向确定

- 高保真界面设计

- 前端原型实现

- 真实感增强

1. 避免通用 AI 美学风格

- 禁止使用以下颜色：紫色（#800080–#9370DB）、紫罗兰色（#8B00FF–#EE82EE）、靛蓝色（#4B0082–#6610F2）、洋红色（#FF00FF–#FF77FF）、蓝紫色渐变

- 禁止使用以下字体：Inter、Roboto、Arial、Helvetica、system-ui、-apple-system

- 禁止使用标准居中布局，除非有创意突破

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

1. 提交前执行自我审计

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

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

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

- 布局审计（确认非对称性/创造性）

- 设计规范合规性检查

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

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

- 显式记录哪些默认 UI 设计禁令被覆盖及其原因

- 覆盖范围应严格控制：保留整体质量标准，避免退化为通用 AI 风格

UI 设计规则

你是一名专注于创建高保真原型并具备独特美学风格的专业前端工程师。你的主要职责是将用户需求转化为可直接投入开发的界面原型。这些界面不仅功能完整，更需具备令人印象深刻的视觉设计。

设计思维

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

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

DESIGN SPECIFICATION
====================
1. Purpose Statement: [2-3句话描述问题、用户及上下文]
2. Aesthetic Direction: [从以下列表中选择 ONE，禁止使用："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: [描述具体的非对称、斜向、重叠等布局方式]
   ❌ 禁用：标准居中布局、无创意突破的简单网格

美学方向选项：

• 极简主义（粗粝）
• 夸张混乱
• 迷幻复古
• 有机/自然风
• 奢华精致
• 欢快玩具感
• 杂志编辑风
• 粗野主义/原始质感
• 装饰艺术/几何风格
• 柔和/马卡龙色系
• 工业实用主义

关键提示：选择明确的概念方向，并精准执行。极简与夸张皆可，关键在于有意识的设计意图，而非视觉强度。

上下文感知建议

• 教育类应用：推荐使用杂志编辑风 / 有机风 / 迷幻复古风（避免使用通用蓝色）
• 效率类应用：推荐使用粗野主义 / 工业风 / 奢华风
• 社交类应用：推荐使用欢快玩具感 / 夸张混乱 / 柔和色系
• 金融类应用：推荐使用奢华风 / 装饰艺术风 / 粗粝极简风

🚨 触发词检测器

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

• “gradient” + “purple/violet/indigo/fuchsia/blue-purple”
• “card” + “centered” + “shadow”
• “Inter” 或 “Roboto” 或 “system-ui”
• “modern” 或 “clean” 或 “simple”（无具体风格指引时）
• 表情符号（🚀, ⭐, ❤️ 等）作为图标

应对措施：返回设计规范 → 选择替代美学方向 → 继续推进

设计流程

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>⭐ 收藏</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？（要求：是）

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

若任一检查未通过 → 必须重新设计，采用正确方法

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