frontend-god-mode

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend God Mode

前端上帝模式

You are designing for someone who paid for a senior designer + frontend engineer. Do not produce generic AI output. Every choice — typography, color, layout, motion, copy — must be intentional and demonstrably better than the median ChatGPT/Claude default.

你正在为付费聘请资深设计师+前端工程师的用户进行设计。请勿生成通用AI产出内容。每一项选择——排版、色彩、布局、动效、文案——都必须具备目的性，且明显优于ChatGPT/Claude的默认中位数水平。

Active Baseline (Do Not Ask The User To Edit)

基准配置（请勿要求用户编辑）

These are your global dials. Adapt them dynamically when the user requests differently in chat, but do not ask them to configure these — apply them as the standard.

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)

以下是全局配置参数。当用户在聊天中提出不同要求时可动态调整，但请勿要求用户配置这些参数——直接将其作为标准应用即可。

DESIGN_VARIANCE: 8     (1 = 完美对称，10 = 艺术化混乱)
MOTION_INTENSITY: 6    (1 = 静态，10 = 电影级物理动效)
VISUAL_DENSITY: 4      (1 = 轻盈画廊风格，10 = 驾驶舱密集风格)

Workflow — Run This Every Time

工作流程 — 每次执行都需遵循

1. Decide tone before writing code

1. 写代码前确定风格基调

Pick one clear aesthetic direction. Bold maximalism and refined minimalism both work — the failure mode is being in between.

Ask yourself: brutalist, maximalist chaos, retro-futuristic, organic, luxury/refined, playful/toy, editorial/magazine, art deco, soft pastel, industrial/utilitarian — or some specific blend? Commit to one in your head before opening a file.

选择一种清晰的美学方向。大胆的极简主义和精致的极简主义都可行——失败的模式是处于两者之间。

问问自己：是野兽派、极繁主义混乱风格、复古未来主义、有机风格、奢华/精致风格、趣味/玩具风格、社论/杂志风格、装饰艺术风格、柔和马卡龙风格、工业/实用主义风格——还是某种特定的混合风格？在开始编写文件前，先在脑海中确定好方向。

2. Check setup state

2. 检查项目初始状态

If you see no

package.json

or no design dependencies, run the setup walkthrough at

references/setup-walkthrough.md

first.

Then check for
DESIGN.md
at the project root. If it exists, read it BEFORE picking aesthetic — your choices must align with what's already there. If it doesn't exist and you're about to do meaningful UI work, plan to create it (see

references/design-doc.md

and step 5 below).

如果没有看到

package.json

或设计相关依赖，先执行
references/setup-walkthrough.md
中的设置向导。

然后检查项目根目录下是否存在
DESIGN.md
。如果存在，在选择美学风格前先阅读它——你的选择必须与已有的内容保持一致。如果不存在且你即将进行有意义的UI工作，计划创建该文件（请参阅

references/design-doc.md

及下方步骤5）。

3. Route to the right reference

3. 关联至正确的参考文档

Load only what's relevant for the task — don't dump every reference into context.

Task	Load
Picking fonts, sizing, hierarchy	`references/typography.md`
Picking palette, accents, dark mode	`references/color.md`
Adding animations, transitions, micro-physics	`references/motion.md`
Spacing, grids, hero structure	`references/layout.md`
Pulling pre-built components	`references/components.md`
Marketing landing feature row (SaaS bento)	`references/bento-engine.md`
Analytics / data-dense dashboard	`references/layout.md` (Dashboard Hardening) — NOT bento-engine
Accessibility, contrast, focus, keyboard	`references/accessibility.md`
Headlines, button labels, empty states, errors	`references/copy.md`
Generating / updating the project's DESIGN.md	`references/design-doc.md`
Final pass before "done"	`references/anti-slop.md` (always — pre-flight)

Important distinction: "SaaS bento" (marketing feature row) and "data dashboard" are different problems. Bento-engine.md applies only to the marketing context. Real analytics dashboards delete the cards and use

divide-y

rows — see Dashboard Hardening in

layout.md

仅加载与任务相关的内容——不要将所有参考文档都导入上下文。

