不是灵感集。
是工作手册。

先写清楚需求，
别急着说“高级一点”。

“做一个高级的首页”不是需求，是愿望。AI 只能猜。猜出来的东西通常很平均：大标题、紫色渐变、三张卡片、几个看起来很大的数字。

更有效的写法是告诉它：谁会用、来做什么、第一眼必须看懂什么、哪些东西不能动。

别一开始就指定颜色

颜色是结果，不是起点。先说清楚这个页面要让人感到什么、先看什么，再让 AI 用三套不同的视觉语言去解释同一件事。

用Zack UI 设计一个独立杂志的网站首页。
读者是第一次听说这本杂志的人，他们需要在一分钟内
理解这本杂志关心什么，然后愿意打开一期试读。
首屏只需要刊名、当期主题和一个阅读入口。
现有内容：刊名 Nocturne、主题“留下来的东西”、
一期封面、三段编辑手记。
不要三张等宽卡片，不要虚构订阅人数。

这段需求没有说“极简”“高级”“留白”。但这些词已经藏在任务里了。AI 需要的是判断依据，不是形容词堆叠。

不要重写十次。
先把三个方向摆出来。

同一个需求，先让 AI 做三个真正不同的方向。不是三套配色，而是三种解释方式：

• 编辑型：文字和版面是主角，图片负责呼吸。
• 物件型：先给一个强视觉对象，文字围着它组织。
• 档案型：用编号、目录和时间线建立秩序感。

把三个方向放在同一页上并排看。不要先挑“最漂亮的”，先看哪个最像这个产品该有的样子。

选定后，明确说为什么

“我选第二个，因为它是唯一把‘当期主题’放在第一眼的方案。第一套更像摄影作品集，第三套像资料库。”这样的反馈，比“再高级一点”有用一百倍。

页面为什么一眼像 AI 做的？

不是因为它用了渐变。是因为它没有做决定。每个区块都在用最安全的默认值，最后整页看起来像一张被填满的模板。

六个高频默认值

1. 胶囊小标签：“✨ 开启你的创意之旅”。没有提供信息，只增加噪音。
2. 三张等宽功能卡：三个功能不代表三个一样重要的盒子。
3. 编造的指标：10,000+ 用户、99.9% 满意度。没有来源的数字会让整页失去信任。
4. 紫色发光按钮：按钮是行动提示，不是氛围灯。
5. 四张 KPI 卡：控制台的主角是工作对象，不是四个数字。
6. 卡片套卡片：每一层边框都在分散注意力。

判断一个元素该不该留，只问一句：删掉它，用户会不会更难完成这件事？不会，就删。

真正有用的替代方式

用一条明确的阅读路径代替三张卡片；用一个真实的工作对象代替四张指标卡；用字号、留白和一条细线建立层级，而不是给每个东西加阴影和圆角。

如果页面需要一点“性格”，把力气集中在一个地方：一个特别的标题排版、一张真正承担情绪的图、一个只有这个产品才会有的细节。不要每块都想要表现。

截图好看，
不代表页面能用。

很多问题只有在真实尺寸里才会出现：中文标题换行、按钮文字被挤成两行、手机上首屏只看到半张图、输入框聚焦后看不见光标。

至少做这五步

1. 在桌面宽度打开，先不滚动，看首屏能不能读懂。
2. 缩到手机宽度，重新看一遍首屏和主操作。
3. 把主要任务从头点一遍：打开、选择、填写、确认、失败、再试。
4. 截一张整页图，再截关键区域的 200% 局部图。
5. 删一轮文字。只把删掉后会影响理解的内容放回来。

验收时把页面当成别人的

你太熟悉自己的页面，会自动跳过看不懂的地方。找一个人，不给解释，让他完成一个任务。你只观察他在哪里停、点错什么、问什么问题。

给 Claude Code
一套设计判断。

Claude Code 很擅长读项目、改组件和执行长任务。问题通常不是能力，而是它一开始就跳进了实现：先写页面，再补内容，最后用颜色补救层级。

把顺序反过来

先让它读需求、看现有页面，然后只做三个方向的首屏小样。不要一上来就让它写完整站。方向没选对，写得越多，返工越大。

先不要改代码。
读一下现有的首页和设计变量，再给我三个首屏方向：
1. 编辑型，文字和版面是主角；
2. 物件型，先给一个强视觉对象；
3. 档案型，用编号和目录建立秩序。
三个方向都要用真实内容，并排放在一个 HTML 页面里。
我选定之后再实现。

把真实约束说完整

告诉它现有技术栈、哪些业务行为不能动、有哪些真实文案和图片、哪些状态已经存在。越具体，它越不需要猜，越不会拿通用模板填空。

实现阶段再要求它补齐交互：加载、空状态、错误、成功、键盘操作、手机布局。最后打开页面，自己走一遍任务，不要只看它发回来的代码。

让 Codex 先看，
再动手。

Codex 能直接读文件、运行页面、截图和改代码，所以更适合把“设计”和“验收”放在同一个循环里。不要只让它生成一个页面，让它对结果负责。

一个可执行的循环

1. 读现有页面和项目约定，不要先改。
2. 用真实内容做三个方向的小样。
3. 选定方向，完成一个代表性页面。
4. 在桌面和手机宽度打开，检查首屏、长内容和关键操作。
5. 列出问题，修一轮，再看一遍。

用 Zack UI 重新设计这个产品的首页。
先读现有页面和样式，不要直接改。
先给我三个明显不同的方向，用真实文案做成可打开的小样。
我选定后，完成整页，并在 1440px 和 390px 下检查。
检查完列出你发现的具体问题，再修一轮。

如果你已经有页面，先让它拍基线截图，再开始改。改完拿同一位置对比，比凭记忆判断可靠。

App 不是缩小的网页。

桌面页面讲信息展开，App 先讲用户此刻要完成什么。把网页压窄，通常只会得到一个导航拥挤、动作难找、状态缺失的小网站。

先写清核心循环

用户打开 App，是为了完成什么，然后得到什么？这句话决定首页、输入、反馈和再次使用的原因。导航模型也要从这条循环里选，不要默认底部四个标签。

手机上的主动作要容易触达

高频动作放在拇指容易到达的位置。固定底栏不能遮住内容，也不能和系统手势条打架。危险操作可以放高一点，但必须明确。

用 Zack UI 设计这个 App 的核心三屏。
先写清核心循环、导航模型和主要动作。
先给我三套不同的首页方向，再做详情和结果页。
补齐空、加载、错误和成功状态。
最后按 390×844 检查真实操作。

如果同时做 iOS 和 Android，品牌和内容可以统一，但系统返回、手势和控件习惯应该保留。

定价页不是两张卡片，
是替用户做选择。

用户来定价页，不是想看你有几个套餐。他想知道：我该选哪个，为什么，买了之后会不会后悔。

先给判断，再给价格

免费版适合谁、Pro 适合谁，要在价格旁边说清楚。不要只列功能数量。把“你正在遇到的麻烦”和“买完之后少做什么”写出来，比多一行勾选更有用。

让差异可感知

如果免费版和 Pro 只是“功能更多”，用户会默认免费版够了。差异要落在具体场景：要不要交付给客户、要不要改已有项目、要不要补交互和状态。

价格不是页面的主角，决定才是。用户先要知道自己属于哪一边，价格才有意义。

最后只留一个主动作。两个套餐可以并排，但视觉上必须有一个明确推荐。不要两个按钮同样大、同样黑、同样说“开始”。