重新设计技能
工作原理
应用于现有项目时，请遵循以下顺序：
- 扫描 — 阅读代码库。识别框架、样式方法（Tailwind、vanilla CSS、styled-components 等）以及当前设计模式。
- 诊断 — 运行下方审计。列出你发现的每一个通用模式、弱点和缺失状态。
- 修复 — 基于现有技术栈进行有针对性的升级。不要从零重写。改进已有内容。
设计审计
排版
检查以下问题并修复它们：
- 浏览器默认字体或到处使用 Inter。 替换为有辨识度的字体。好的选项：
Geist、Outfit、Cabinet Grotesk、Satoshi。对于编辑/创意项目，可将衬线标题与无衬线正文搭配。 - 标题缺乏存在感。 增大展示文字尺寸，收紧字距，降低行高。标题应显得厚重且刻意。
- 正文过宽。 将段落宽度限制在约 65 个字符。提高行高以提升可读性。
- 仅使用 Regular (400) 和 Bold (700) 字重。 引入 Medium (500) 和 SemiBold (600) 以建立更细腻的层级。
- 数字使用比例字体。 对于数据密集型界面，使用等宽字体或启用表格数字（
font-variant-numeric: tabular-nums）。 - 缺少字距调整。 大标题使用负字距，小型大写字母或标签使用正字距。
- 到处使用全大写子标题。 尝试改为小写斜体、句子大小写或小型大写字母。
- 孤行单词。 单个单词单独留在最后一行。使用
text-wrap: balance或text-wrap: pretty修复。
色彩与表面
- 纯
#000000背景。 替换为米黑、深炭灰或带色调的深色（#0a0a0a、#121212或深海军蓝）。 - 强调色过饱和。 保持饱和度低于 80%。降低强调色饱和度，使其融入中性色，而不是刺眼。
- 使用多个强调色。 选择一个。移除其余。一致性胜过多样性。
- 混用暖灰和冷灰。 固定使用一个灰色家族。为所有灰色添加一致的色相（暖色或冷色，不要两者混用）。
- 紫/蓝“AI 渐变”审美。 这是最常见的 AI 设计指纹。替换为中性基底和一个经过考量的强调色。
- 通用的
box-shadow。 为阴影着色以匹配背景色相。使用彩色阴影（例如蓝色背景上的深蓝阴影），而不是低透明度的纯黑。 - 完全没有纹理的扁平设计。 为背景添加细微噪点、颗粒或微图案。纯扁平矢量会显得无菌。
- 完全均匀的渐变。 使用径向渐变、噪点叠加或网格渐变打破均匀性，而不是标准的线性 45 度淡化。
- 光照方向不一致。 审计所有阴影，确保它们暗示单一、一致的光源。
- 浅色模式页面中随机出现深色区块（或反之）。 一个深色背景区块打断原本浅色的页面，看起来像复制粘贴事故。要么承诺使用完整深色模式，要么保持整体背景色调一致。如果需要对比，使用同一色板的稍深色调——不要在米色页面中间突然跳到
#111。 - 空洞、扁平且没有视觉深度的区块。 只有文字和纯色背景的区块会显得未完成。添加高质量背景图（模糊、叠加或蒙版）、细微图案或环境渐变。当没有真实素材时，使用可靠占位源，例如
https://picsum.photos/seed/{name}/1920/1080。在 hero 区块、功能区块或 CTA 背后尝试背景图——即使低透明度的细微全宽照片也能增强存在感。
布局
- 所有内容居中对齐且对称。 使用偏移外边距、混合宽高比，或左对齐标题置于居中内容之上，打破对称。
- 三列等宽卡片作为功能行。 这是最通用的 AI 布局。替换为 2 列 zig-zag、非对称网格、横向滚动或瀑布流布局。
- 使用
height: 100vh制作全屏区块。 替换为min-height: 100dvh，以防止移动浏览器上布局跳动（iOS Safari viewport bug）。 - 复杂的 flexbox 百分比数学。 使用 CSS Grid 替代，以获得可靠的多列结构。
- 没有 max-width 容器。 添加容器约束（约 1200-1440px）并使用 auto 外边距，避免内容在宽屏上拉伸到边缘。
- 通过 flexbox 强制卡片等高。 当内容长度不同时，允许高度可变或使用瀑布流。
- 所有元素使用统一 border-radius。 变化圆角：内部元素更紧，容器更柔和。
- 没有重叠或深度。 元素平铺相邻。使用负外边距创建层叠和视觉深度。
- 垂直内边距对称。 顶部和底部内边距总是相同。进行光学调整——底部内边距通常需要略大。
- 仪表盘总是有左侧边栏。 尝试顶部导航、浮动命令菜单或可折叠面板。
- 缺少留白。 将间距加倍。让设计呼吸。密集布局适合数据仪表盘，不适合营销页面。
- 卡片组中按钮没有底部对齐。 当卡片内容长度不同时，CTA 会出现在随机高度。将按钮固定在每张卡片底部，使它们形成一条干净的水平线，而不受上方内容影响。
- 功能列表从不同垂直位置开始。 在定价表或比较卡片中，功能列表应在所有列中从同一 Y 位置开始。使用列表上方一致间距或固定高度的标题/价格区块。
- 并排元素的垂直节奏不一致。 当卡片、列或面板彼此并排放置时，对齐所有项目中的共享元素（标题、描述、价格、按钮）。基线错位会让布局看起来损坏。
- 数学对齐但视觉上错误。 按数学居中并不总是看起来居中。文本旁的图标、圆形中的播放按钮或按钮中的文本通常需要 1-2px 的光学调整才能感觉正确。
交互与状态
- 按钮没有 hover 状态。 在 hover 时添加背景变化、轻微 scale 或 translate。
- 没有 active/pressed 反馈。 在按下时添加细微
scale(0.98)或translateY(1px)以模拟物理点击。 - 零时长的即时过渡。 为所有交互元素添加平滑过渡（200-300ms）。
- 缺少 focus ring。 为键盘导航确保可见焦点指示。这是无障碍要求，不是可选项。
- 没有加载状态。 使用匹配布局形状的结构占位加载器替代通用圆形 spinner。
- 没有空状态。 空仪表盘什么都不显示是错失的机会。设计一个完整的“入门”视图。
- 没有错误状态。 为表单添加清晰、内联的错误消息。不要使用
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!” 错误消息。 要直接：“Connection failed. Please try again.”
- 被动语态。 使用主动语态：“我们无法保存你的更改”，而不是“错误已经发生。”
- 所有博客文章日期相同。 随机化日期以显得真实。
- 多个用户使用同一头像图片。 为每个不同人物使用唯一素材。
- Lorem Ipsum。 绝不使用占位拉丁文本。编写真实草稿文案。
- 每个标题都使用 Title Case。 改为使用句子大小写。
组件模式
- 通用卡片外观（边框 + 阴影 + 白色背景）。 移除边框，或只使用背景色，或只使用间距。卡片只有在通过 elevation 传达层级时才应存在。
- 总是一个 filled button + 一个 ghost button。 添加文本链接或三级样式以减少视觉噪声。
- 药丸形状的“New”和“Beta”徽章。 尝试方形徽章、旗帜或纯文本标签。
- 手风琴式 FAQ 区块。 使用并排列表、可搜索帮助或内联渐进式披露。
- 带圆点的 3 卡片轮播评价。 替换为瀑布流墙、嵌入式社交帖子或单条轮播引言。
- 3 列定价表。 使用颜色和强调高亮推荐层级，而不仅是额外高度。
- 所有事情都使用 modal。 对简单操作使用内联编辑、滑出面板或可展开区块，而不是弹窗。
- 只使用圆形头像。 尝试 squircle 或圆角方形，以减少通用感。
- 浅色/深色切换总是太阳/月亮开关。 使用下拉菜单、系统偏好检测，或集成到设置中。
- 4 列页脚链接农场。 简化。聚焦主要导航路径和法律要求链接。
图标
- 只使用 Lucide 或 Feather icons。 这些是“默认”的 AI 图标选择。使用 Phosphor、Heroicons 或自定义图标集进行差异化。
- 用火箭表示“Launch”，用盾牌表示“Security”。 用更不明显的图标替换陈词滥调隐喻（bolt、fingerprint、spark、vault）。
- 图标之间 stroke width 不一致。 审计所有图标并统一为一个 stroke weight。
- 缺少 favicon。 始终包含品牌 favicon。
- 库存“多元化团队”照片。 使用真实团队照片、抓拍或一致插画风格，而不是诡异的库存图像。
代码质量
- Div 汤。 使用语义化 HTML：
<nav>、<main>、<article>、<aside>、<section>。 - 内联样式与 CSS 类混用。 将所有样式移到项目的样式系统。
- 硬编码像素宽度。 使用相对单位（
%、rem、em、max-width）实现灵活布局。 - 图片缺少 alt 文本。 为屏幕阅读器描述图片内容。绝不在有意义的图片上保留
alt=""或alt="image"。 - 像
9999这样的任意 z-index 值。 在 theme/variables 中建立清晰的 z-index 刻度。 - 被注释掉的死代码。 在发布前移除所有调试残留。
- 导入幻觉。 检查每个 import 是否确实存在于
package.json或项目依赖中。 - 缺少 meta 标签。 添加正确的
<title>、description、og:image和社交分享 meta 标签。
战略性遗漏（AI 通常会忘记的内容）
- 没有法律链接。 在页脚添加隐私政策和服务条款链接。
- 没有“返回”导航。 用户流程中存在死胡同。每个页面都需要返回路径。
- 没有自定义 404 页面。 设计一个有帮助、带品牌的“页面未找到”体验。
- 没有表单校验。 为邮箱、必填字段和格式检查添加客户端校验。
- 没有“跳转到内容”链接。 对键盘用户必不可少。添加隐藏的 skip-link。
- 没有 cookie 同意。 如果辖区要求，添加合规同意横幅。
升级技术
升级项目时，从这些高影响技术中选取方案以替换通用模式：
排版升级
- 可变字体动画。 在滚动或 hover 时插值字重或宽度，让文字感觉有生命。
- 描边到填充过渡。 文字开始为描边轮廓，在滚动进入或交互时填充颜色。
- 文字蒙版揭示。 大号排版作为窗口，显示其后视频或动画图像。
布局升级
- 破坏网格 / 非对称。 故意忽略列结构的元素——重叠、出血到屏幕外，或以计算过的随机性偏移。
- 留白最大化。 激进使用负空间，强制聚焦于单个元素。
- 视差卡片堆叠。 在滚动期间吸附并物理堆叠在其他区块上的区块。
- 分屏滚动。 屏幕两半以相反方向滑动。
动效升级
- 带惯性的平滑滚动。 将滚动与浏览器默认行为解耦，获得更厚重、电影感体验。
- 交错进入。 元素以轻微延迟级联进入，结合 Y 轴位移和 opacity 淡入。绝不要一次性挂载所有内容。
- 弹簧物理。 用基于弹簧的运动替换线性缓动，让所有交互元素具有自然、有重量的感觉。
- 滚动驱动揭示。 内容通过扩展蒙版、擦除或 draw-on SVG 路径进入，并与滚动进度绑定。
表面升级
- 真正的玻璃拟态。 超越
backdrop-filter: blur。添加 1px 内边框和细微内阴影以模拟边缘折射。 - 聚光灯边框。 在光标下动态照亮的卡片边框。
- 颗粒和噪点叠加。 一个固定、
pointer-events-none的叠加层，带有细微噪点以打破数字扁平感。 - 有色阴影。 携带背景色相的阴影，而不是使用通用黑色。
修复优先级
按以下顺序应用更改，以最小风险获得最大视觉影响：
- 字体替换 — 即时提升最大，风险最低
- 色板清理 — 移除冲突或过饱和颜色
- hover 和 active 状态 — 让界面感觉有生命
- 布局和间距 — 合适网格、max-width、一致内边距
- 替换通用组件 — 用现代替代方案替换陈词滥调模式
- 添加加载、空和错误状态 — 让它感觉完整
- 打磨排版比例和间距 — 高端最终点缀
规则
- 使用现有技术栈。不要迁移框架或样式库。
- 不要破坏现有功能。每次更改后测试。
- 在导入任何新库之前，先检查项目的依赖文件。
- 如果项目使用 Tailwind，修改 config 前检查版本（v3 vs v4）。
- 如果项目没有框架，使用 vanilla CSS。
- 保持更改可审查且聚焦。优先小而有针对性的改进，而不是大规模重写。