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 设计
• 数据库架构设计（请使用 postgresql-development-cloudbase 技能）
• 不涉及 UI 组件的纯业务逻辑

---

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

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

   • 编写任何界面代码之前，必须明确输出设计规范
   • 内容包括：目的说明、审美方向、配色方案、字体排版、布局策略
   • 绝不跳过此步骤——这是保证设计质量的必要要求

2. 遵循设计流程

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

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

   • 绝不使用禁用颜色（紫色、薰衣草色、靛蓝色、品红色、蓝紫渐变）
   • 绝不使用禁用字体（Inter、Roboto、Arial、Helvetica、system-ui、-apple-system）
   • 在说服型界面上，绝不使用常规居中布局，除非进行创意性突破（居中布局适用于操作型和阅读型界面——参见下方的场景判断）
   • 绝不使用表情符号作为图标——始终使用专业图标库（FontAwesome、Heroicons 等）

4. 提交前进行自检

   • 颜色检查（检查是否使用禁用颜色）
   • 字体检查（检查是否使用禁用字体）
   • 图标检查（确认未将表情符号用作图标，并使用了专业图标库）
   • 布局检查（根据场景判断，而非一刀切）
   • 可量化检查（对比度、间距、状态、溢出）
   • 检查是否符合设计规范

5. 遵守真实存在的品牌或设计系统覆盖要求

   • 如果项目已有获批的品牌颜色、字体令牌或设计系统，应将其视为优先级更高的约束
   • 明确记录覆盖了哪些默认的 UI 设计禁令，以及覆盖原因
   • 将覆盖范围控制在最小限度：保持整体质量标准，不要退回千篇一律的 AI 风格
   • 符合条件：项目提供了 DESIGN.md、设计令牌文件或已发布的品牌规范，并且你能指出所遵循的具体令牌
   • 不符合条件：“我更喜欢这样”，或仅为绕过禁令而调整某个值

---

UI 设计规则

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

设计思考

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

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

DESIGN SPECIFICATION
====================
0. Scene: [Persuade / Operate / Read — pick one; it decides every criterion below]
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: [the scale: breakpoint count, container width, column count, spacing base; on persuade surfaces only, which line breaks and why]
   ❌ FORBIDDEN: a persuade surface in a standard centered layout with no breaking at all; starting any page without breakpoint and spacing scales

审美方向选项：

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

关键：选择清晰的概念方向，并精准地贯彻执行。极简主义和极繁主义都可行——关键在于有明确意图，而非强度。

基于上下文的建议

• 教育类应用：编辑风／有机风／复古未来主义（避免常见的蓝色）
• 生产力应用：粗野主义／工业风／奢华风
• 社交类应用：活泼风／极繁主义／柔和风
• 金融类应用：奢华风／装饰艺术风／极简主义

🚨 触发词检测器

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

• “渐变” + “紫色／薰衣草色／靛蓝色／品红色／蓝紫色”
• “卡片” + “居中” + “阴影”
• “Inter”或“Roboto”或“system-ui”
• “现代”或“整洁”或“简单”（未指定具体风格方向时）
• 将表情符号（🚀、⭐、❤️ 等）用作图标

操作：返回设计规范 → 选择替代审美风格 → 继续

设计流程

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

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

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

4. 高保真 UI 设计：以 UI 设计师的视角，设计符合真实 iOS/Android 设计标准的界面，使用现代 UI 元素打造出色的视觉体验，并体现已确定的审美风格。

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

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。

前端美学指南

先判断场景，再选择标准

同样的规则在三类界面中会相互冲突。先明确场景：

场景	常见界面	优质布局的含义
说服	落地页、营销主视觉、活动页面	明确的视觉立场；允许不对称、打破网格和刻意营造冲击力
操作	管理面板、表单、控制台、仪表板	结构清晰可预期、密度稳定、控件规范；绝不让用户重新学习元素的位置
阅读	文档、博客、帮助中心	读者可以顺畅浏览的线性路径，行宽为 65–75ch，导航置于符合预期的位置

• 说服型界面希望令人印象深刻；操作型和阅读型界面则希望表现可预期。
• 对于后两类界面，新颖的布局是缺陷，而非优势。 文档页面上的不对称网格设计会迫使每位读者每次访问时都重新适应布局。
• 一个网站可以包含这三类界面；但一个页面只能属于其中一类。

字体排版

• 避免使用通用字体：不要使用 Arial、Inter、Roboto、系统字体等过于常见的字体
• 选择有辨识度的字体：选择优美、独特且别具一格的字体，例如：
  • 选择有辨识度的展示字体，并搭配精致的正文字体
  • 考虑使用独特的字体组合，提升界面的美感
  • 字体选择应与整体审美方向相符

色彩与主题

• 统一的美感：使用 CSS 变量保持一致性
• 主色搭配点缀色：使用主色搭配鲜明的点缀色，比均匀分布的配色方案更有效
• 主题一致性：根据美学方向选择深色或浅色主题，并确保配色与整体风格相符
• 品牌例外：如果产品已规定品牌配色或排版系统，可以使用相应设计令牌，但须在设计规范中明确说明这一覆盖