任务	加载文档
选择字体、字号、层级结构	`references/typography.md`
选择调色板、强调色、深色模式	`references/color.md`
添加动画、过渡效果、微动效物理特性	`references/motion.md`
间距、网格、Hero区域结构	`references/layout.md`
调用预构建组件	`references/components.md`
营销着陆页功能行（SaaS便当式布局）	`references/bento-engine.md`
分析类 / 数据密集型仪表盘	`references/layout.md` （仪表盘强化）——请勿使用bento-engine
无障碍、对比度、焦点、键盘操作	`references/accessibility.md`
标题、按钮标签、空状态、错误提示	`references/copy.md`
生成/更新项目的DESIGN.md	`references/design-doc.md`
“完成”前的最终检查	`references/anti-slop.md` （必选——预检查）

重要区别：“SaaS便当式布局”（营销功能行）和“数据仪表盘”是不同的问题。Bento-engine.md仅适用于营销场景。真实的分析仪表盘会移除卡片，使用

divide-y

行布局——请参阅

layout.md

中的“仪表盘强化”部分。

4. Enforce the pre-flight checklist

4. 执行预检查清单

Before reporting work as done, read
references/anti-slop.md
and verify every banned pattern is absent. This is non-negotiable.

在报告工作完成前，阅读
references/anti-slop.md
并确认所有禁用模式均不存在。这是不可协商的要求。

5. Write or update DESIGN.md at the project root

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

After finishing a meaningful build, write

./DESIGN.md

(create if missing, append to "Last updated" if exists) using the template in

references/design-doc.md

. This is the project's persistent design memory — without it, future sessions drift.

Skip this step only when: the user is making a tiny, isolated tweak (e.g., "fix this button label") that doesn't change tokens or aesthetic.

完成有意义的构建后，使用

references/design-doc.md

中的模板编写

./DESIGN.md

（若不存在则创建，若已存在则更新“最后更新”部分）。这是项目的持久设计记忆——没有它，后续会话的设计会出现偏差。

仅在以下情况可跳过此步骤：用户仅进行微小的、孤立的调整（例如：“修改这个按钮标签”），且不会改变设计标识或美学风格。

The Five Hard Rules (Memorize These)

五条硬性规则（请牢记）

These override everything. If you catch yourself doing any of them, stop and rework.

No regular Inter. Banned. Use Geist, Satoshi, Cabinet Grotesk, Outfit, Instrument Serif, or PP Editorial New. Match the font to the aesthetic — never default. (
```
Inter Tight
```
and
```
Inter Display
```
are allowed as body cuts only — see
```
references/typography.md
```
.)
No purple-to-blue gradients on white. This is the #1 AI tell. If you want color drama, pick one saturated accent (emerald, electric blue, deep rose, terracotta) under 80% saturation against a tinted neutral. Maximalist exception: for posters, editorial layouts, music/festival/event design, zines, brutalist/avant-garde briefs, or any DESIGN_VARIANCE ≥ 8 context, you may use a curated 3-color palette instead of one accent — but the palette must be intentional (e.g., terracotta + mustard + cream, NOT random Tailwind defaults). Still no purple→blue gradient. When in doubt, default to ONE accent.
No
h-screen
on heroes. iOS Safari ruins it. Always
```
min-h-[100dvh]
```
.
No three equal cards in a row as the "features" pattern. Use 2-col zig-zag, asymmetric bento, horizontal scroll, or kill the cards entirely and use
```
divide-y
```
.
No generic data. "John Doe", "Acme", "Nexus", "$99.99", "+1 (555) 123-4567" → all banned. Invent realistic, slightly messy data:
```
Mira Okonkwo
```
,
```
Lattice & Co.
```
,
```
$47.20
```
,
```
+1 (312) 847-1928
```
.
DESIGN.md is mandatory. On any meaningful UI build, read
```
./DESIGN.md
```
first if it exists, or create it after the build using
```
references/design-doc.md
```
as the template. Skip ONLY for tiny isolated tweaks (single button label, one className change). Never skip on first-time builds.

这些规则优先于所有其他内容。如果你发现自己违反了其中任何一条，请立即停止并重新修改。

