Redesign Skill
运作方式
套用到既有项目时，依照这个顺序进行：
- 扫描（Scan） — 读过整个代码库。辨识框架、样式撰写方式（Tailwind、原生 CSS、styled-components 等）以及目前的设计手法。
- 诊断（Diagnose） — 跑一遍下面的审计清单。列出你找到的每一个平庸手法、弱点与缺漏的状态。
- 修正（Fix） — 在既有技术栈上做针对性的升级。不要打掉重写，把现有的东西改好。
设计审计
字体排版（Typography）
检查以下问题并修正：
- 用浏览器缺省字体，或到处都是 Inter。 换成有个性的字体。好选择：
Geist、Outfit、Cabinet Grotesk、Satoshi。编辑风／创意类项目可用衬线标题搭配无衬线内文。 - 标题没有存在感。 展示型文本加大字级、收紧字距、降低行高。标题应该显得厚重且有意图。
- 内文行宽过宽。 段落宽度限制在大约 65 个字符。提高行高以利阅读。
- 只用了 Regular（400）与 Bold（700）两种字重。 导入 Medium（500）与 SemiBold（600），做出更细腻的层级。
- 数字用比例字体。 数据密集的接口请改用等宽字体，或激活表格数字（
font-variant-numeric: tabular-nums）。 - 没有调整字距。 大标题用负字距，小型大写字或标签用正字距。
- 到处都是全大写的次标题。 改试小写斜体、句首大写（sentence case）或 small-caps。
- 孤字（orphan）。 单一个字孤零零留在最后一行。用
text-wrap: balance或text-wrap: pretty修掉。
色彩与表面
- 纯
#000000背景。 改用近黑、深炭黑，或带色调的暗色（#0a0a0a、#121212，或深海军蓝）。 - 过饱和的强调色。 饱和度压在 80% 以下。把强调色去饱和，让它融入中性色而不是尖叫。
- 强调色超过一个。 选一个，其他拿掉。一致性胜过多样性。
- 暖灰与冷灰混用。 固定用同一个灰色家族。所有灰色都用一致的色相调色（要暖就全暖，要冷就全冷，不要混）。
- 紫蓝色的“AI 渐层”美学。 这是最常见的 AI 设计指纹。改用中性基底搭配单一、经过斟酌的强调色。
- 千篇一律的
box-shadow。 把阴影调成呼应背景色相。使用带色阴影（例如蓝色背景配深蓝色阴影），而不是低不透明度的纯黑。 - 完全没有质感的扁平设计。 在背景加上细微的噪点、颗粒或微图样。纯扁平矢量显得很无菌。
- 过于均匀的渐层。 用放射渐层、噪点叠层或网格渐层（mesh gradient）打破均匀感，别再用标准的 45 度线性渐层。
- 光源方向不一致。 审计所有阴影，确保它们指向同一个一致的光源。
- 亮色页面里随机出现暗色区块（或反过来）。 在一个原本明亮的页面中插入单一深色背景区块，看起来就像拷贝粘贴的意外。要嘛就做完整的暗色模式，要嘛整页维持一致的背景色调。如果需要对比，用同一色盘中稍深的色阶——而不是在一片米色页面中间突然跳到
#111。 - 空洞、扁平、毫无视觉层次的区块。 只有文本放在素背景上的区块会显得没做完。加上高质量的背景影像（模糊、叠色或加遮罩）、细微图样或环境渐层。没有真实素材时，可用可靠的占位图来源，例如
https://picsum.photos/seed/{name}/1920/1080。在主视觉区、功能区块或 CTA 后面试试背景图——就算只是低不透明度的满版照片，也能大幅增加存在感。
布局（Layout）
- 所有东西都置中又对称。 用偏移边距、混合长宽比，或在置中内容上方放置靠左对齐的标题来打破对称。
- 三个等宽卡片栏组成的功能列。 这是最平庸的 AI 布局。改用两栏 zig-zag、不对称网格、水平滚动或砖墙式（masonry）布局。
- 全屏幕区块使用
height: 100vh。 改用min-height: 100dvh，避免移动浏览器上的布局跳动（iOS Safari viewport bug）。 - 复杂的 flexbox 百分比运算。 改用 CSS Grid 来做可靠的多栏结构。
- 没有 max-width 容器。 加上容器宽度限制（大约 1200-1440px）并设置 auto margin，避免内容在宽屏幕上被拉到满版。
- flexbox 强制卡片等高。 内容长度不一时，允许高度变动或改用 masonry。
- 所有元素圆角一模一样。 让圆角有变化：内层元素收紧，容器放柔。
- 没有重叠也没有层次。 元素平铺在彼此旁边。用负 margin 制造层叠与视觉深度。
- 上下 padding 完全对称。 上下 padding 永远一样。请做视觉上的微调——下方 padding 通常需要稍微大一点。
- 仪表板一定配左侧边栏。 改试顶部导览、浮动命令菜单，或可收合面板。
- 留白不足。 把间距加倍。让设计呼吸。密集布局适合数据仪表板，不适合行销页。
- 卡片群组中的按钮没有靠底部对齐。 卡片内容长度不同时，CTA 会落在高低不一的位置。把按钮钉在每张卡片底部，这样不论上方内容多长，按钮都能排成一条干净的水平线。
- 功能清单的垂直起始位置不一。 在价目表或比较卡片中，功能清单应该在所有字段都从同一个 Y 座标开始。清单上方请使用一致的间距，或固定标题／价格区块的高度。
- 并排元素的垂直节奏不一致。 把卡片、字段或面板并排时，要让共通元素（标题、说明、价格、按钮）跨项目对齐。基线没对齐会让布局看起来坏掉。
- 数学上对齐、视觉上却歪掉。 用数字算出来的置中，眼睛看起来不一定是置中。文本旁的 icon、圆形内的播放键、按钮里的文本，往往需要 1-2px 的视觉补偿才会对。
交互与状态
- 按钮没有 hover 状态。 加上背景变化、轻微缩放或位移。
- 没有 active／按下的回馈。 按下时加上细微的
scale(0.98)或translateY(1px)，仿真实体按压感。 - 转场时间为零的瞬间切换。 为所有交互元素加上平滑转场（200-300ms）。
- 缺少 focus ring。 确保键盘操作时有可见的焦点指示。这是无障碍需求，不是可选项。
- 没有加载状态。 把千篇一律的圆形转圈换成符合布局形状的骨架加载（skeleton loader）。
- 没有空状态。 一个什么都不显示的空仪表板是浪费机会。设计一个编排过的“开始使用”界面。
- 没有错误状态。 为表单加上清楚的行内错误消息。不要用
window.alert()。 - 死链接。 连到
#的按钮。要嘛连到真实目的地，要嘛在视觉上停用它。 - 导览列没有标示目前页面。 把 active 的导览链接做出不同样式，让用户知道自己在哪。
- 滚动跳动。 锚点点击瞬间跳位。加上
scroll-behavior: smooth。 - 用
top、left、width、height做动画。 改用transform与opacity，取得 GPU 加速的流畅动画。
内容
- 像“John Doe”或“Jane Smith”这种罐头姓名。 使用多元、听起来真实的名字。
- 像
99.99%、50%、$100.00这种假的整数。 使用有机、不那么工整的数据：47.2%、$99.00、+1 (312) 847-1928。 - 像“Acme Corp”、“Nexus”、“SmartFlow”这种占位公司名。 自己发明贴合情境、可信的品牌名。
- AI 文案的老套字眼。 绝对不要用 "Elevate"、"Seamless"、"Unleash"、"Next-Gen"、"Game-changer"、"Delve"、"Tapestry" 或 "In the world of..."。用平实、具体的语言写。
- 成功消息里的惊叹号。 拿掉。要有自信，不要大声。
- “Oops!”式的错误消息。 直说：“连接失败，请再试一次。”
- 被动语态。 改用主动语态：“我们没能保存你的变更”，而不是“发生了一些错误”。
- 所有博客文章日期都一样。 把日期随机化，看起来才真实。
- 多个用户共用同一张头像。 每个不同的人都要用不同的素材。
- Lorem Ipsum。 绝对不要用拉丁文占位字。写真实的草稿文案。
- 每个标题都用 Title Case。 改用句首大写（sentence case）。
组件手法
- 千篇一律的卡片外观（边框＋阴影＋白底）。 拿掉边框，或只用背景色，或只用间距。卡片只有在“高度差能传达层级”时才该存在。
- 永远一个实心按钮＋一个幽灵按钮。 加入文本链接或第三层样式，降低视觉噪音。
- 胶囊形状的“New”与“Beta”标章。 改试方形标章、旗标，或纯文本标签。
- 手风琴式 FAQ 区块。 改用并排清单、可搜索的说明中心，或行内的渐进式揭露。
- 三卡轮播＋圆点的推荐区。 改成砖墙式评论墙、嵌入的社群贴文，或单则轮替引言。
- 三根柱子的价目表。 用颜色与强调来凸显推荐方案，而不是只把它做高一点。
- 什么都用 modal。 简单操作改用行内编辑、侧滑面板（slide-over）或可展开区块，不要动不动就弹窗。
- 头像清一色圆形。 试试 squircle 或圆角方形，看起来比较不平庸。
- 亮／暗模式切换永远是太阳／月亮开关。 改用下拉列表、侦测系统偏好，或集成进设置页。
- 四栏式的页脚链接农场。 简化。聚焦在主要导览路径与法规要求的链接。
图标（Iconography）
- 清一色使用 Lucide 或 Feather 图标。 这些是 AI 的“缺省”图标选择。改用 Phosphor、Heroicons 或自订图标组来做出区隔。
- “Launch”配火箭、“Security”配盾牌。 把老套的隐喻换成不那么明显的图标（闪电、指纹、火花、保险库）。
- 各图标的线条粗细不一致。 审计所有图标，统一成同一个笔画粗细。
- 缺少 favicon。 一定要放上有品牌的 favicon。
- 罐头的“多元团队”照片。 用真实团队照、抓拍照，或一致的插画风格，取代那种诡异的图库照。
代码质量
- Div soup。 使用语意化 HTML：
<nav>、<main>、<article>、<aside>、<section>。 - 行内样式与 CSS class 混用。 把所有样式移进项目的样式系统。
- 写死的像素宽度。 使用相对单位（
%、rem、em、max-width）做出弹性布局。 - 图片缺少 alt 文本。 为屏幕阅读器描述图片内容。有意义的图片绝对不要留
alt=""或alt="image"。 - 像
9999这种随便乱给的 z-index。 在 theme／变量中创建一套干净的 z-index 级距。 - 被注释掉的死代码。 上线前把所有调试残留清干净。
- 幻觉 import。 检查每一个 import 是否真的存在于
package.json或项目依赖包中。 - 缺少 meta 标签。 补上妥当的
<title>、description、og:image与社群分享 meta 标签。
策略性遗漏（AI 通常会忘记的事）
- 没有法务链接。 在页脚加上隐私权政策与服务条款链接。
- 没有“返回”导览。 用户流程走进死路。每一页都要有回去的方法。
- 没有自订 404 页。 设计一个有帮助、有品牌感的“找不到页面”体验。
- 没有表单验证。 加上前端验证，检查 email、必填字段与格式。
- 没有“跳至内容”链接。 这对键盘用户很关键。加上一个隐藏的 skip-link。
- 没有 cookie 同意。 若所在司法管辖区有要求，加上合规的同意横幅。
升级手法
升级项目时，从这些高效手法中取用，来取代平庸的做法：
字体排版升级
- 可变字体动画。 随滚动或 hover 内插字重或字宽，让文本有生命感。
- 描边转填色。 文本先以描边呈现，在滚动进入视野或交互时填上颜色。
- 文本遮罩揭露。 用大型字体当作窗口，透出后方的视频或动态影像。
布局升级
- 破格网格／不对称。 刻意无视字段结构的元素——重叠、出血到界面外，或以计算过的随机量偏移。
- 极大化留白。 积极运用负空间，强迫视线聚焦在单一元素上。
- 视差卡片堆栈。 区块在滚动时吸附并实际堆栈在彼此之上。
- 分割界面滚动。 界面左右两半朝相反方向滑动。
动态升级
- 带惯性的平滑滚动。 让滚动脱离浏览器缺省，做出更有重量的电影感。
- 交错进场。 元素以微小延迟依序串连进场，结合 Y 轴位移与透明度淡入。绝对不要全部同时挂载。
- 弹簧物理。 把线性缓动换成弹簧式运动，让所有交互元素都有自然、有重量的手感。
- 滚动驱动的揭露。 内容通过扩张遮罩、抹除效果，或与滚动进度连动的 SVG 路径描绘来进场。
表面升级
- 真正的玻璃拟态。 不要只停在
backdrop-filter: blur。加上 1px 内边框与细微的内阴影，仿真边缘折射。 - 聚光边框。 卡片边框随光标动态发亮。
- 颗粒与噪点叠层。 一层固定的、
pointer-events-none的细微噪点叠层，打破数字的扁平感。 - 带色调的阴影。 让阴影带有背景色相，而不是使用通用的黑色。
修正优先级
依照这个顺序改动，能以最低风险换到最大的视觉提升：
- 换字体 — 立即见效最明显，风险最低
- 色盘整理 — 拿掉互冲或过饱和的颜色
- hover 与 active 状态 — 让接口活起来
- 布局与间距 — 妥当的网格、max-width、一致的 padding
- 替换平庸组件 — 把老套手法换成现代替代方案
- 补上加载、空、错误状态 — 让成品有“做完了”的感觉
- 打磨字级与间距 — 高端感的最后一道工
规则
- 在既有技术栈上做事。不要迁移框架或样式函数库。
- 不要破坏既有功能。每次改动后都要测试。
- 引入任何新函数库之前，先检查项目的依赖清单文件。
- 如果项目用 Tailwind，修改设置前先确认版本（v3 还是 v4）。
- 如果项目没有框架，就用原生 CSS。
- 保持改动易于审查、聚焦。小而精准的改进胜过大规模重写。
