建立复古令牌库
把暖底、陶土主色、青灰强调固化成 CSS 变量，AI 生成稿只允许引用变量名，不允许直接写色值。
产出：约 24 个令牌 · 工时 1.5 人日
复古科技 · 怀旧美学 × 生成式 AI
用褪色暖调包裹 AI 平台，把怀旧感变成可复用的降本资产
复古风格不是滤镜堆料：我们把它拆成可量化的设计令牌——暖米白底、陶土主色、青灰强调，配合 AI 生成内容与老式栅格排版，让「复古 + AI」的网站设计在用户体验、开发工时与长期维护成本之间取得平衡。
38%设计返工下降
1.6×首屏内容密度
≤2.4sLCP 目标
工作流程步骤
四步把复古美学接入 AI 平台，每一步都带成本闸口
先定令牌再生成内容，避免「AI 出图 → 设计师返工 → 前端重排」的三段式烧钱路径。
AI 批量生成结构稿
用提示词约束输出「老式栅格 + 衬线标题 + 等宽数字」，每屏生成 3 版，人工只做取舍不做重画。
弃稿率目标 ≤35% · 单屏 12 分钟做旧与排版校准
对图片统一 sepia 0.14~0.18、降饱和 8%，正文行高锁在 1.62，标题字距 -0.015em，保证怀旧但不糊。
对比度 ≥4.5:1 · 检查 15 处组件化与回归
把卡片刻成 bento 变体（wide / mid / tall），新页面直接复用，回归只测断点与小屏溢出。
复用率 ≥70% · 回归 0.5 人日
实用指导清单
复古 × AI 网站设计的 5 条硬指标
每条都对应可验收的数值，方便在评审会上直接对照，而不是靠「感觉不够复古」来返工。
1
配色遵循 60-30-10，先算面积再调色
中性暖底约占 60%（--bg/--surface），陶土主色约 30%（导航、按钮、卡片边），青灰强调控制在 10% 以内（图标、关键数字、下划线）。把强调色铺满整屏是复古稿最常见的翻车点，饱和度越高越显廉价。
2
做旧滤镜只加在图片层，不加在文字上
图片统一 sepia(0.14~0.18) + saturate(0.9) + 轻微暖色叠加；正文与按钮保持纯色，否则对比度会掉到 3:1 以下，可读性与无障碍一起失守。
3
排版用经典栅格，但字号必须响应式
正文 clamp 到 0.95~1.06rem，标题 2.4~3.6rem，行高 1.62；超大屏（≥1600px）容器放宽到 1400~1680px，卡片由 6 列升到 8 列，避免中间一条窄柱两侧留白。
4
AI 生成内容必须过「术语一致性」检查
建立 30 词以内的术语白名单（复古风格、怀旧美学、用户体验、色彩搭配等），生成稿命中率低于 85% 就重跑提示词，比人工逐句改更省时。
5
动效克制在 0.3~0.6s，并给出降级方案
hover 抬升 4px、阴影从 --sh-1 过渡到 --sh-2，曲线统一 var(--ease-out)；同时写 prefers-reduced-motion 降级，关闭吸附与缩放，照顾低端设备与晕动症用户。
6
成本视角：把复古细节做成可复用组件
做旧边框、老式分隔线、手绘箭头各封装一次，新页面直接引用；实测可把单页前端工时从 3 人日压到 1.2 人日，且视觉一致性反而更高。
能力矩阵 · Bento
五块能力拼图，撑起怀旧科技风格的体验闭环
错落格排布：大卡承载主叙事，中卡讲参数，高卡放真实图，强调卡只负责一个关键数字。
生成式文案与老式排版的协同
AI 负责标题变体与摘要，栅格负责节奏。标题最多两行、每行不超过 17 个汉字，超出就换更短的变体，避免怀旧版式被长句撑破。
褪色色彩系统
暖底 + 陶土 + 青灰三层，全部以 oklch 定义，明度差保证层级，而不是靠提高饱和度。
组件化之后，新增一个复古风格页面的前端工时降幅（对比逐页手写）。
做旧纹理与边框
1px 暖灰描边 + 虚线分隔 + 轻噪点，替代重投影，视觉更旧但渲染更轻。
令牌驱动的组件库
卡片、按钮、徽章共享同一组圆角与阴影令牌，改一处即可全站统一，怀旧感不会随页面增多而走形。
用户体验微交互
hover 抬升、描边发光、缓慢放大，全部 0.25~0.45s，保持温度感又不拖慢操作。
合作伙伴墙
与设计、算力、内容三方一起把成本摊薄
合作方按能力互补配对，避免重复采购同一类服务。
字体与排版顾问
复古纹理素材库
模型推理算力
无障碍审计
品牌色彩顾问
性能监测平台
关键数据条
把「复古感」折算成四个可核对的价值指标
指标以试点项目为样本，用于估算你自己的投入产出，而非宣传口径。
0.8人日 / 单页（组件化后）对比逐页手写 3 人日
+27%页面停留时长提升暖调低对比度降低阅读压迫感
2.1s移动端 LCP 实测目标线 2.4s，图片懒加载生效
94%对比度达标组件占比正文与按钮全部 ≥4.5:1
应用场景展示
四个真实场景，都能用同一套复古 AI 设计语言落地
场景之间共享令牌与组件，差异化只体现在内容密度与图片比例。
模型训练控制台
把参数面板做成老式仪表盘排版，关键指标用青灰强调，单屏可容纳 12 项指标而不拥挤。
创意策划看板
AI 生成选题 + 手绘箭头标注优先级，评审耗时从 45 分钟压缩到 20 分钟。
品牌官网改版
暖底占比 60%，主色集中在中段内容区，强调色只用于按钮与关键数字，整体克制不刺眼。
设计交付协作
令牌与组件同源，设计稿到前端实现的偏差率控制在 5% 以内，返工集中在内容层而非样式层。