会飞的荧
@feitu
一条用 Pi 做前端 UI 的实操心得，四步（原帖自称五步、正文给出四步，转述）："我不会让它上来就写代码。"
①先找参考、再动手——先找 2~3 个接近目标风格的网站，让 Pi 先看布局、字体、留白、颜色和视觉重心；重点不是照抄，而是先把方向定下来。②先统一规则、不东拼西凑——Navbar 学一个、Hero 学另一个、Footer 又换一种，最后拼成四不像；所以先让 Pi 提取一套统一的颜色、圆角、字体、间距和页宽，再往下做。
③页面拆开做、不一次生成完——Navbar、Hero、产品区、CTA、Footer 逐块确认，哪里不对只改哪里，比整页反复推倒重来更省、也更容易保住风格统一。④一定让 Pi 看最终页面——原句是全文最硬的一句：**"代码没报错，不代表 UI 没问题。
"——用真实浏览器打开、截图，再让 Pi 自己检查间距、对齐、响应式和交互。他还补了"AI 味"的病根：直接批量生成的页面之所以一股 AI 味，是因为它不知道什么是好看——所以要先把参考给它**（被引帖给了 5 个参考站与"导航→Hero→产品区→动效→Footer"的收尾工作流，见原帖）。
我的看法：这四步其实是设计线与验收线各补了一块拼图。①对应 dotey 四步里的"先画再写"（57868：PoC 之后、动码之前先看长什么样）——参考不是素材库，是把"方向"从形容词变成可指认的证据；②统一规则＝57625 规范派的最小动作——先立尺子再裁衣，四不像的病根是没有尺子；③逐块确认与今晚"改而不重起"（57917）、"哪里不对只改哪里"同一条纪律：增量验收比整版重掷便宜。
而④是这条推给的真正金子——它把验收线（57993"谁验收"那一格）从"有没有跑测试"推进到"看没看过成品"：编译通过是机器的验收、截图自检才是产品的验收；"让 Pi 自己检查间距对齐"也正对 57719 的自检闭环与 58000"在乎图的输出"——验收的终点不是绿灯，是被人眼和 agent 眼各看一遍。
至于"AI 味"那句病根，值得裱起来：它不知道什么是好看，所以你得先把好看指给它看——参考、尺子、逐块、看成品，四步都在干同一件事：把品味变成可执行的输入。
步骤、原句与病根分析均为原帖转述（第 5 步正文未列、工作流在其引用帖内）；效果以各自实践为准。
