frontend-design

前端设计技能

八种锚点。每种都代表独特的审美领域，并锁定特定的 CSS 令牌。每份设计简报选择一种，并匹配其令牌。

追求意想不到的效果。忠于锚点。严守内容规范。不留任何默认项。

---

1. 如何开展工作

编写代码之前，按以下顺序执行：

1. 背景 — 明确目的、受众、领域和内容密度。用一句话说明问题。
2. 锚点 — 选择一种，并倾向于出人意料的搭配。瑞士风格的朋克唱片公司、工业风格的花店、粗野主义风格的奢华制表商、极光风格的税务应用、混沌风格的律师事务所、复古未来主义风格的婚礼摄影师、有机风格的交易终端、低保真风格的豪华酒店——每种都比稳妥的对应方案更具辨识度。稳妥的搭配会产生平庸的作品。意外感体现在表层——也就是初次浏览者看到的东西。不要因为“用户都是技术人员”或“这其实是数据工具”，就让每份简报都走工业风格。用一行说明你的选择和理由。
3. 差异化特色 — 定义一个令人难忘、且属于该锚点的设计手法：标志性交互、字体处理、布局母题或材质处理。用一句话描述，并确保它在渲染结果中清晰可见。
4. 系统 — 严格匹配所选锚点的令牌。选择瑞士风格就意味着白色 + 无衬线字体 + 网格，而不是“某种简洁风格”。
5. 实现 — 先规划结构，再着手构建。屏幕上的内容必须遵循 §2 中的规范编写——不可捏造、不可填充，也不可用主题化文案替换标准 UI 文案。

全力贯彻一种锚点。混搭（“瑞士风格加粗野主义气质”）属于类别错误——每种风格的构造都决定了它会排斥其他风格。

---

2. 内容不是设计

设计指视觉元素——配色、字体、结构、纹理。**内容——屏幕上的每一段字符串、每一个数字和每一个标签——都应单独撰写，并遵循自身规范。**令牌忠实度不能成为内容草率的借口。

规则：屏幕上的每一段字符串，都必须是产品中的真实信息名称，或是清楚说明自身用途的内容——标题、按钮标签、法律条款、表单字段名称，或一看就知道是示例的样例数据。禁止让内容冒充其他东西。

禁止：

• 伪装成真实数据的捏造内容。 虚构会话用户（[email protected]）、虚假遥测数据（GRID.FREQ 59.998 Hz、BUILD 8.2.0-rc3）。如果某个位置没有真实内容，就留空——不要为了让界面显得生动而捏造内容。
• 填充标签。 无人要求的全大写等宽字体副标题（登录页标题下的 SECURE OPERATOR AUTHENTICATION）、假装是代码注释的 // 前缀引导语（// INTELLIGENCE LAYER）。如果删掉这段字符串并不会丢失任何信息，那它就是填充内容。
• 用主题化文案替换标准 UI 文案。 用 Authenticate Session 替代 Next；用 Remember this operator 替代 Remember me。标准操作使用标准文案。主题化文案会增加使用成本，必须以实际效用来抵偿。
• 用 Unicode 字符代替图标。 ▣ Dashboard、◊ Market Navigator。要么使用真正的图标集，要么什么也不放。ASCII 艺术不是图标设计。
• AI 式劣质文风。 模型能认出这种风格。严肃界面上的矫饰副文案（Ask the grid.）、日常 B2B 界面上的合成科幻状态栏、假装具有结构意义的装饰性“接缝”或“榫接”修饰。审视自己的输出；在审核者指出之前删掉这些内容。

---

3. 八种锚点

每种锚点都会锁定特定的 CSS 令牌。选择锚点就意味着承诺使用对应的令牌。如果渲染结果偏离这些令牌，就说明锚点没有贯彻到底。

1. 瑞士风格

表面： 纯白色 #FFFFFF 或中性灰白色 #F7F7F8。字体： Akzidenz-Grotesk、Helvetica Neue 或 Söhne——标题和正文均使用无衬线字体，且只用一个字体系列。强调色： 瑞士红 #E4002B、国际橙 #FF4F00 或伊夫·克莱因蓝 #002FA7——只选一种，并刻意使用。结构： 可见网格线或 1 px 细线。文字左对齐，采用非对称平衡。将数字作为构图元素（日期、页码、页面标记均使用窄体无衬线字体）。

以下情况会破坏风格： 出现暖色纸张、衬线标题字体、颗粒纹理或居中文字。

2. 工业风格

表面： 漆黑 #000000 或暖黑色 #0B0C0A。字体： IBM Plex Mono、JetBrains Mono 或 Berkeley Mono——标题和正文均使用等宽字体。信号色： 选择一种语义色——绿色 #00E676、红色 #FF3B30、琥珀色 #FFB800 或酸橙绿 #C6FF4A。结构： 扁平；使用 1 px 边框代替阴影。通过 font-variant-numeric: tabular-nums 使用等宽数字。

以下情况会破坏风格： 出现衬线字体、比例字体、暖色纸张、任何颗粒纹理、装饰性阴影或圆角。

3. 野兽派风格

表面： 纯正色或反正色——#FF0000、#0000FF、#FFFF00、#000000、#FFFFFF。选择 2–3 种，让它们平分秋色。字体： 只用系统字体——Times New Roman、Helvetica、Courier、Arial、system-ui。刻意混搭字体。阴影： 硬边偏移，无模糊——box-shadow: 8px 8px 0 #000。控件： 使用浏览器原生样式——未经样式化的 <button>、默认样式的 <select>，以及保持蓝色的蓝色下划线链接。大幅压缩边距，文字延伸至边缘。

以下情况会破坏风格： 出现网络字体、超出纯正色范围的精调十六进制颜色、柔和阴影、圆角或居中布局。

