简诗 AI 界面重设计

要解决的问题

当项目里出现这些痕迹：全站 Inter 字体、居中对称的三卡片布局、紫蓝渐变标题、纯黑 #000000 背景、一排没有交互反馈的按钮——界面已经落入了 AI 生成设计的“默认指纹”。这些不是功能性 bug，但会让产品看起来“像被生成过一遍”。更隐蔽的问题在细节里：正文行宽无限制、数字对不齐、height: 100vh 在 iOS Safari 上跳动、焦点环缺失、空状态和错误状态没设计、示例文案写着 “Acme Corp”。单看都是小事，累积起来就是产品气质的分水岭。

技能如何工作

核心思路是审查与修复，而非推倒重写：

1. Scan — 读代码库，识别框架、样式方案（Tailwind、原生 CSS、styled-components 等）和现有设计模式。
2. Diagnose — 按审计清单逐项检查，覆盖六个维度：

- 排版：字体个性、标题层级、约 65 字符行宽、字重梯度、tabular-nums、孤行控制
- 色彩与表面：纯黑换偏色深色、饱和度压到 80% 以下、单一强调色、阴影染色、纹理与渐变去均质化
- 布局：打破对称三列、min-height: 100dvh 替代 100vh、Grid 替代 flexbox 百分比、统一 max-width、垂直节奏对齐
- 交互与状态：hover/active 反馈、200–300ms 过渡、可见 focus ring、骨架屏、空状态、内联错误、scroll-behavior: smooth、动画改用 transform/opacity
- 内容：真实姓名与不整齐的数据、剔除 AI 文案陈词、主动语态、随机化日期
- 组件与代码质量：通用卡片、胶囊徽章、Lucide/Feather 图标、语义化标签、相对单位、alt 文本、z-index 体系、meta 标签

1. Fix — 在现有技术栈上做针对性升级，比如用非对称栅格替换等高三列、用变量字体动画增强排版，而不是换框架重写。清单还覆盖一层容易被忽略的内容：法律链接、返回导航、自定义 404、表单校验、skip-to-content 链接和 Cookie 同意横幅。

适用边界

• 只处理已有项目的界面重设计，不从零搭建新设计系统
• 审计清单偏向营销页、落地页和仪表盘的通用审美，垂直行业需自行把关
• 不会重写架构；现有栈严重腐化时，它只能打补丁
• 深色/浅色主题一致性、字体授权与真实图片素材仍需人工确认