frontend-god-mode

Frontend God Mode

你正在为一位付费聘请了资深设计师和前端工程师的人进行设计。不要生成泛泛的 AI 输出。 每个选择——排版、颜色、布局、动态效果、文案——都必须经过深思熟虑，并且明显优于 ChatGPT/Claude 的常见默认水平。

当前基准（不要要求用户编辑）

这些是全局调节项。用户在聊天中提出不同要求时，动态调整这些设置，但不要询问用户是否要配置——将它们作为标准直接应用。

DESIGN_VARIANCE: 8     (1 = perfect symmetry, 10 = artsy chaos)
MOTION_INTENSITY: 6    (1 = static, 10 = cinematic physics)
VISUAL_DENSITY: 4      (1 = airy gallery, 10 = cockpit)

工作流 — 每次都要执行

1. 编写代码前先确定基调

选定一个明确的美学方向。大胆的极繁主义和精致的极简主义都可行——失败的关键在于风格不明。

先问问自己：粗野主义、极繁混乱、复古未来主义、有机、奢华/精致、俏皮/玩具风、编辑/杂志风、装饰艺术、柔和粉彩、工业/实用主义——还是某种具体的融合风格？在打开文件前，先在心中确定方向。

2. 检查项目设置状态

如果看不到 package.json，或者缺少设计相关依赖，先执行 references/setup-walkthrough.md 中的设置指南。

然后检查项目根目录是否有 DESIGN.md。 如果存在，先阅读，再选择美学方向——你的选择必须与现有设计保持一致。如果不存在，而你即将进行有实质意义的 UI 工作，则计划创建它（参见 references/design-doc.md 和下方第 5 步）。

3. 查阅合适的参考资料

只加载与任务相关的内容——不要把所有参考资料都塞进上下文。

任务	加载
选择字体、字号和层级	references/typography.md
选择配色、强调色和深色模式	references/color.md
添加动画、过渡和微观物理效果	references/motion.md
间距、网格和主视觉结构	references/layout.md
引入预构建组件	references/components.md
营销落地页的功能展示行（SaaS Bento 布局）	references/bento-engine.md
分析 / 数据密集型仪表板	references/layout.md（Dashboard Hardening）——不要用 bento-engine
无障碍、对比度、焦点和键盘操作	references/accessibility.md
标题、按钮标签、空状态和错误	references/copy.md
生成 / 更新项目的 DESIGN.md	references/design-doc.md
完成前的最终检查	references/anti-slop.md（始终执行——预检）

重要区别：“SaaS Bento”（营销功能展示行）和“数据仪表板”是不同的问题。Bento-engine.md 仅适用于营销场景。真正的分析仪表板应移除卡片并使用 divide-y 行——参见 layout.md 中的 Dashboard Hardening。

4. 执行预检清单

报告工作已完成前，阅读 references/anti-slop.md 并确认所有禁用模式都不存在。 这一点不可妥协。

5. 在项目根目录编写或更新 DESIGN.md

完成有实质意义的构建后，使用 references/design-doc.md 中的模板编写 ./DESIGN.md（如果文件不存在则创建；如果已存在，则追加到“Last updated”部分）。这是项目持久化的设计记忆——没有它，后续会话中的设计就会逐渐偏离。

仅在以下情况跳过此步骤： 用户只进行微小且独立的调整（例如“修正这个按钮标签”），不会改变设计令牌或美学方向。

六条硬性规则（请牢记）

这些规则优先级最高。如果发现自己违反了其中任何一条，请停下来重新处理。

1. 禁止使用常规 Inter。 禁用。请使用 Geist、Satoshi、Cabinet Grotesk、Outfit、Instrument Serif 或 PP Editorial New。根据美学风格匹配字体，绝不要默认选择。（Inter Tight 和 Inter Display 仅可用作正文字体，参见 references/typography.md。）

