实践指南
选一件要做的事：跟着步骤做、复制任务单、核对真实成果
用多方向探索与子 Agent 走查做出高级 UI
打破模型默认预测的蓝紫渐变与对称卡片套路：从三版视觉方向同屏对比出发，结合生图/序列帧素材与无上下文子 Agent 截图挑刺，最后靠减法打磨呼吸感。
请为当前产品设计首屏与核心介绍页：1) 先不要直接写整页代码，请从色彩、字体（衬线/无衬线）与非常规不对称版式拆解 3 个截然不同的视觉方向，并生成 style-explorer.html 同屏展示三版首屏；2) 禁用蓝紫渐变、Emoji 图标、层层嵌套的卡片容器与解释性废话小字；3) 等我选定一版完成整页并配齐统一风格插图后，启动一个不带历史上下文的子 Agent 对桌面与手机真实截图按 10 分制挑刺修改，直到满 9 分。
不要只对 AI 说“随机做一个独特设计”（模型仍会吐出相似的圆角卡片）。要求 Agent 先从色彩冷暖、衬线/无衬线字体和非常规版式三个维度拆出 3 个具体意象（如暗夜木刻海报、等轴微距视角、工业实体控制面板），并生成 style-explorer.html 把三版首屏并排渲染出来直观挑选。
- 每套方案必须在底色明暗、字体性格（衬线/无衬线/等宽）和版式结构上拉开明显差距
- 如果是已有项目新增页面，先提取现有设计规范，再一次性生成弹窗、抽屉、独立页 3 种交互方案对比
- 通过 style-explorer.html 并排预览首屏，选中一个方向后再继续写完整页
留下的成果浏览器打开 style-explorer.html 时，三套首屏在底色、字体性格和构图重心上一眼区分。
纯靠 HTML/CSS 画框和 SVG 小图标撑不起顶级视觉。明确要求 Agent 调用生图工具生成同一画风的透明底主视觉插画；遇到跟随鼠标或滚动条的复杂交互动画，可先生成纯绿幕循环视频，再用色键（Chroma Key）脚本抠成透明序列帧绑定到滚动进度或指针坐标。
留下的成果首屏与核心板块拥有风格统一的真实视觉主体，且动效在减弱动画偏好下可平稳降级。
写代码的主 Agent 带着历史上下文包袱，自己看自己的页面只会修修补补。每一轮修改后，将 1440px 与 390px 真实渲染截图交给一个全新的无上下文子 Agent（可优先搭配视觉审美更敏锐的模型），要求它对照顶级工作室水准指出构图、字重、间距差距并给出具体修改位置与伪代码，满 9 分才算过关。
- 启动无历史上下文的独立子 Agent 看真实截图打分，反馈必须包含具体修改位置与伪代码
- 删掉所有“为了丰富页面”硬塞进去的副标题说明小字与“已选 X 项”无用状态提示
- 将布局简化为以内容和图像为中心的网格，去掉蓝紫渐变、发光描边和多余的嵌套底板
留下的成果评审反馈包含明确的选择器、字号行高或间距修改指令，而非“再高级一点”的空话。
AI 极爱在每个区域底下塞一段解释性小字、到处画分割线、或者把 UUID 和“已选 3 项”这种不影响操作的文案摆在台面上。凡是布局和数字本身已经说清楚的地方，果断删掉副标题说明、去掉发光渐变和多余的外层卡片框。
留下的成果页面没有多余的解释性副标题、无意义的内部 ID 或层层套娃的边框，留白呼吸感清晰。