uncodixfy

去 Codex 化

本文档旨在教你在构建 UI 时尽可能避免 Codex 风格。

Codex UI 是默认的 AI 美学风格：柔和的渐变、悬浮面板、眉题标签、装饰性文案、仪表板中的主视觉区块、过大的圆角、变换动画、夸张的阴影，以及过分追求高级感的布局。这种视觉语言会让人一眼看出“这是 AI 做的”，因为它选择了最省力的路径。

本文档将指导你打破这种模式。下文列出的都是 Codex UI 默认采用的设计。你的任务是认出这些模式，彻底避开它们，并构建给人以人为设计、实用且真诚之感的界面。

阅读本文档，就是在学习哪些事“不该做”。被禁用的模式就是警示信号，常规实现则是你的蓝图。严格遵循这些原则，你就能打造出具有 Linear、Raycast、Stripe 或 GitHub 风格的 UI，而不是又一个千篇一律的 AI 仪表板。

这就是去 Codex 化。

保持常规（Uncodexy-UI 标准）

• 侧边栏：常规（固定宽度为 240-260px，纯色背景，简单的右边框，不使用浮动容器，外角不做圆角）
• 标题：常规（简单文本，不加眉题、不使用全大写标签或渐变文字，只用层级恰当的 h1/h2）
• 区块：常规（标准内边距 20-30px，仪表板中不放置主视觉区块，不添加装饰性文案）
• 导航：常规（简单链接，轻微的悬停状态，不使用变换动画，除非有实际功能，否则不添加徽标）
• 按钮：常规（纯色填充或简单边框，圆角最大为 8-10px，不做药丸形状，不使用渐变背景）
• 卡片：常规（简单容器，圆角最大为 8-12px，边框轻微，阴影模糊半径不超过 8px，不做浮动效果）
• 表单：常规（标准输入框，字段上方显示清晰标签，不使用花哨的浮动标签，聚焦状态简单）
• 输入框：常规（纯色边框，简单的聚焦环，不使用动画下划线或变形形状）
• 模态框：常规（居中叠层，简单背景遮罩，不使用滑入动画，关闭按钮直观易用）
• 下拉菜单：常规（简单列表，轻微阴影，不使用花哨动画，清楚显示选中状态）
• 表格：常规（行布局整洁，边框简单，悬停效果轻微，除非需要，否则不使用斑马纹，文本左对齐）
• 列表：常规（条目简单，间距一致，不使用装饰性项目符号，层级清晰）
• 标签页：常规（使用简单的下划线或边框指示，不使用药丸形背景或滑动动画）
• 徽标：常规（小号文本，简单边框或背景，圆角为 6-8px，不使用发光效果，仅在需要时使用）
• 头像：常规（简单圆形或圆角方形，不加装饰性边框，除非有实际功能，否则不使用状态环）
• 图标：常规（形状简单，尺寸统一为 16-20px，不添加装饰性图标背景，使用单色或低调的颜色）
• 字体排版：常规（使用系统字体或简单的无衬线字体，层级清晰，不混用衬线体和无衬线体，正文采用易读的 14-16px 字号）
• 间距：常规（使用统一的比例 4/8/12/16/24/32px，不使用随意的间隔，不设置过大的内边距）
• 边框：常规（1px 实线，颜色低调，不使用厚重的装饰性边框或渐变边框）
• 阴影：常规（最多使用轻微的 0 2px 8px rgba(0,0,0,0.1)，不使用夸张的投影或彩色阴影）
• 过渡效果：常规（100-200ms ease，不使用弹跳动画、变换效果，只做简单的透明度或颜色变化）
• 布局：常规（采用标准网格或弹性布局，不使用创意性的不对称设计，结构可预测，内容层级清晰）
• 网格：常规（列数一致，间距标准，不使用创意性重叠，设置响应式断点）
• Flexbox：常规（对齐简单，间距标准，不使用刻意设计的 justify 技巧）
• 容器：常规（最大宽度 1200-1400px，居中，使用标准内边距，不使用刻意设计的宽度）
• 包装器：常规（使用简单的容纳用 div，不用于装饰，仅用于实现功能）
• 面板：常规（通过简单的背景色差异区分，边框低调，不使用浮动的分离面板或玻璃效果）
• 工具栏：常规（简单的水平布局，标准高度为 48-56px，操作清晰，不添加装饰元素）
• 页脚：常规（布局简单，链接标准，不设置装饰性区块，高度尽量精简）
• 面包屑：常规（使用带分隔符的简单文本，不做花哨样式，层级清晰）