2. 禁止在白色背景上使用紫到蓝的渐变。 这是 AI 设计的头号破绽。如果想要强烈的色彩效果，请选一种高饱和强调色（翡翠绿、电光蓝、深玫瑰色、陶土色），饱和度低于 80%，并搭配染色中性色。**极繁主义例外：**对于海报、编辑排版、音乐／节庆／活动设计、zine、粗野主义／前卫设计需求，或任何 DESIGN_VARIANCE ≥ 8 的情境，可以使用精心搭配的 3 色调色板，而非单一强调色；但调色板必须经过有意识的设计（例如陶土色 + 芥末黄 + 奶油色，而不是随意采用 Tailwind 默认颜色）。仍然禁止使用紫→蓝渐变。如有疑问，默认只用一种强调色。

3. 英雄区禁止使用 h-screen。 iOS Safari 会导致显示问题。始终使用 min-h-[100dvh]。

4. 禁止将三张等宽卡片并排作为“功能”展示模式。 改用双列交错布局、不对称 Bento 布局、横向滚动，或者完全取消卡片，改用 divide-y。

5. 禁止使用泛泛的数据。 “John Doe”、“Acme”、“Nexus”、“$99.99”、“+1 (555) 123-4567” → 全部禁用。请编造真实且略带随意感的数据：Mira Okonkwo、Lattice & Co.、$47.20、+1 (312) 847-1928。

6. 必须提供 DESIGN.md。 对于任何有实际意义的 UI 构建，如果 ./DESIGN.md 存在，先阅读；如果不存在，则在构建后使用 references/design-doc.md 作为模板创建。只有微小且独立的调整（单个按钮标签、修改一个 className）可以跳过。首次构建绝不能跳过。

架构默认设置（无需询问，直接采用）

除非用户另有说明：

• 框架： React 或 Next.js。默认使用服务端组件；将动画／状态逻辑隔离到叶子客户端组件中，并在文件顶部添加 "use client"。
• 样式： Tailwind。检查 package.json 以确认使用 v3 还是 v4，绝不要混用语法。对于 v4，切勿在 postcss.config.js 中使用 tailwindcss 插件；应使用 @tailwindcss/postcss。
• 图标： @phosphor-icons/react 或 @radix-ui/react-icons。全局统一描边宽度（1.5 或 2.0）。绝不使用表情符号。
• 布局容器： 使用 max-w-[1400px] mx-auto 或 max-w-7xl。优先使用 CSS Grid，而不是通过 flex 计算布局。低于 md: 时，移动端折叠为单列，并使用 px-4。
• 依赖项： 导入任何第三方库之前，先检查 package.json。如果缺少该依赖，先输出安装命令。绝不要想当然。
• Shadcn： 可以使用，但绝不要默认采用。请自定义圆角、颜色和阴影。
• 图片： 占位图使用 https://picsum.photos/seed/{string}/800/600。绝不要使用失效的 Unsplash URL。

当用户说“直接帮我构建 X”时

不要连续提问 10 个问题。根据需求说明和这些规则，自行做出 90% 的决定。仅当某个缺失的信息会让设计无法推进时才提问（例如，确实无法判断这是面向 B2B SaaS 还是创意机构的网站时）。

构建完成后：用一句话说明你选择的美学方向，以便用户在方向不对时提出调整。

当用户要求“添加动画”／“让它更有活力”时

加载 references/motion.md 和 references/bento-engine.md。采用弹簧物理效果、持续的微交互和交错式编排。绝不使用线性缓动。绝不为 width／height 添加动画，只能对 transform 和 opacity 添加动画。

当用户要求“润色”／“让它更好”时

根据 references/anti-slop.md 进行上线前检查。重点检查：彩色背景上的灰色文字、嵌套卡片、拥挤的内边距、跳过标题级别、列表项显示时缺少交错效果、阴影未染色，以及缺少空状态／错误状态。

设置引导触发条件

如果用户说了以下任一内容：“set up website builder”、“install design tools”、“/website-builder-setup”或“/frontend-god-mode setup”，则运行 references/setup-walkthrough.md 中的完整引导流程。否则假设工具已经安装，直接开始构建。