动效设计

• 动画策略：使用动画实现视觉效果和微交互
• 技术选择：HTML 项目优先使用纯 CSS 方案；React 项目可以使用 Motion 库
• 高影响时刻：聚焦高影响时刻。精心编排的一次页面加载动画（使用 animation-delay 实现逐步显现）比零散的微交互更能带来愉悦体验
• 交互惊喜：使用滚动触发效果和悬停状态带来惊喜

图标

• ❌ 禁止：表情符号图标：绝不可将表情符号用作图标（🚀、⭐、❤️ 等）
• ✅ 必须：专业图标库：必须使用专业图标库，例如：
  • FontAwesome（大多数项目推荐）
  • Heroicons（适用于 Tailwind CSS 项目）
  • Material Icons
  • Feather Icons
  • Lucide Icons
• 图标一致性：整个项目统一使用同一图标库，以保持视觉一致性
• 图标样式：图标应与整体美学方向和配色相符

网格与断点

绘制组件前先设定尺度。尺度是基础设施，而不是针对每个组件单独做出的决定。

• 最多设置四个断点，并在整个网站中重复使用。绝不要因为“这里显得挤了”就添加断点——对输入它的人来说，这个数字之外毫无意义。
• 统一容器宽度。 两个宽度值并存（自定义的 1200 加上框架默认的 1140）意味着每次修改样式，都得先猜哪个值会生效。
• 按场景选择结构：
  • 说服：使用分栏系统。各区块的卡片数量（8/4/3/2）必须与相同的列数吻合，并共享公约数；如果每个区块都单独使用 repeat(N, 1fr)，那就不算网格。
  • 操作 / 阅读：跳过分栏系统。你需要的是一个容器、65–75ch 的正文行宽，以及固定的列宽比例。行宽是硬性约束；在这里使用列网格属于过度设计。
• 间距取自尺度：以 4 为基数（4/8/12/16/24/32/64），不使用一次性的数值。
• 使用等宽卡片网格前先提出质疑：这些项目真的彼此等价吗？如果上文的文案中已经为其中一些项目命名，那么这个网格就只是框架默认设置，而非经过考虑的决定。

空间构图

先构建网格，再打破网格。没有尺度的打破，只是手动摆放元素。

• 说服：可以采用不对称、重叠、对角流动以及打破网格的元素。打破网格必须有理由——要打破哪条线，以及为什么应该打破它。
• 操作 / 阅读：不要打破网格。重复并非缺点；它能帮助读者形成肌肉记忆。
• 留白：要么足够宽裕，以形成节奏；要么足够紧凑，以承载信息。最糟糕的情况是每个区块的间距都相同——即使 24px 符合尺度，当所有区块的分量都相同时，读者也无处落眼。

背景与视觉细节

• 营造氛围：营造氛围和纵深感，而不是默认使用纯色
• 情境化效果：添加与整体美学相符的情境化效果和纹理
• 创意形式：使用创意形式，例如：
  • 渐变网格
  • 噪点纹理
  • 几何图案
  • 多层透明效果
  • 戏剧化阴影
  • 装饰性边框
  • 自定义光标
  • 颗粒叠加效果

避免千篇一律的 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 on persuade surfaces: Generic centered card layout
// (on Operate and Read surfaces the centered version is correct — the defect there
//  is an undesigned page, not the centering)
<div className="flex items-center justify-center min-h-screen">
  <div className="bg-white rounded-lg shadow-lg p-8">

// ✅ GOOD on persuade surfaces: 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. 布局审查（根据场景判断，而非一概而论）：

   • 说服型：是否使用了不对称或打破常规的设计？能否指出打破了哪条规则，以及原因？
   • 操作型／阅读型：结构是否可预测、密度是否稳定、正文行宽是否在 65–75ch 之间？
   • 所有场景：全站复用的断点是否不超过 4 个？是否采用单一容器宽度？间距是否遵循尺度？

5. 可量化检查（依据量化指标，而非主观感受）：

   • 对比度：正文和占位符文本 ≥4.5:1，大号文本 ≥3:1。在彩色表面上，应从该色相中提取次要文本的色调，而非将其灰化——彩色背景上的灰色会显得浑浊，也无法通过检查。
   • 间距：紧密分组的间距应更小，疏远分组的间距应更大；标题上方的留白应多于下方。查看计算值，而非凭印象判断。
   • 字距：绝不低于 -0.04em；通常 -0.02 到 -0.03em 的效果更好。
   • 浏览器界面：文本选中、光标、滚动条、焦点环、下划线偏移、等宽数字——这些浏览器默认样式不属于任何设计系统。应使用调色板为其设置主题。这是让页面显得经过设计而非拼装而成的最简单信号。
   • 状态：悬停、禁用、加载、错误和空状态是否都经过设计？
   • 溢出：在每个断点使用真实文案进行测试，检查是否存在换行不佳或内容被裁切的情况。

6. 设计规范合规性：

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

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

请记住：你有能力创作非凡的作品。不要有所保留，跳出框架思考并全力践行独特构想，展示真正可以实现的成果。