CleanUI — AI UI设计强制规范技能
停。在编写任何UI代码之前，请阅读此文件。
你是一个AI代码生成器，具有根深蒂固的UI习惯，会生成可识别的“AI风格”输出。此技能旨在覆盖这些习惯，生成专业、人类设计的界面。
每个UI任务的处理流程：
- 思考你会通常生成的内容
- 对照下方的硬性禁止项列表检查每个元素
- 将所有违规项替换为指定的替代方案
- 然后才编写代码
硬性禁止项列表 —— 自动失败模式
如果你的输出中包含以下任何一项，请停止并修复后再返回代码。
字体
- 禁止：
font-extrabold(800)，font-black(900)，fontWeight: "800"，fontWeight: "900" - 改用： 最大
font-bold(700)。章节标题使用font-semibold(600)。 - 自查： 在代码中搜索“extrabold”和“black”，全部替换为“bold”。
Logo / 信任标志栏
- 禁止： 将公司名称显示为相同的纯文本，放在相同的带边框的药丸/方框中
- 改用： 让每个logo视觉上与众不同——将图标与名称配对，为每个logo改变字重/斜体/字间距，或使用SVG logo
- 自查： 所有logo看起来是否完全相同？修复它。
大写 / 字间距
- 禁止：
tracking-[0.18em]，tracking-[0.2em]，tracking-[0.24em]或任何自定义宽字间距 - 禁止： 整个页面上超过2个大写带字间距的标签
- 改用： 句子大小写。如果需要大写，最大使用
tracking-wider(0.05em)。
眉部徽章
- 禁止： 在标题上方装饰性药丸/徽章，重复标题内容（例如，“面向内容团队的AI写作系统”）
- 改用： 完全移除，或使用事实信息：“现处于Beta版”，“受2400个团队信赖”，“提供免费套餐”
首屏标题
- 禁止： 在桌面上折合成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， CSSoverflow-x-auto）。AI生成器不常用这些。
设计品味
色彩克制
- 单色或近单色调色板通常看起来比彩色更好。
- 颜色主要应出现在操作（按钮、链接）、状态（徽章）和高亮（选中状态）中。不要用在所有地方。
- 深色元素（卡片、部分区域）仅在表示真实物体（信用卡、媒体播放器、代码块）或创建有意的视觉节奏时才合理。而不是仅仅“为了变化”。
列表项
- 永远不要仅使用字母首字母作为标识符。 在圆角方块中使用特定类别的图标（餐厅用餐具，交通用巴士，订阅用重复图标）。
- 始终包含元数据：日期/时间、类别、状态。“餐厅”感觉很假。“餐厅 · 5月5日 · 14:28”感觉很真实。
过滤器
- 任何包含5个以上项目的列表都应带有过滤器或分段控件。
- 分段控件：药丸轨道样式，选中段实心填充。
操作按钮
- 无边框样式通常看起来更简洁：图标放在浅色背景的方块中，下方配标签。无需卡片包裹、阴影或边框。
移动端规则
完整iOS调色板、Android Material 3标记、组件指南及代码示例请参见 移动端模式参考。
所有平台
- 使用真实导航库，而非自定义基于View的导航栏。React Native：
@react-navigation/bottom-tabs。iOS：TabView。Android：MaterialNavigationBar。 - 永远不要构建浮动的药丸形底部导航栏。 不使用
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）代替投影。Scaffold配合TopAppBar+NavigationBar。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，中间导航链接，右侧行动号召按钮
- 移动端：汉堡菜单
落地页结构
首屏 → 标题 + 副标题 + 2个行动号召按钮 + 一个信任元素
信任 → 标志栏（视觉上各异的标志）
功能 → 三列网格，包含图标 + 标题 + 描述
运作方式 → 三步流程
用户评价 → 头像 + 姓名 + 角色 + 引用
定价 → 2-3个套餐，推荐套餐视觉反转（深色背景）
行动号召 → 最终行动号召
页脚 → 链接列 + 版权信息
首屏
- 标题 + 简短副标题 + 2个按钮 + 一个信任元素。仅此而已。
- 两列首屏右侧的产品示意图/截图没问题。
- 不要在首屏中放置统计卡片、带有列表的复杂预览卡片或多段落描述。
功能卡片
- 图标容器：至少48px，带有浅色调背景。不要太小。
- 卡片内边距：大方（p-6到p-8）。
- 每张卡片应感觉完整——图标 + 标题 + 描述。
定价
- 推荐套餐：反色（深色背景，浅色文字）或更粗边框 + “最受欢迎”徽章。
- 每个卡片内全宽行动号召按钮。
登录
- 两列：品牌面板（左侧，深色）+ 表单（右侧）。
- 社交登录位于邮箱表单上方。
- 移动端：隐藏品牌面板，显示带有Logo的表单。
仪表板
- 侧边栏（240-260px）+ 主内容区域。
- 侧边栏：Logo、带图标的导航项、可选升级卡片。
- 顶部栏：搜索 + 通知 + 头像。
- 内容：问候语 → 统计卡片 → 带选项卡的过滤列表 → 活动信息流。
暗色模式
- 背景：非常深的灰色，非纯黑。
- 文字：米白色，非纯白。
- 边框：深灰色。降低色彩饱和度。
输出前检查清单
在返回代码前，请验证：
字体：
- 任何地方都没有
font-extrabold或font-black - 最多使用2个字重（常规 + 粗体/半粗体）
视觉：
- 没有
tracking-[0.18em]或更宽 - 整个页面最多2个大写标签
- 标志栏中的项目视觉上彼此不同
- 卡片上没有
shadow-xl或shadow-2xl - 边框圆角一致（最多2-3个值）
首屏：
- 标题在桌面上适应2行
- 眉部徽章（如有）添加新信息，不重复标题
- 副标题为1-2句，非段落
结构：
- 多个文件（屏幕、组件、常量、导航）
- 使用真实图标库（非Unicode）
- 平台特定样式（React Native）
- 存在加载/空状态
布局：
- 布局与内容类型匹配（不是每次相同的模板）
- 列表项具有类别图标 + 元数据
- 包含5个以上项目的列表具有过滤器