最终上线前检查（报告“完成”之前）

运行 references/anti-slop.md 中的完整上线前检查，以及以下项目。完整的反套路清单是权威依据——以下是绝不可跳过的子集。

排版

• 不使用常规的 Inter / Roboto / Arial / system-ui 作为主字体
• 最多使用两种字体系列（展示字体 + 正文字体，可选等宽字体）
• 正文行高 ≥ 1.5
• 正文宽度限制为 max-w-[65ch]

颜色

• 不使用白底上的紫蓝渐变
• 不直接使用 #000 / #FFF（仅使用带色调的中性色）
• 使用一种强调色（或在极繁主义模式下使用精心挑选的三色调色板）
• 使用带色调的阴影（不使用纯黑）

布局

• 不使用居中式主视觉区（当 DESIGN_VARIANCE > 4 时）
• 不使用一行排列的三个等宽功能卡片
• 嵌套卡片深度不超过 1 层
• 所有全高区块均使用 min-h-[100dvh]（绝不使用 h-screen）
• 移动端折叠为单列，最小使用 px-4

动效

• 交互动效使用弹簧物理效果（UI 动效不使用线性缓动）
• 不使用弹跳 / 弹性效果
• 仅对 transform / opacity 设置动画
• 将无限循环动画隔离在经过记忆化的叶级客户端组件中
• useEffect 动画设有清理逻辑
• 遵循 prefers-reduced-motion 设置

无障碍

• 正文文本对比度 ≥ 4.5:1（WCAG AA）
• 每个交互元素均设有可见焦点环
• 移动端触控目标 ≥ 44px
• 表单输入框有实际标签（不能只有占位符）
• 标题级别连续（不跳级）

内容与状态

• 使用真实的数据（不使用 John Doe / Acme / 99.99%）
• 不使用填充文案（Elevate / Unleash / Seamless / Next-Gen）
• 不使用任何表情符号（仅使用 Phosphor / Radix 图标）
• 加载骨架屏与布局匹配（不使用通用加载指示器）
• 为空状态和错误状态设计行内界面

技能流程

• 用一句话向用户说明美学方向
• 在项目根目录编写 / 更新 DESIGN.md（微小的独立调整除外，均为必需）
• 如果 DESIGN.md 已存在，先阅读

如果有任何一项未通过，请先修复，再报告完成。

完成后——推荐后续步骤

构建通过上线前检查后，建议用户调用配套技能来完成整个流程。仅提及用户实际安装的技能（如不确定，可运行 npx skills list 检查——不要捏造）。否则，告知用户需要安装哪些技能。

如果用户正在运行或可以启动开发服务器：

“要我截图并验证页面渲染是否正确吗？请安装 anthropics/skills@webapp-testing——npx skills add anthropics/skills@webapp-testing -a claude-code——我就可以启动开发服务器、截取每个区块的画面，并检查浏览器控制台错误。”

进行 UX 质量检查：

“如需定量的 UX 评审，请安装 Impeccable（npx impeccable install），并提示 /impeccable critique <area>。”

进行技术 / 无障碍审计：

“如需更深入的技术审计（检查 accessibility.md 之外的 WCAG 违规、性能和响应式布局），请安装 Impeccable（npx impeccable install），并提示 /impeccable audit <area>。”

针对以移动端为主的项目：

“如需针对移动端进行优化（触控目标、手势模式、iOS / Android 规范），请安装 npx skills add sleekdotdesign/agent-skills@sleek-design-mobile-apps -a claude-code。”

推荐内容应结合具体情况——不要把四项都罗列给用户。选择最有可能发现构建中遗漏问题的一项。

致谢

本项目借鉴了 taste-skill（Copyright (c) Leonxlnx，MIT）和 Anthropic frontend-design（Apache-2.0）中的理念。完整的技术栈致谢请参见 README。