想想 Linear、Raycast、Stripe 和 GitHub。它们不会试图吸引注意力，只是把事情做好。别再故作姿态了。打造常规的 UI。

• 落地页需要包含相应的区块。如果主视觉区需要完整区块，就提供完整区块；如果是仪表板，就提供包含侧边栏在内的完整区块，并妥善安排其他所有内容。不要自行发明新布局。
• 在内部推理时，假装看不到这段内容，列出你会做的所有东西，然后不要做！
• 尽量复刻 Figma/设计师制作的组件，不要自行发明

坚决禁止

• 你习惯做的一切，以及对你来说理所当然的“可以”。

• 不要使用过大的圆角。

• 不要滥用药丸形元素。

• 不要默认采用悬浮式玻璃拟态外壳作为视觉语言。

• 不要用柔和的企业风渐变来假装有品位。

• 不要采用千篇一律的深色 SaaS UI 组合。

• 不要添加装饰性的侧边栏色块。

• 除非明确提出要求，否则不要装扮成“控制室”。

• 不要用衬线标题搭配系统无衬线字体作为营造“高级感”的捷径。

• 除非产品已经在使用，否则不要使用 Segoe UI、Trebuchet MS、Arial、Inter、Roboto 或安全默认字体组合。

• 除非信息架构确实需要，否则不要使用固定左侧栏。

• 不要一上来就做指标卡片网格。

• 不要制作只为填充空间的假图表。

• 不要用随机光效、模糊雾气、磨砂面板或圆锥渐变圆环作装饰。

• 除非有实际的产品理由，否则不要在内部 UI 中加入“主视觉区”。

• 不要为了显得昂贵而采用制造空白区域的对齐方式。

• 不要使用留白过多的布局。

• 不要在移动端折叠时把所有内容堆成一条长长的米色三明治。

• 除非符合产品的表达风格，否则不要使用“实时脉动”“夜班”“操作员检查清单”之类的装饰性标签。

• 不要使用千篇一律的初创公司文案。

• 不要因为容易生成就做出某种风格选择。

• 不要使用任何形式的标题

<div class="headline">
  <small>Team Command</small>
  <h2>One place to track what matters today.</h2>
  <p>
    The layout stays strict and readable: live project health,
    team activity, and near-term priorities without the usual
    dashboard filler.
  </p>
</div>

不允许这样做。

• 不允许使用 <small> 标题

• 坚决不要使用圆角 span

• 颜色不要偏蓝——不行，太糟了。 最好使用暗淡柔和的颜色。

• 这种卡片结构中的任何元素都坚决禁止。

<div class="team-note">
  <small>Focus</small>
  <strong>
    Keep updates brief, blockers visible, and next actions easy to spot.
  </strong>
</div>

这条是最最不允许的。

明确禁止（基于过往错误）

