uncodixfy

Uncodixify

本文档旨在教你如何在构建 UI 时尽可能不表现得像 Codex。

Codex UI 是默认的 AI 审美：柔和的渐变、浮动面板、眉标、装饰性文案、仪表盘中的英雄区、过大的圆角、变换动画、戏剧性的阴影，以及过于努力显得高级的布局。这是一种视觉语言，它尖叫着“这是 AI 做的”，因为它遵循了最小阻力的路径。

这份文件是你的指南，用来打破这种模式。下面列出的都是 Codex UI 默认会做的事情。你的任务是识别这些模式，完全避免它们，并构建出感觉像人工设计、功能性强且诚实的界面。

当你阅读本文档时，你是在学习什么不该做。被禁止的模式是你的红旗。正常的实现是你的蓝图。严格遵守它们，你将创建出感觉像 Linear、Raycast、Stripe 或 GitHub 的 UI——而不是另一个通用的 AI 仪表盘。

这就是如何 Uncodixify。

保持正常（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，无弹跳动画，无变换效果，简单透明度/颜色变化）
布局：正常（标准网格/弹性盒，无创意不对称，可预测结构，清晰内容层级）
网格：正常（一致列数，标准间距，无创意重叠，响应式断点）
弹性盒：正常（简单对齐，标准间距，无创意 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>团队命令</small>
  <h2>一个地方追踪今天重要的事。</h2>
  <p>
    布局保持严格和可读：实时项目健康、团队活动和近期优先级，没有通常的仪表盘填充物。
  </p>
</div>

这是不允许的。

<small> 标题不允许
圆角 span 绝对不行
颜色偏向蓝色——不行，不好。 深色柔和颜色最好。
任何这种卡片结构都是绝对不行。

<div class="team-note">
  <small>焦点</small>
  <strong>
    保持更新简短，阻塞项可见，下一步行动易于发现。
  </strong>
</div>

这个是最不行的。

特别禁止（基于错误）

所有元素圆角在 20px 到 32px 之间（某处到处使用 12px - 太多）
在侧边栏、卡片、按钮和面板上重复相同的圆角矩形
侧边栏宽度约 280px，顶部有品牌块，下方有导航链接（某处：248px 带品牌块）
浮动分离侧边栏，带圆角外壳
画布图表放在玻璃卡片中，没有产品特定原因
环形图配模糊百分比
UI 卡片使用发光而非层级
混合对齐逻辑，部分内容靠左，部分内容居中块浮动
过度使用柔和灰蓝色文本，削弱对比度和清晰度
“高级深色模式”实际上意味着蓝黑渐变加青色强调色（某处背景有径向渐变）
UI 排版感觉像模板而非品牌
眉标（某处：“三月快照”大写加字母间距）
仪表盘内的英雄区（某处有完整英雄条带带装饰性文案）
装饰性文案如“无杂乱的运营清晰度”作为页面标题
到处是区块说明和迷你说明解释 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 仪表盘 • 深色模式 • 单文件 HTML”）
带彩色文本的趋势指示器（某处：trend-up, trend-flat 类）
右侧导轨面板带“今日”日程（某处有完整右侧导轨）
多个嵌套面板类型（panel, panel-2, rail-panel, table-panel）

规则

如果一个 UI 选择感觉像默认的 AI UI 动作，禁止它并选择更困难、更干净的选项。

颜色应保持平静，不要冲突。
你不擅长选色，请按以下优先级顺序选择颜色：

最高优先级： 如果用户项目提供了现有颜色，请使用它们（你可以通过阅读几个文件来搜索它们）。
如果项目没有提供调色板，从下面预定义的调色板中获取灵感。
除非明确要求，否则不要发明随机颜色组合。

你不必总是选择第一个调色板。在获取灵感时随机选择一个。

深色配色方案

调色板	背景	表面	主色	次要色	强调色	文本
午夜画布	`#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`

你可能还喜欢

fix

247Kfrontend

Use when you have lint errors, formatting issues, or before committing code to ensure it passes CI.

facebook

获取

motion-advanced

237Kfrontend

Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree. Requires motion-foundations.

affaan-m

获取

next-cache-components-adoption

141Kfrontend

在 Next.js 应用中开启缓存组件，并解决由此暴露的阻塞路由。当用户想要启用、采用或迁移到缓存组件、翻转 `cacheComponents` 标志、处理大量 blocking-prerender / instant 验证错误、运行 `cache-components-instant-false` codemod，或决定是使用 `export const instant = false` 将路由排除在验证之外还是原地修复时使用。