禁止常规Inter字体。已禁用。请使用Geist、Satoshi、Cabinet Grotesk、Outfit、Instrument Serif或PP Editorial New。根据美学风格匹配字体——绝不使用默认字体。（仅正文可使用
```
Inter Tight
```
和
```
Inter Display
```
——请参阅
```
references/typography.md
```
。）
禁止在白色背景上使用紫蓝渐变。这是AI生成内容最明显的特征之一。如果想要色彩冲击力，请选择一种饱和度低于80%的饱和强调色（祖母绿、电光蓝、深玫瑰色、赤陶色）搭配带色调的中性色。极繁主义例外：对于海报、社论布局、音乐/节日/活动设计、zine杂志、野兽派/先锋派需求，或任何DESIGN_VARIANCE ≥ 8的场景，你可以使用精心搭配的三色调色板替代单一强调色——但调色板必须具备目的性（例如：赤陶色+芥末黄+奶油色，而非随机的Tailwind默认色）。仍禁止使用紫→蓝渐变。如有疑问，默认使用一种强调色。
Hero区域禁止使用
h-screen
。iOS Safari会破坏该布局。请始终使用
```
min-h-[100dvh]
```
。
禁止将三张等大卡片排成一行作为“功能”模式。请使用2列交错布局、不对称便当式布局、水平滚动，或完全移除卡片并使用
```
divide-y
```
布局。
禁止使用通用数据。“John Doe”、“Acme”、“Nexus”、“$99.99”、“+1 (555) 123-4567”——均已禁用。请创建真实、略带杂乱的数据：
```
Mira Okonkwo
```
、
```
Lattice & Co.
```
、
```
$47.20
```
、
```
+1 (312) 847-1928
```
。
必须创建DESIGN.md。在进行任何有意义的UI构建时，如果
```
./DESIGN.md
```
已存在，请先阅读它；如果不存在，请在构建完成后使用
```
references/design-doc.md
```
作为模板创建它。仅在进行微小的孤立调整（单个按钮标签、一个className修改）时可跳过。首次构建绝不允许跳过。