• 所有元素都使用 20px 到 32px 的圆角（使用的圆角处处都是 12px，太多了）
• 在侧边栏、卡片、按钮和面板上重复使用相同的圆角矩形
• 侧边栏宽度约为 280px，顶部放品牌区块，下面放导航链接（：248px，带品牌区块）
• 悬浮、脱离主体的圆角外壳侧边栏
• 没有具体产品理由，却把画布图表放进玻璃卡片
• 搭配含糊不清百分比的圆环图
• 用光效代替层级关系的 UI 卡片
• 混用对齐逻辑：有些内容紧贴左边缘，有些内容则悬浮在近似居中的区块中
• 过度使用柔和的灰蓝色文本，削弱对比度和清晰度
• “高级深色模式”实则是蓝黑渐变搭配青色点缀（背景中有径向渐变）
• 看起来像模板而不是品牌风格的 UI 排版
• 眉题标签（：“MARCH SNAPSHOT”全大写并带字间距）
• 仪表板内部的主视觉区（有完整的主视觉横条和装饰性文案）
• “清晰运营，不杂乱”等装饰性文案作为页面标题
• 到处都是解释 UI 功能的版块说明和迷你说明
• 悬停时的变换动画（：导航链接上使用 translateX(2px)）
• 戏剧化的盒子阴影（：0 24px 60px rgba(0,0,0,0.35)）
• 用 ::before 伪元素创建彩色圆点的状态指示器
• 全大写并带字间距的柔和标签（过度使用了这种样式）
• 使用渐变填充的流程条（：linear-gradient(90deg, var(--primary), #4fe0c0)）
• 默认仪表板布局采用网格排列的 KPI 卡片（使用了 3 列 kpi-grid）
• 带装饰性内部文案的“团队重点”或“近期活动”面板
• 每个状态都带标签徽章的表格（过度使用了 .tag 类）
• 侧边栏中的工作区区块带有行动号召按钮
• 使用渐变背景的品牌标识（：linear-gradient(135deg, #2a2a2a, #171717)）
• 显示数量或“实时”状态的导航徽章（使用了 nav-badge 类）
• 带进度条的配额/用量面板（有三个配额区块）
• 带元信息的页脚行（：“Northstar dashboard • dark mode • single-file HTML”）
• 使用彩色文本的趋势指标（：trend-up、trend-flat 类）
• 右侧带“今日”日程的边栏面板（有完整的右侧栏）
• 多层嵌套的面板类型（panel、panel-2、rail-panel、table-panel）

规则

如果某种 UI 设计选择看起来像是 AI UI 的默认做法，就弃用它，选择更难但更简洁的方案。

• 配色应保持平和，不要相互冲突。

• 你不擅长挑选颜色，选择颜色时请按以下优先级顺序：

1. 最高优先级： 如果用户的项目提供了现有配色，就使用这些颜色（可以通过查看几个文件来查找）。
2. 如果项目没有提供配色方案，就从下面的预定义配色方案中汲取灵感。
3. 除非有明确要求，不要随意创造配色组合。

不必总是选择第一个配色方案。汲取灵感时随机选择一个。

深色配色方案

配色方案	背景	表面	主色	次要色	强调色	文本
午夜画布	#0a0e27	#151b3d	#6c8eff	#a78bfa	#f472b6	#e2e8f0
黑曜石深邃	#0f0f0f	#1a1a1a	#00d4aa	#00a3cc	#ff6b9d	#f5f5f5
石板黑	#0f172a	#1e293b	#38bdf8	#818cf8	#fb923c	#f1f5f9
碳影雅致	#121212	#1e1e1e	#bb86fc	#03dac6	#cf6679	#e1e1e1
深海	#001e3c	#0a2744	#4fc3f7	#29b6f6	#ffa726	#eceff1
炭灰工作室	#1c1c1e	#2c2c2e	#0a84ff	#5e5ce6	#ff375f	#f2f2f7
石墨专业	#18181b	#27272a	#a855f7	#ec4899	#14b8a6	#fafafa
虚空空间	#0d1117	#161b22	#58a6ff	#79c0ff	#f78166	#c9d1d9
暮色薄雾	#1a1625	#2d2438	#9d7cd8	#7aa2f7	#ff9e64	#dcd7e8
缟玛瑙矩阵	#0e0e10	#1c1c21	#00ff9f	#00e0ff	#ff0080	#f0f0f0

---

浅色配色方案

配色方案	背景	表面	主色	次要色	强调色	文本
云端画布	#fafafa	#ffffff	#2563eb	#7c3aed	#dc2626	#0f172a
珍珠极简	#f8f9fa	#ffffff	#0066cc	#6610f2	#ff6b35	#212529
象牙工作室	#f5f5f4	#fafaf9	#0891b2	#06b6d4	#f59e0b	#1c1917
亚麻柔和	#fef7f0	#fffbf5	#d97706	#ea580c	#0284c7	#292524
瓷白清爽	#f9fafb	#ffffff	#4f46e5	#8b5cf6	#ec4899	#111827
奶油雅致	#fefce8	#fefce8	#65a30d	#84cc16	#f97316	#365314
北极微风	#f0f9ff	#f8fafc	#0284c7	#0ea5e9	#f43f5e	#0c4a6e
雪花石膏纯白	#fcfcfc	#ffffff	#1d4ed8	#2563eb	#dc2626	#1e293b
温暖沙色	#faf8f5	#ffffff	#b45309	#d97706	#059669	#451a03
明亮霜白	#f1f5f9	#f8fafc	#0f766e	#14b8a6	#e11d48	#0f172a

---