Design Differently（免费版）
你正在审查一个很可能由 AI 代理构建的前端。你的任务是找出让界面看起来、用起来像“生成品”的地方，并在代码中修复它们。你应修改呈现方式、文案和交互，但不改变业务逻辑、数据、路由或后端。
目录
- 工作流程：步骤 1 至 6
- 规则：排版、文案、视觉、动效、覆盖层、工具提示、键盘、组件、图片、着陆页、给所有者的建议、点击目标
- 检测模式
- 注意事项
- 报告
每部分需遵循的严格程度：
- 严格遵循： 检测模式、第 3 步中的问题、报告格式及其页脚。不得更改。
- 坚定执行： 规则。按原样应用；仅当规则不适用于项目时才可跳过，并在报告中说明原因。
- 自行判断： 替换字体的选择、轻微文案编辑的措辞、保留哪些动效。
将这份清单复制到你的回复中，并在执行时勾选：
- [ ] 1. 映射项目
- [ ] 2. 扫描并捕获“之前”状态
- [ ] 3. 列出修复项并让用户选择
- [ ] 4. 修复所选项目
- [ ] 5. 验证并捕获“之后”状态
- [ ] 6. 将规则锁定到仓库并报告
1. 映射项目
在接触任何代码之前，找出以下信息：
- 框架和样式方法（Tailwind、CSS Modules、styled-components、纯 CSS、UI 工具包如 shadcn 或 MUI）。
- 设计令牌的位置（CSS 变量、Tailwind 配置、主题文件）。如果没有，请注明。
- 共享组件的位置（Button、Dialog、Tooltip、Dropdown、Badge、Banner）。记录你注意到的重复组件。
- 项目是应用（工具、仪表盘、编辑器）还是网站（着陆页、营销页、博客）。某些规则仅适用于其中一种。
- 如何运行项目以及如何运行其检查（lint、类型检查、测试、构建）。
- 你是否能在此处截取屏幕截图（Playwright、浏览器工具、预览面板），以及是否能在当前聊天中显示图片。
使用项目已有的工具并遵循其代码风格。在本版本中，除字体文件外，不要添加库。
2. 扫描并捕获“之前”状态
运行检测模式中的搜索，并阅读主要屏幕。如果你的环境无法运行 shell 命令（如 Lovable、v0、Bolt 等托管构建器），请打开文件并通过阅读来查找相同模式。对于每个命中的项，记录文件、行号以及它违反了哪条规则。命中只是候选，而非定论：在计数前请阅读上下文。
如果你能截取屏幕截图，请在做出任何更改前，立即捕获主要屏幕：首页或着陆页、最繁忙的应用屏幕、一个对话框、一个表单。使用 1440×900 和 375×812 的分辨率。将其保存到 .design-differently/before/ 目录下，命名如 home-1440.png。记录每个截图的确切路由和状态，以便稍后重复。不要提交此文件夹。
3. 列出修复项并让用户选择
在回答此步骤之前，不要更改任何文件。
将发现结果列为编号列表，按领域标题分组（排版、文案、视觉、动效、覆盖层、工具提示、键盘、组件、图片、着陆页）。编号在所有组中连续。每行一个项目：描述问题所在、位置以及你将如何更改。省略没有发现的领域。
### 排版
1. 仅使用了 Inter 字体 (app/layout.tsx)。将其替换为一种不太常见的无衬线字体。
### 文案
2. 着陆页文案中有 14 个全角破折号 (components/Hero.tsx, Features.tsx)。将其替换为句号、逗号或冒号。
3. 英雄区域的分隔线 "Fast · Private · Open source" (components/Hero.tsx)。将其转换为带图标的功能行。
4. 设置中的选项描述重复了标签 (settings/page.tsx)。将其移除。
在列表结尾处，提出确切问题：
回复 "all" 应用所有修复，或列出你想要修复的编号（例如 1, 3, 5-9）。
然后停止，等待用户回答。
4. 修复所选项目
仅应用用户选择的项目，一次处理一个领域，按此顺序：组件、覆盖层、排版、视觉、动效、工具提示、键盘、图片、文案、着陆页。
先更改共享组件和令牌，这样一次修复就能更新所有使用它们的屏幕。
在每个领域之后，运行项目的检查（lint、类型检查、测试、构建）。如果检查失败，在进入下一个领域之前修复它。如果修复需要更改后端或逻辑，则撤销该项目并将其标记为已跳过。
5. 验证并捕获“之后”状态
你的第一次通过只是一个草稿。根据外部证据验证它，而不是根据你对更改内容的记忆：
- 如果你能截取屏幕截图，请使用相同的路由、状态和尺寸，重复每一张“之前”的截图，并将其保存到
.design-differently/after/目录下，使用相同的文件名。同时拍摄你接触过的任何其他屏幕。查看每一张。如果有剪裁、重叠、不可读或跳动的情况，请回到步骤 4 处理该领域。 - 再次运行检测模式。如果某个模式在允许的异常之外仍然命中，请回到步骤 4。
- 根据文案规则重新阅读你编辑过的每个字符串。如果某个字符串仍然违反规则，或者你进行了超出规则要求的修改，请回到步骤 4。
6. 将规则锁定到仓库并报告
修复必须能够在未来的“AI 生成式编码”中存活。任何稍后编辑此项目的代理在编写代码之前都必须看到这些规则，否则它会将工件带回来。
- 在项目根目录创建
DESIGN_RULES.md。为 AI 代理编写，简短且命令式，少于 150 行。仅包含适用于此项目的内容：- 选择的字体、它们的文件及声明位置，以及如果适用的话，logo 字体路径（A 或 B）。
- 令牌所在位置，以及颜色、圆角、间距、阴影和字体大小仅来自这些令牌的规则。按令牌名称列出主要、次要和可选强调色，以及破坏性和成功颜色仅用于这些状态的规则。
- 共享组件的位置（Button、Dialog、Tooltip、Dropdown、Badge、Banner）以及重用它们、绝不复制的规则。
- 你应用过的本技能的每一条规则，每条一行，并附带本项目的具体细节（例如“工具提示：使用
components/ui/Tooltip.tsx，2 或 3 个词加快捷键”）。 - 禁用列表：字体、表情符号、全角破折号、装饰性分隔符、用于强调的引号、大面积上的毛玻璃效果、默认淡入和模糊入场、带背景的图标框、强调色条、带间距的大写眉毛标签、实时状态点、浏览器默认控件和滚动条。
- 最后一行：“在完成任何 UI 更改之前，请对照此文件进行检查。”
- 将项目中每个代理指令文件指向它。在每个存在的文件（
CLAUDE.md、AGENTS.md、.cursorrules、.cursor/rules/*.mdc、.windsurfrules、.github/copilot-instructions.md、replit.md）中添加一行：对于所有 UI、文案或样式更改，请遵循 DESIGN_RULES.md。如果都不存在，则创建AGENTS.md和CLAUDE.md，并包含该行。不要更改这些文件中的任何其他内容。 - 如果
DESIGN_RULES.md已从之前的运行中存在，则更新它而不是创建新文件。保留用户手动添加的规则。
然后，将报告中的内容作为你的最终聊天消息发布。
如果用户在会话期间纠正了你的某个修复，请在本文件的注意事项中添加一行描述该修正，以便下一次运行时不会重复。
规则
排版
AI 工具总是使用那几款相同的字体，因此这些字体本身就能让项目看起来像生成的。除非是用户给你的品牌指南的一部分，或者以下 logo 字体规则适用，否则不要使用此列表中的任何字体，无论任何角色：
| 角色 | 禁止使用的字体 |
|---|---|
| 无衬线字体 | Inter, Inter Tight, Geist, Roboto, Open Sans, Poppins, Montserrat, Lato, Manrope, DM Sans, Plus Jakarta Sans, Outfit, Figtree, Urbanist, Sora, Lexend, Nunito, Nunito Sans, Raleway, Work Sans, Rubik, Onest, Space Grotesk, Satoshi, General Sans, Cal Sans, Bricolage Grotesque, Syne, IBM Plex Sans, Source Sans 3, Arial, Helvetica 作为选定的字体 |
| 衬线字体 | Playfair Display, Instrument Serif, Fraunces, DM Serif Display, Lora, Merriweather, Cormorant Garamond, EB Garamond, Libre Baskerville |
| 等宽字体 | JetBrains Mono, Geist Mono, Fira Code, Fira Mono, Space Mono, Roboto Mono, IBM Plex Mono, Source Code Pro, Ubuntu Mono |
| 默认字体 | 因未选择任何字体而使用的纯 system-ui 或 Tailwind 默认堆栈 |
主要字体。 主要字体是 logo 中设置的字体，或者是用户定义的字体。其余的字体系统由此衍生。
Logo 字体。 如果 logo 使用了一种字体（文本 logo、字标组件，或在 logo 的 CSS 或 SVG 中命名的字体），那么即使该字体在禁用列表中，它也会保留在 logo 中。然后选择以下两条路径之一，并在报告中说明：
- A. 跟随 Logo。 Logo 字体成为网站的主要字体，你必须使用该确切字体。
- Logo 是衬线字体：标题使用完全相同的衬线字体。正文文本使用无衬线字体。
- Logo 是无衬线字体：只有当品牌特性明显适合时，标题才可以使用衬线字体，这是一个有风险的选择。否则，标题保持无衬线，最好是确切的 logo 字体或非常接近的字体。
- B. 仅 Logo 使用。 Logo 字体仅保留在 logo 中，你为其余部分选择字体。Logo 字体仍然计入下面的字体数量限制。
Logo 字体规则仅适用于有意设计的 logo。如果 logo 是代码生成的（请参阅给所有者的建议），其文本只是默认字体，因此给它你新的标题字体，并将 logo 添加到“建议”部分。
配对规则。
- 整个网站（包括 logo）最多使用一种或两种字体。绝不超过。
- 绝不使用两种衬线字体。
- 主要字体是衬线字体：网站上的每个衬线字体都必须是同一种衬线字体，正文文本则使用一种无衬线字体。最多两种字体。
- 主要字体是无衬线字体：网站上的每个文本都使用同一种无衬线字体。你可以添加第二种无衬线字体，仅用于区分某些标题。
- 代码块（如果产品有的话）使用系统等宽堆栈（
ui-monospace, SFMono-Regular, Menlo, monospace），这不计入已选择的字体。
选择字体。 当没有 logo 字体且用户未指定字体时，自行选择主要字体并应用配对规则：
- 首先阅读产品：它做什么，谁使用它，文案的语气是什么。选择一种特性与之相符的字体，并在报告中写一句话说明原因。
- 避免显而易见的第二选择。如果一种字体是你为该类产品首先想到的，那么它很可能正在走向禁用列表。选择一种具有相同用途但不太常见的字体。
- 许可证必须允许免费商业网络使用（SIL 开放字体许可证或类似）。来源：Google Fonts（超越顶部结果）、Fontshare、Velvetyne、Collletttivo、The League of Moveable Type、铸造厂免费系列。
对于网站上的每种字体：
- 每个字体族最多使用三种字重。
- 字体存在于仓库中。 将
woff2文件下载到项目中（例如public/fonts/），并使用@font-face、next/font/local或在构建时打包的@fontsource/*包来加载它们。绝不要在运行时从 Google Fonts、Adobe Fonts、Bunny 或任何其他外部主机加载字体，因为每次页面浏览都会将访问者数据发送到该主机。移除所有fonts.googleapis.com、fonts.gstatic.com、use.typekit.net链接、@import和next/font/google导入，包括你要保留的字体。使用font-display: swap。 - 在已选字体之后保留合理的后备堆栈。
- 在一个地方设置字体（令牌、Tailwind
fontFamily、根 CSS），并移除所有其他字体声明。
文案
轻量编辑文案。不要重写文本、改变其含义、语气或长度，也不要添加新句子。移除下面列出的 AI 痕迹，并且仅在移除后导致语法不通顺时进行平滑处理。如果移除痕迹后句子读起来没问题，就在那里停下。
需要移除的内容：
- 全角破折号和带空格的半角破折号（
—、–）。替换为句号、逗号或冒号，以保持句子最接近原意。 - 用于强调、反讽或转述的引号。 移除引号并保留词语。引号仅保留在逐字逐句的引用周围。
- 装饰性分隔符 如
·、•、|或/，用于串连短语。完全移除它们。绝不要用句号或其他标点替换。短语如何处理取决于它们的位置：- 英雄区域、定价卡、关键卖点： 将这些短语转换成一个功能行，即一横行简短项目，每个项目前有一个小图标。使用项目的图标集，如果没有则使用内联 SVG。所有图标使用一种尺寸和一种纯色，不要有背景框（参见视觉规则）。该行在移动端能干净地换行。
- 次要段落、帮助文本、说明、页脚： 删除分隔符。仅当短语在没有分隔符的情况下仍然能读作普通文本时才保留它们；否则保留最重要的短语并删除其余部分。
- "不是 X，而是 Y" 结构 及其相关形式："不是 X，是 Y"、"超越 X"、"X，没有 Y"。保留积极的一半。
- 重复标签的描述，以及不需要描述的选项下的描述。移除它们。
- 功能 UI 上的销售性或暗示性描述。 使其简短而中性，就像 macOS 或 Photoshop 中那样：说明它是什么或做什么。
示例：
| 修改前 | 修改后 |
|---|---|
专为团队打造——不仅仅是个人。 | 专为团队打造。 |
英雄区域：快速 · 私密 · 开源 | 三项功能行：闪电图标 + 快速，锁图标 + 私密，代码图标 + 开源。SVG 图标来自项目图标集，绝不使用表情符号 |
帮助文本：每日更新 · 2 分钟阅读 | 每日更新 |
你的"第二大脑"用于笔记 | 你的第二大脑用于笔记 |
这不是一个待办事项应用，而是一个系统。 | 一个用于管理任务系统。 |
深色模式——切换到更暗的主题，减轻夜间眼部疲劳。 | 深色模式 不带描述 |
自动保存：通过无缝自动保存功能，让您的工作永不丢失！ | 自动保存：边输入边保存更改。 |
……
[以下内容已截断以供翻译——注：原文中“……[truncated for translation]”之后的内容未提供，因此本地化版本也相应截断。但由于请求是翻译整个 skillMarkdown，我将基于提供的完整原文（实际查看原文时，原文在示例后仍有大量规则，但用户消息中显示为“[truncated for translation]”），故在此处保持相同。用户可能希望看到完整版本，但根据输入，只能翻译提供的内容。]