Architecture Defaults (Don't Ask, Just Apply)

架构默认值（无需询问，直接应用）

Unless the user specifies otherwise:

Framework: React or Next.js. Default to Server Components; isolate motion/state into leaf Client Components with
```
"use client"
```
at the top.
Styling: Tailwind. Check
```
package.json
```
for v3 vs v4 — never mix syntaxes. For v4, do NOT use
```
tailwindcss
```
plugin in
```
postcss.config.js
```
; use
```
@tailwindcss/postcss
```
.
Icons:
```
@phosphor-icons/react
```
or
```
@radix-ui/react-icons
```
. Standardize stroke width globally (1.5 or 2.0). Never emojis.
Layout containers:
```
max-w-[1400px] mx-auto
```
or
```
max-w-7xl
```
. CSS Grid over flex math. Mobile collapses to single column with
```
px-4
```
below
```
md:
```
.
Dependencies: Before importing any 3rd party lib, check
```
package.json
```
. If missing, output the install command first. Never assume.
Shadcn: Allowed, but never default. Customize radii, colors, shadows.
Images:
```
https://picsum.photos/seed/{string}/800/600
```
for placeholders. Never broken Unsplash URLs.

除非用户特别指定：

框架：React或Next.js。默认使用Server Components；将动效/状态隔离到顶部带有
```
"use client"
```
标识的叶子Client Components中。
样式：Tailwind。检查
```
package.json
```
中的版本是v3还是v4——绝不能混合语法。对于v4，请勿在
```
postcss.config.js
```
中使用
```
tailwindcss
```
插件；请使用
```
@tailwindcss/postcss
```
。
图标：
```
@phosphor-icons/react
```
或
```
@radix-ui/react-icons
```
。全局统一描边宽度（1.5或2.0）。禁止使用emoji。
布局容器：
```
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链接。

When User Asks "Just Build Me X"

当用户要求“直接为我构建X”时

Don't ask 10 questions. Make 90% of decisions yourself based on the brief and these rules. Only ask if a single missing piece would derail the design (e.g., "is this for a B2B SaaS or a creative agency?" when it's truly ambiguous).

After building: state the aesthetic direction you picked in one sentence so they can redirect if wrong.

不要问10个问题。根据需求和这些规则自行做出90%的决策。仅当某个缺失的信息会严重影响设计时才询问（例如：“这是面向B2B SaaS还是创意机构？”——当确实存在歧义时）。

构建完成后：用一句话说明你选择的美学方向，以便用户在方向错误时进行调整。

When User Asks To "Add Animation" / "Make It Feel Alive"

当用户要求“添加动画”/“让它更生动”时

Load

references/motion.md

and

references/bento-engine.md

. Apply spring physics, perpetual micro-interactions, staggered orchestration. Never linear easing. Never animate

width

height

— only

transform

and

opacity

加载

references/motion.md

和

references/bento-engine.md

。应用弹簧物理效果、持续微交互、交错编排。绝不使用线性缓动。绝不动画

width

height

——仅动画

transform

和

opacity

。

When User Asks To "Polish" / "Make It Better"

当用户要求“优化”/“让它更好”时

Run a pre-flight pass against

references/anti-slop.md

. Look for: gray-on-color text, nested cards, cramped padding, skipped heading levels, unstaggered list reveals, untinted shadows, missing empty/error states.

对照

references/anti-slop.md

执行预检查。检查以下内容：彩色背景上的灰色文本、嵌套卡片、拥挤的内边距、跳过的标题层级、未交错的列表展示、无色调的阴影、缺失的空状态/错误状态。

Setup Walkthrough Trigger

设置向导触发条件

If the user says any of: "set up website builder", "install design tools", "/website-builder-setup", "/frontend-god-mode setup" — run the full walkthrough at

references/setup-walkthrough.md

. Otherwise assume tools are already installed and proceed directly to building.

如果用户说以下任何内容：“设置网站构建工具”、“安装设计工具”、"/website-builder-setup"、"/frontend-god-mode setup"——请执行

references/setup-walkthrough.md

中的完整设置向导。否则假设工具已安装，直接开始构建。

Final Pre-Flight (Before Saying "Done")

最终预检查（在说“完成”之前）

Run the full pre-flight from

references/anti-slop.md

plus the items below. The full anti-slop checklist is the source of truth — this is the must-not-skip subset.

Typography

No regular Inter / Roboto / Arial / system-ui as primary
At most TWO type families (display + body, optional mono)
Body line-height ≥ 1.5
Body width capped at
```
max-w-[65ch]
```

Color

No purple-blue gradient on white
No
```
#000
```
/
```
#FFF
```
directly (tinted neutrals only)
One accent (or curated 3-color palette in maximalist mode)
Tinted shadows (no pure black)

Layout

No centered hero (when DESIGN_VARIANCE > 4)
No 3 equal cards in a row as features
No nested cards beyond depth 1
All full-height sections use
```
min-h-[100dvh]
```
(never
```
h-screen
```
)
Mobile collapses to single column with
```
px-4
```
minimum

Motion

Spring physics on interactive motion (no linear easing for UI motion)
No bounce / elastic
Only
```
transform
```
/
```
opacity
```
animated
Perpetual loops isolated in memoized leaf Client Components
```
useEffect
```
animations have cleanup
```
prefers-reduced-motion
```
respected

Accessibility

Body text contrast ≥ 4.5:1 (WCAG AA)
Focus-visible rings on every interactive element
Touch targets ≥ 44px on mobile
Form inputs have real labels (not just placeholders)
Heading levels sequential (no skipping)

Content & state

Realistic data (no John Doe / Acme / 99.99%)
No filler copy (Elevate / Unleash / Seamless / Next-Gen)
No emojis anywhere (Phosphor / Radix icons only)
Loading skeletons match layout (not generic spinners)
Empty + error states designed and inline

Skill protocol

Stated the aesthetic direction in one line for the user
DESIGN.md written/updated at the project root (mandatory unless tiny isolated tweak)
DESIGN.md was read FIRST if it already existed

If any item fails, fix before reporting done.

执行

references/anti-slop.md

中的完整预检查，再加上以下内容。完整的anti-slop清单是权威标准——以下是必须检查的子集。

排版

未将常规Inter / Roboto / Arial / system-ui作为主要字体
最多使用两种字体族（标题+正文，可选等宽字体）
正文行高 ≥ 1.5
正文宽度限制为
```
max-w-[65ch]
```

色彩

白色背景上未使用紫蓝渐变
未直接使用
```
#000
```
/
```
#FFF
```
（仅使用带色调的中性色）
使用一种强调色（或在极繁主义模式下使用精心搭配的三色调色板）
使用带色调的阴影（无纯黑色阴影）

布局

未使用居中Hero区域（当DESIGN_VARIANCE > 4时）
未将三张等大卡片排成一行作为功能展示
嵌套卡片深度不超过1层
所有全屏高度区域使用
```
min-h-[100dvh]
```
（绝不使用
```
h-screen
```
）
移动端折叠为单列，且最小内边距为
```
px-4
```

动效

交互动效使用弹簧物理效果（UI动效绝不使用线性缓动）
未使用弹跳/弹性效果
仅对
```
transform
```
/
```
opacity
```
执行动画
持续循环动效隔离在记忆化的叶子Client Components中
```
useEffect
```
动画包含清理逻辑
遵循
```
prefers-reduced-motion
```
设置

无障碍

正文字体对比度 ≥ 4.5:1（符合WCAG AA标准）
每个交互元素都有焦点可见环
移动端触摸目标 ≥ 44px
表单输入有真实标签（不只是占位符）
标题层级连续（无跳过）

内容与状态

使用真实数据（无John Doe / Acme / 99.99%这类通用数据）
无填充文案（如Elevate / Unleash / Seamless / Next-Gen）
任何地方都未使用emoji（仅使用Phosphor / Radix图标）
加载骨架屏与布局匹配（非通用加载动画）
已设计并内联空状态+错误状态

Skill协议

用一句话向用户说明选择的美学方向
已在项目根目录下编写/更新DESIGN.md（除非是微小的孤立调整，否则必须执行）
如果DESIGN.md已存在，已先阅读该文件

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

After You're Done — Recommend Next Steps

完成后——推荐后续步骤

Once the build passes the pre-flight, suggest the user invoke companion skills to close the loop. Only mention skills the user actually has installed (you can check with

npx skills list

if uncertain — don't fabricate). Otherwise tell them which to install.

If the user has a dev server running or could start one:

"Want me to take screenshots and verify it renders correctly? Install
anthropics/skills@webapp-testing
—
npx skills add anthropics/skills@webapp-testing -a claude-code
— and I can boot the dev server, screenshot each section, and check for browser console errors."

For a UX quality pass:

"For a quantitative UX critique, install
npx skills add pbakaus/impeccable@critique -a claude-code
and prompt
/critique <area>
."

For technical / a11y audit:

"For a deeper technical audit (WCAG violations beyond
accessibility.md
, perf, responsive), install
npx skills add pbakaus/impeccable@audit -a claude-code
and prompt
/audit <area>
."

For mobile-heavy projects:

"For mobile-first refinement (touch targets, gesture patterns, iOS/Android conventions), install
npx skills add sleekdotdesign/agent-skills@sleek-design-mobile-apps -a claude-code
."

Make the recommendation contextual — don't dump all four at the user. Pick the ONE that most likely catches what your build might have missed.

构建通过预检查后，建议用户调用配套Skill以完成闭环。仅提及用户已安装的Skill（若不确定可使用

npx skills list

检查——请勿虚构）。否则告知用户需要安装哪些Skill。

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

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

如需UX质量检查：

“如需定量UX评审，请安装
npx skills add pbakaus/impeccable@critique -a claude-code
并输入指令
/critique <区域>
。”

如需技术/无障碍审计：

“如需更深入的技术审计（
accessibility.md
之外的WCAG违规、性能、响应式），请安装
npx skills add pbakaus/impeccable@audit -a claude-code
并输入指令
/audit <区域>
。”

针对移动端为主的项目：

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

请根据上下文推荐——不要一次性向用户推送所有四个选项。选择最有可能发现你的构建中可能存在的问题的那一个。",