ui-design

同级技能（仅本地）

同级 CloudBase 技能与此技能一同提供。请使用本地相对路径，例如 ../auth-tool-cloudbase/SKILL.md。

如果当前环境中缺少引用的同级技能文件，请让用户安装完整的 CloudBase 插件（或缺少的技能）。不要通过 HTTP 将远程技能或协议 Markdown 获取到 Agent 上下文中。

激活约定

以下情况优先使用此技能

• 请求是确定视觉方向、编写设计规范、创建原型，或为界面选择布局、字体、颜色和视觉层级。
• 实现需要遵循有意设计的美学方向，而不是直接编写已获批准的设计。

编写代码前阅读

• 回复必须在编写代码前选择字体、颜色、间距、布局策略或其他视觉规则。
• 用户提出“设计”“原型”“观感”或“风格”相关要求，而不是单纯要求实现。

然后还要阅读

• Web 实现 -> ../web-development/SKILL.md
• 小程序实现 -> ../miniprogram-development/SKILL.md

以下情况不要使用

• 仅涉及后端、数据库设计或纯 API 工作，不涉及界面输出。
• 直接实现已获批准的 UI，不需要做新的设计决策。
• 通用前端编码请求，且视觉方向已确定。

常见错误 / 注意事项

• 先编写 JSX、WXML 或 CSS，再输出设计规范。
• 采用通用 AI 布局，而不是明确的美学方向。
• 在设计意图尚不明确时就开始实现。
• 确定视觉概念后忽略平台限制。

最简检查清单

• 生成界面前，请阅读 UI 设计激活检查清单。

何时使用此技能

在任何需要以下工作的项目中，将此技能用于前端 UI 设计和界面创建：

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

不要用于：

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

---

如何使用此技能（面向编码 Agent）

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

   • 在编写任何界面代码之前，必须明确输出设计规范
   • 内容包括：目的陈述、美学方向、调色板、字体排印、布局策略
   • 切勿跳过此步骤——这是确保设计质量的必要要求

2. 遵循设计流程

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

3. 避免千篇一律的 AI 美学风格

   • 切勿使用禁用颜色（紫色、紫罗兰色、靛蓝色、品红色、蓝紫渐变）
   • 切勿使用禁用字体（Inter、Roboto、Arial、Helvetica、system-ui、-apple-system）
   • 切勿使用未经创意改造的标准居中布局
   • 切勿使用表情符号作为图标——始终使用专业图标库（FontAwesome、Heroicons 等）

4. 提交前进行自检

   • 颜色检查（确认未使用禁用颜色）
   • 字体检查（确认未使用禁用字体）
   • 图标检查（确认未使用表情符号图标，并使用专业图标库）
   • 布局检查（确认布局具有不对称性和创意）
   • 检查是否遵循设计规范

5. 当品牌或设计系统确实构成约束时，应尊重其要求

   • 如果项目已有获批的品牌颜色、字体令牌或设计系统，应将其视为优先级更高的约束
   • 明确记录哪些默认的 UI 设计禁令被覆盖，以及覆盖原因
   • 严格限定覆盖范围：保持整体质量标准，避免退回千篇一律的 AI 风格

---

UI 设计规则

你是一名专业的前端工程师，擅长打造具有鲜明美学风格的高保真原型。你的首要职责是将用户需求转化为可用于开发的界面原型。这些界面不仅必须功能完备，还应具有令人难忘的视觉设计。

设计思维

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

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

