cleanui

CleanUI — AI UI 设计规范技能

停下。在编写任何 UI 代码之前，请先阅读此文件。

你是一个 AI 代码生成器，根深蒂固的 UI 习惯会产出一眼就能看出是「AI 风格」的内容。此技能旨在纠正这些习惯，生成专业、由人设计的界面。

每项 UI 任务的工作流程：

1. 想想你通常会生成什么内容
2. 根据下方的严格禁用清单检查每个元素
3. 将所有违规项替换为指定的替代方案
4. 然后再编写代码

---

严格禁用清单 — 自动判定不合格的模式

如果输出中包含以下任意一项，请停下来，在返回代码前修正。

字体排版

• 禁止： font-extrabold（800）、font-black（900）、fontWeight: "800"、fontWeight: "900"
• 改用： 最多使用 font-bold（700）。章节标题使用 font-semibold（600）。
• 自检： 搜索代码中的 "extrabold" 和 "black"。全部替换为 "bold"。

Logo / 信任栏

• 禁止： 将公司名称以完全相同的纯文本放在样式相同的边框胶囊或方框中
• 改用： 让每个 Logo 在视觉上各不相同——为图标搭配名称、使用不同的字重／斜体／字距，或使用 SVG Logo
• 自检： 所有 Logo 看起来都一样吗？请修正。

大写字母 / 字距

• 禁止： 使用 tracking-[0.18em]、tracking-[0.2em]、tracking-[0.24em] 或任何自定义的大字距
• 禁止： 整个页面上带字距的大写标签超过 2 个
• 改用： 使用句式大小写。如需大写，最多使用 tracking-wider（0.05em）。

眉题徽标

• 禁止： 在主标题上方放置重复表达主标题内容的装饰性胶囊／徽标（例如「面向内容团队的 AI 写作系统」）
• 改用： 完全移除，或使用真实信息：「现已推出测试版」「受到 2,400 个团队信赖」「提供免费套餐」

主视觉标题

• 禁止： 桌面端标题换行达到 4 行或更多
• 改用： 使用 4–8 个词，最多 2 行。缩短措辞。
• 禁止： 副标题超过 2 句话
• 改用： 最多使用 1–2 个简短句子。

装饰性文案

• 禁止： 使用「实时脉搏」「夜班」「清晰运营，不受杂乱干扰」等装饰性标签
• 改用： 使用真实数据（状态、数量、日期），否则完全移除。每个标签都必须有实际作用。

阴影

• 禁止： 卡片使用 shadow-xl、shadow-2xl，或模糊半径超过 8px
• 改用： 使用 shadow-sm 或 shadow-none，搭配低调的边框。

圆角

• 禁止： 随意混用 rounded-md、rounded-xl、rounded-2xl、rounded-3xl、rounded-[24px]、rounded-[32px]
• 改用： 选择 2–3 种数值。卡片：8–12px。按钮：6–8px（或胶囊形使用 rounded-full）。输入框：6–8px。保持一致。

图标

• 禁止： 使用 Unicode 字符作为图标（↑、↓、◌、⌂、◫）
• 改用： lucide-react（Web）、@expo/vector-icons（React Native）、SF Symbols（iOS）、Material Icons（Android）

文件结构

• 禁止： 将整个应用写在单个文件中
• 改用： 分开存放：屏幕／页面、组件、常量／主题、数据、导航

---

布局规则

根据内容类型匹配布局

内容类型	布局	不要使用
图片／视觉内容（美食、旅行、产品）	横向轮播、图片网格、主视觉图片	纯文本纵向列表
数据／数字（金融、健身、分析）	统计卡片、进度条、指标网格	主视觉图片卡片
信息流（社交、新闻、帖子）	全宽堆叠卡片、无限滚动	带拖动手柄的分区布局
待浏览项目（电商、任务、邮件）	带搜索／筛选功能的纵向列表	主视觉区域
多媒体（流媒体、音乐、播客）	横向滚动内容架（Netflix 风格）	纵向列表
聊天／消息	联系人列表 + 聊天详情	主视觉卡片或统计网格
地图／位置	地图视图 + 底部浮层	标准列表布局

反模板规则

• 绝不要让每个应用都使用相同的布局骨架。 阅读提示词，识别内容类型，并选择合适的布局。
• 绝不要同时使用以下所有元素： 主视觉卡片 + 网格按钮 + 拖动手柄 + 分段控件 + 垂直列表。这就是模板。
• 如果应用以图像为主，就展示实际图像——缩略图、照片——而不只是圆角方块中的图标。
• 使用横向滚动（FlatList horizontal、CSS overflow-x-auto）呈现类别、精选内容和内容栏。AI 生成器对这类布局的使用不足。

---

设计品味

克制用色

• 单色或近乎单色的配色通常比鲜艳多彩的配色更好看。
• 颜色主要用于操作（按钮、链接）、状态（徽章）和突出显示（选中状态）。不要处处用色。
• 深色元素（卡片、分区）只有在代表真实物品（信用卡、媒体播放器、代码块）或营造刻意的视觉节奏时才合理。不能只是为了“增添变化”。

列表项

• 绝不要只用字母首字母作为标识。 使用与类别相对应的图标（餐厅用餐具，交通用公交车，订阅用循环箭头），放在圆角方块中。
• 始终包含元数据：日期／时间、类别、状态。“餐厅”显得不真实；“餐厅 · 5 月 5 日 · 14:28”则显得真实。