4. 极光繁复主义

表面： 深色高饱和度渐变——使用 linear-gradient 或 conic-gradient，从紫色 #5D34D0 过渡至洋红色 #FF006E，再到青色 #00F0FF；也可使用 #3B82F6 → #A855F7 → #EC4899。字体： Inter Variable、PP Neue Machina 或 Sharp Grotesk，用于超大标题（15–25 vw）。纹理： 将网格渐变作为主要表面特征；在强调元素上使用霓虹 text-shadow 光晕（0 0 20px <accent>）。动态效果： 弹簧物理动效编排、滚动联动视差。

以下情况会破坏风格： 出现纯色背景、暖色纸张、克制设计，或将细线作为主要结构。

5. 混乱繁复主义

表面： 冲突的配色——在同一构图中同时使用柔和粉彩色和霓虹色。亮粉色 #FF71CE + 酸黄色 #DFFF00 + 青色 #00FFFF + 任意第三种颜色。字体： 刻意混搭相互冲突的字体——同一页面使用 3 种以上不同类型的字体。纹理： 每个表面都添加图案（曲线、圆点、锯齿、棋盘格——使用 SVG 或 repeating-linear-gradient）。超大标题与繁杂背景相互碰撞。

以下情况会破坏风格： 出现协调统一的配色、单一字体、作为结构元素的留白，或 60/30/10 主次比例。

6. 复古未来主义

表面： 漆黑 #0A0014 或深海军蓝黑。字体： 使用符合特定年代的字体——VT323（CRT）、Orbitron（合成波）、Space Mono（赛博朋克）、Monoton（迈阿密霓虹）、Press Start 2P（街机）、IBM Plex Mono（终端）。强调色： 一对霓虹色——洋红色 #FF006E + 青色 #00FFFF（合成波），或荧光绿 #00FF41 + 琥珀色 #FFB000（终端）。纹理： 通过 ::before 和 repeating-linear-gradient 叠加 CRT 扫描线，或使用色差效果（text-shadow: 2px 0 #FF0000, -2px 0 #00FFFF），也可两者兼用。坚定地使用辉光效果。

以下情况会破坏风格： 出现扁平设计、现代无衬线字体（Inter、Söhne）、纸张表面，或缺少纹理。

7. 有机

表面： 大地色系——鼠尾草绿 #8B9D83、陶土色 #B08B6E、赤陶色 #C66B3D、赭黄色 #C08E3A、苔绿色 #606C38。需要浅色表面时：沙色 #E8DCC7 或燕麦色 #D4B895。绝不使用奶油色 #F0-F8 暖纸色范围。 字体排印： 人文主义衬线字体（Freight、Caslon、Fraunces——Fraunces 仅限此风格使用），或温暖的几何无衬线字体（Greycliff、Epilogue、Recoleta）。结构： 圆角 16–32 px。纹理： 通过 SVG feTurbulence 添加 1–3 % 的颗粒感。动效： 300–500 ms 的柔和缓动，主视觉元素采用呼吸动画。

出现以下情况时即告失效： 出现奶油色背景（暖调 #F0+）、冷灰色、纯白、纯黑或硬直角矩形。

8. 低保真

表面： 纸张黄 #E8E0C0 或 #EDE4CF——饱和度高于奶油色。字体排印： 同一页面混用系统字体（Times、Helvetica 和 Courier 刻意碰撞）。结构： 元素旋转（通过 transform: rotate 偏离网格 2–8°）。纹理： 图像上使用半色调圆点过渡（SVG 图案或 radial-gradient 平铺）；模拟 Risograph 套印错位（通过 text-shadow: 3px 0 #FF006E, -3px 0 #00FFCC 让 RGB 色道偏移 2–4 px）。使用 SVG 订书钉、胶带、撕边元素。

出现以下情况时即告失效： 出现精准排版、单一字体、平滑动效、与网格对齐的矩形，或奶油色（表面必须是饱和度更高的纸张黄）。

---

4. 输出

每次实现都必须包含：

• 明确的设计方向——在代码前以设计师的口吻简短说明所选风格、为何选择这种搭配而非稳妥方案、差异化亮点，以及从该风格中提取的关键配色、字体和纹理选择。语气要坚定，不要写成清单。
• 设计 Token 忠实度——渲染后的 CSS 必须与所选风格的设计 Token 完全一致。若选择 Swiss，CSS 中不得出现暖纸色、Fraunces 或颗粒感。若选择 Industrial，声明的所有字体都必须是等宽字体。设计 Token 漂移意味着未能坚持所选风格。
• 内容规范——屏幕上的每个字符串、数字和标签都必须传达真实信息，或是明确知道自身定位的创作内容。不得捏造数据、使用填充标签、用主题化文案替代标准 UI 文案，也不得使用 Unicode 字形图标。仅做到设计 Token 忠实还不够；内容也必须经得起检验。
• 差异化亮点清晰可见——在渲染结果中实现那一个令人难忘的设计手法，而不只是描述它。

---

5. 发布前检查

• 出乎意料的搭配——设计选择是否营造了创意张力，还是退回了稳妥搭配？
• 设计 Token 忠实度——每个渲染出来的 Token 是否都处于所选风格允许的范围内？若出现该风格不允许的 Token，就说明未能坚持所选风格。
• 内容规范——每个标签是否都指向真实信息；标准操作是否使用标准 UI 文案；是否没有捏造内容、填充用的全大写等宽字体、// 引导语、Unicode 字形图标、矫饰的辅助文案或 AI 腔调？如有，删掉。
• 差异化亮点清晰可见——是否实际渲染了该风格中令人难忘的设计手法？
• 抵制混搭——是否坚持了一种风格，还是偏离成了“带有 Brutalist 边缘的 Swiss”？