先选参考，别凭感觉改
「高级感」不是可执行的意见。选一个具体参考站，拆它的间距、字号、颜色，才知道改哪里。
风格SaaS 产品官网 · SaaS Marketing Site商业产品页风格Notion 风 · Notion Style内容型产品风格现代简约 · Minimalism克制型界面技能clone-website
完成标志选定 1 个主参考和 1 个辅助参考，写下要借鉴的 3 个具体点，每个都能落到数值或结构。
路径 03 · 从能用到像样
把界面做出质感
不靠换模板，而是从参考、规则、状态到验收，把页面一步步推到「像正经产品」。
适合谁
页面已经能跑，但看起来像 demo；知道「土」，却说不清哪里不对的人
开始前要有
有一个能打开的页面，本地或线上都行
走完你会拿到
一套写下来的视觉规则，加上一个经得起截图对比的页面：层级清楚、状态齐全、手机上也体面。
把视觉规则写成文件
没有规则，AI 每次生成都换一套颜色和间距，页面越改越花。
完成标志主色、背景、三档文字灰、圆角、间距写成一份规则，页面只引用规则里的值。
装上设计技能，别让 AI 自由发挥
通用大模型默认输出「模板脸」。把设计规范和项目约束交给它，结果才稳定。
完成标志改界面前 Agent 会先读规范；新生成的区块和已有页面是同一套语言。
把首屏和层级做对
质感首先来自「一眼知道看哪」。层级乱了，再精致的阴影也救不回来。
完成标志遮住正文只看首屏，仍能说出：这是什么、给谁、下一步点哪。
补上交互状态和动效
真实产品有一半时间处在 hover、加载、空、出错这些状态里。只做「正常态」就像 demo。
完成标志每个可点元素有 hover、focus、禁用态；列表有加载和空状态，不是白屏。
做最后一轮打磨
到这一步不缺大结构，缺的是不一致：这里 12px 那里 14px，这里有阴影那里没有。
完成标志对照参考截图逐项过：间距、字重、颜色、圆角，全部收敛到规则里。
用清单验收，不靠肉眼
「我觉得还行」不是验收。用同一套标准在手机上、键盘上各走一遍。
完成标志390px 不横向滚动；键盘能走完主流程；文字对比度过关；深浅色都不破版。
这条路径走完，你应该能拿出这些
逐条核对。有一项做不到，就回到对应的那一步，不用从头再来。
- 视觉规则写在一份文件里，页面没有规则外的颜色和字号
- 遮住正文，首屏 3 秒能看懂
- 交互状态齐全：hover / focus / 禁用 / 加载 / 空 / 出错
- 390px 手机宽度不横向滚动
- 键盘能走完主流程，对比度过关
- 对照参考截图，差距能具体说出来并改掉
这条路径用到的全部资产
27 份 · 按类型分组技能
概念
走完这条，接着走做出第一个 AI 应用
下一条