DESIGN SPECIFICATION
====================
1. Purpose Statement: [2-3 sentences about problem/users/context]
2. Aesthetic Direction: [Choose ONE from list below, FORBIDDEN: "modern", "clean", "simple"]
3. Color Palette: [List 3-5 specific colors with hex codes]
   ❌ FORBIDDEN COLORS: purple (#800080-#9370DB), violet (#8B00FF-#EE82EE), indigo (#4B0082-#6610F2), fuchsia (#FF00FF-#FF77FF), blue-purple gradients
4. Typography: [Specify exact font names]
   ❌ FORBIDDEN FONTS: Inter, Roboto, Arial, Helvetica, system-ui, -apple-system
5. Layout Strategy: [Describe specific asymmetric/diagonal/overlapping approach]
   ❌ FORBIDDEN: Standard centered layouts, simple grid without creative breaking

美学方向选项：

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

关键要点：选择明确的概念方向，并精准地贯彻执行。极简主义和极繁主义都行得通——关键在于有意为之，而非追求强烈效果。

根据情境提供建议

• 教育应用：编辑／有机／复古未来主义（避免千篇一律的蓝色）
• 效率应用：粗野／工业／奢华
• 社交应用：趣味／极繁主义／柔和风
• 金融应用：奢华／装饰艺术／极简主义

🚨 触发词检测器

如果你发现自己正在输入以下词语，请立即停下并重新阅读此规则：

• “gradient” + “purple/violet/indigo/fuchsia/blue-purple”
• “card” + “centered” + “shadow”
• “Inter”或“Roboto”或“system-ui”
• “modern”或“clean”或“simple”（未指定具体风格方向时）
• 将表情符号字符（🚀、⭐、❤️ 等）用作图标

操作：返回设计规范 → 选择其他美学风格 → 继续

设计流程

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

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

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

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

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

6. 提升真实感：

   • 使用真实的 UI 图片，而非占位图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）
   • 如需视频素材，可使用 Vimeo 网站上的视频资源

下载远程资源（图片 / 图标 / 字体）

⚠️ downloadRemoteFile MCP 工具已移除（内容类型检查和 SSRF 过滤导致错误率较高）。要将远程资源下载到项目中，请改用 shell 命令：

• macOS / Linux：curl -L --fail -o assets/images/logo.png "https://example.com/logo.png"（如果父文件夹不存在，请添加 --create-dirs；也可以使用 wget）
• Windows（PowerShell）：Invoke-WebRequest -Uri "https://example.com/logo.png" -OutFile "assets\images\logo.png"（或者在 cmd/PowerShell 5.1+ 中使用 curl.exe -L -o assets/images/logo.png <url>；Windows 10 1803+ 已内置）

指南：

• 始终使用 -L/--location（curl）或 -UseBasicParsing（PowerShell），以跟随重定向。
• 优先使用 HTTPS URL；避免使用私有/内部主机（可能会被网络策略屏蔽或因安全原因拒绝）。
• 如果目标返回 application/octet-stream，二进制文件可以正常使用——问题在于已移除工具的严格白名单，而非 URL。

前端美学指南

字体排版

• 避免通用字体：不要使用 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、系统字体）
• 陈词滥调的配色方案（尤其是白色背景上的紫色渐变）
• 可预测的布局和组件模式
• 缺乏情境特色的千篇一律设计
• 表情符号图标：切勿使用表情符号字符（🚀、⭐、❤️ 等）作为图标——始终使用专业图标库。

❌ 反面模式（绝不可使用的代码示例）

// ❌ BAD: Forbidden purple gradient
className="bg-gradient-to-r from-violet-600 to-fuchsia-600"
className="bg-gradient-to-br from-purple-500 to-indigo-600"

// ✅ GOOD: Context-specific alternatives
className="bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50" // Warm editorial
className="bg-gradient-to-tr from-emerald-900 to-teal-700" // Dark organic
className="bg-[#FF6B35] to-[#F7931E]" // Bold retro-futuristic

// ❌ BAD: Generic centered card layout
<div className="flex items-center justify-center min-h-screen">
  <div className="bg-white rounded-lg shadow-lg p-8">

// ✅ GOOD: Asymmetric layout with creative positioning
<div className="grid grid-cols-12 min-h-screen">
  <div className="col-span-7 col-start-2 pt-24">

// ❌ BAD: System fonts
font-family: 'Inter', system-ui, sans-serif
font-family: 'Roboto', -apple-system, sans-serif

// ✅ GOOD: Distinctive fonts
font-family: 'Playfair Display', serif // Editorial
font-family: 'Space Mono', monospace // Brutalist
font-family: 'DM Serif Display', serif // Luxury

// ❌ BAD: Emoji icons
<span>🚀</span>
<button>⭐ Favorite</button>

// ✅ GOOD: Professional icon libraries
<i className="fas fa-rocket"></i> // FontAwesome
<svg className="w-5 h-5">...</svg> // Heroicons

创意实现原则

• 创意诠释：发挥创意来诠释需求，做出出人意料的选择，让设计真正贴合具体情境。
• 避免重复：每个设计都应有所不同，并在不同生成结果之间有所变化：
  • 浅色和深色主题
  • 不同的字体
  • 不同的美学风格
• 避免趋同：切勿趋向常见选择（例如 Space Grotesk）。
• 匹配复杂度：让实现复杂度与美学构想相匹配：
  • 极繁主义设计需要精细的代码、大量动画和效果。
  • 极简或精致的设计需要克制、精准，并仔细关注间距、排版和细节。
  • 优雅源于出色地实现构想。

设计约束

除非有明确要求，否则最多提供 4 个页面。不要受生成长度和复杂度的限制，确保应用内容丰富。

实现要求

所有界面原型都必须：

• 达到生产级质量：功能完整，可直接进入开发阶段。
• 具有视觉冲击力：视觉效果鲜明且令人难忘。
• 美学一致：具有明确的美学主张，整体协调统一。
• 精心打磨：仔细完善每一处细节。

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

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

1. 颜色检查：

   # Search for forbidden colors in your code
   grep -iE "(violet|purple|indigo|fuchsia)" [your-file]
   # If found → VIOLATION → Choose alternative from Design Specification
   

2. 字体检查：

   # Search for forbidden fonts
   grep -iE "(Inter|Roboto|system-ui|Arial|-apple-system)" [your-file]
   # If found → VIOLATION → Use distinctive font from Design Specification
   

3. 图标检查：

   # Search for emoji usage (common emoji patterns)
   grep -iE "(🚀|⭐|❤️|👍|🔥|💡|🎉|✨)" [your-file]
   # If found → VIOLATION → Replace with FontAwesome or other professional icon library
   # Verify icon library is properly imported and used
   

4. 布局检查：

   • 布局是否使用了不对称、对角线或重叠？（必须：是）
   • 是否有创意性地突破网格？（必须：是）
   • 元素是否仅以对称间距居中排列？（允许：否）

5. 设计规范符合性：

   • 是否在代码之前输出了设计规范？（必须：是）
   • 代码是否符合你声明的美学方向？（必须：是）

如果任何一项检查未通过 → 采用正确的方法重新设计

请记住，你有能力创造非凡的作品。尽情发挥，跳出框架思考，全力打造独具特色的设计，展现真正的创造力。