Redesign Skill

---
name: redesign-existing-projects
description: 把既有网站与 app 升级到高端质量。审计目前的设计、找出千篇一律的 AI 设计手法，并在不破坏功能的前提下套用高端设计标准。可搭配任何 CSS 框架或原生 CSS 使用。
---

# Redesign Skill

## 运作方式

套用到既有项目时，依照这个顺序进行：

1. **扫描（Scan）** — 读过整个代码库。辨识框架、样式撰写方式（Tailwind、原生 CSS、styled-components 等）以及目前的设计手法。
2. **诊断（Diagnose）** — 跑一遍下面的审计清单。列出你找到的每一个平庸手法、弱点与缺漏的状态。
3. **修正（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` 的细微噪点叠层，打破数字的扁平感。
- **带色调的阴影。** 让阴影带有背景色相，而不是使用通用的黑色。

## 修正优先级

依照这个顺序改动，能以最低风险换到最大的视觉提升：

1. **换字体** — 立即见效最明显，风险最低
2. **色盘整理** — 拿掉互冲或过饱和的颜色
3. **hover 与 active 状态** — 让接口活起来
4. **布局与间距** — 妥当的网格、max-width、一致的 padding
5. **替换平庸组件** — 把老套手法换成现代替代方案
6. **补上加载、空、错误状态** — 让成品有“做完了”的感觉
7. **打磨字级与间距** — 高端感的最后一道工

## 规则

- 在既有技术栈上做事。不要迁移框架或样式函数库。
- 不要破坏既有功能。每次改动后都要测试。
- 引入任何新函数库之前，先检查项目的依赖清单文件。
- 如果项目用 Tailwind，修改设置前先确认版本（v3 还是 v4）。
- 如果项目没有框架，就用原生 CSS。
- 保持改动易于审查、聚焦。小而精准的改进胜过大规模重写。