筛选器

• 任何包含 5 个或更多项目的列表都应有筛选器或分段控件。
• 分段控件：采用胶囊轨道样式，选中的分段使用实色填充。

操作按钮

• 无边框样式通常更简洁：图标置于柔和背景色方块中，标签放在下方。不需要卡片容器、阴影或边框。

---

移动端规则

有关完整的 iOS 调色板、Android Material 3 设计令牌、组件指南和代码示例，请参阅 移动端模式参考。

所有平台

• 使用真正的导航库，不要使用基于自定义 View 的导航栏。React Native：@react-navigation/bottom-tabs。iOS：TabView。Android：Material NavigationBar。
• 绝不要构建悬浮的胶囊形底部导航栏。 不要使用 position: absolute、borderRadius: 28 或深色悬浮胶囊。
• 在 React Native 中使用 Platform.select() 或 Platform.OS 实现条件样式。
• 在常量文件中定义设计令牌（颜色、间距、圆角、字体排版）。
• 处理每个屏幕的 3 种状态：加载（骨架屏）、内容、空状态。

iOS

• 安静、柔和、有质感。用色克制。使用系统字体（SF Pro）。使用语义颜色（.label、.secondaryLabel、.systemBackground）。导航栏／标签栏使用半透明效果。使用 listStyle(.insetGrouped)。图标使用 SF Symbols。使用极细分隔线。圆角：10–12。不要使用厚重阴影——改用背景对比。

Android（Material 3）

• 结构清晰、大胆、有表现力。使用 material3 中的 Material 组件。使用色调表面（tonalElevation），而非投影阴影。使用带有 TopAppBar 和 NavigationBar 的 Scaffold。列表行使用 ListItem 可组合项。项目之间使用 HorizontalDivider()。卡片圆角：12dp。根据种子颜色生成配色方案。

React Native / Expo

• 通过 Platform.select() 设置平台条件化的颜色、阴影和间距。
• iOS 使用 shadowColor／shadowOpacity／shadowRadius。Android 使用 elevation。
• 不同平台使用不同的背景颜色：iOS #F2F2F7，Android #F9F9FF。
• 不同平台使用不同的主色：iOS #007AFF，Android 使用 Material 种子颜色。

---

网页规则

创意自由与结构

你可以自由选择：调色板、字体、圆角值、品牌个性和背景样式。

必须遵循：分区结构、主视觉内容限制、组件模式、响应式行为。

导航

• 顶部固定，使用 backdrop-blur 和半透明背景
• 左侧放置 Logo，中间放置导航链接，右侧放置 CTA 按钮
• 移动端：汉堡菜单

落地页结构

Hero       → headline + subtitle + 2 CTAs + one trust element
Trust      → logo bar (visually distinct logos)
Features   → 3-column grid with icons + title + description
How it works → 3-step process
Testimonials → avatar + name + role + quote
Pricing    → 2-3 tiers, featured tier visually inverted (dark bg)
CTA        → final call to action
Footer     → link columns + copyright

主视觉区

• 标题 + 简短副标题 + 2 个按钮 + 一个信任背书元素。仅此而已。
• 双栏主视觉区右侧可放置产品模型图／截图。
• 请勿在主视觉区放置统计卡片、包含列表的复杂预览卡片或多段描述。

功能卡片

• 图标容器：至少 48px，并带有淡色背景。不要太小。
• 卡片内边距：宽裕（p-6 至 p-8）。
• 每张卡片都应内容充实——图标 + 标题 + 描述。

定价

• 主推套餐：使用反差样式（深色背景、浅色文字），或加粗边框并添加“最受欢迎”徽标。
• 每张卡片中的 CTA 均占满宽度。

登录

• 双栏布局：品牌面板（左侧，深色）+ 表单（右侧）。
• 社交账号登录选项置于邮箱表单上方。
• 移动端：隐藏品牌面板，显示带有 Logo 的表单。

仪表板

• 侧边栏（240-260px）+ 主内容区。
• 侧边栏：Logo、带图标的导航项、可选的升级卡片。
• 顶栏：搜索 + 通知 + 头像。
• 内容：问候语 → 统计卡片 → 带标签页的筛选列表 → 活动动态。

深色模式

• 背景：非常深的灰色，不要用纯黑色。
• 文字：米白色，不要用纯白色。
• 边框：深灰色。降低色彩饱和度。

---

输出前检查清单

返回代码前，请核对：

字体排版：

• 不得在任何位置使用 font-extrabold 或 font-black
• 最多使用 2 种字重（常规 + 粗体／半粗体）

视觉效果：

• 不得使用 tracking-[0.18em] 或更宽的字距
• 整个页面最多使用 2 个大写标签
• Logo 栏中的项目在视觉上彼此清晰区分
• 卡片不得使用 shadow-xl 或 shadow-2xl
• 圆角保持一致（最多 2-3 种取值）

主视觉区：

• 桌面端标题控制在 2 行以内
• 眉题徽标（如有）应提供新信息，而不是重复标题内容
• 副标题为 1-2 句话，不要写成一段

结构：

• 使用多个文件（屏幕、组件、常量、导航）
• 使用真正的图标库（不要使用 Unicode）
• 使用平台专属样式（React Native）
• 包含加载／空状态

布局：

• 布局应符合内容类型（不要每次都使用相同模板）
• 列表项应包含类别图标 + 元数据
• 包含 5 个或更多项目的列表应提供筛选器