重新设计技能
工作原理
当应用于现有项目时，请遵循以下顺序：
- 扫描 — 读取代码库。识别框架、样式方法（Tailwind、原生 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。尝试在英雄区、功能块或行动号召（CTA）后面使用背景图像——即使是低透明度的微妙全宽照片也能增加存在感。
布局
- 所有内容居中且对称。 通过偏移边距、混合宽高比或左对齐标题加居中内容来打破对称。
- 三个等宽卡片列为特色行。 这是最通用的 AI 布局。替换为 2 列锯齿形、不对称网格、水平滚动或瀑布流布局。
- 使用
height: 100vh实现全屏区域。 替换为min-height: 100dvh以防止移动浏览器（iOS Safari 视口错误）出现布局跳跃。 - 复杂的 flexbox 百分比数学。 使用 CSS Grid 实现可靠的多列结构。
- 没有最大宽度容器。 添加一个容器约束（大约 1200-1440px），并设置自动边距，使内容在宽屏上不会从边缘拉伸到边缘。
- 由 flexbox 强制实现的等高卡片。 当内容长度不同时，允许可变高度或使用瀑布流。
- 所有元素统一的边框半径。 变化半径：内部元素更紧，容器更柔和。
- 没有重叠或深度。 元素扁平地放在一起。使用负边距创建分层和视觉深度。
- 对称的垂直内边距。 顶部和底部内边距总是相同。根据视觉进行调整——底部内边距通常需要稍大一些。
- 仪表盘总是有左侧边栏。 尝试顶部导航、浮动命令菜单或可折叠面板。
- 缺少空白区域。 将间距加倍。让设计呼吸。密集布局适用于数据仪表盘，不适用于营销页面。
- 卡片组中的按钮未底部对齐。 当卡片内容长度不同时，行动号召（CTA）最终位于随机高度。将按钮固定在每张卡片的底部，这样无论上方内容如何，它们都能形成一条干净的水平线。
- 功能列表从不同的垂直位置开始。 在定价表或比较卡片中，功能列表应跨所有列从相同的 Y 位置开始。使用列表上方一致的间距或固定高度的标题/价格块。
- 并排元素中不统一的垂直节奏。 将卡片、列或面板并排放置时，对齐所有项目中的共享元素（标题、描述、价格、按钮）。基线未对齐会使布局看起来破碎。
- 数学上对齐但视觉上看起来错误。 按数学方式居中并不总是看起来居中。文本旁边的图标、圆中的播放按钮或按钮中的文本通常需要 1-2px 的视觉调整才能感觉正确。
交互和状态
- 按钮上没有悬停状态。 在悬停时添加背景变化、轻微缩放或平移。
- 没有激活/按下反馈。 在按下时添加微妙的
scale(0.98)或translateY(1px)以模拟物理点击。 - 零持续时间的即时过渡。 为所有交互元素添加平滑过渡（200-300ms）。
- 缺少焦点环。 确保键盘导航有可见的焦点指示器。这是可访问性要求，非可选。
- 没有加载状态。 将通用的圆形旋转器替换为与布局形状匹配的骨架加载器。
- 没有空状态。 一个空荡荡的仪表盘显示为空白是错失的机会。设计一个结构化的“入门指南”视图。
- 没有错误状态。 为表单添加清晰的内联错误消息。不要使用
window.alert()。 - 死链接。 链接到
#的按钮。要么链接到真实目的地，要么在视觉上禁用它们。 - 导航中没有当前页面指示。 以不同方式样式化活动导航链接，以便用户知道他们在哪里。
- 滚动跳跃。 锚点点击立即跳跃。添加
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 文案写作陈词滥调。 切勿使用“提升”、“无缝”、“释放”、“下一代”、“颠覆者”、“深入”、“挂毯”或“在……的世界中”。使用平实、具体语言。
- 成功消息中的感叹号。 移除它们。要自信，而非喧闹。
- “哎呀！”错误消息。 直接说明：“连接失败。请重试。”
- 被动语态。 使用主动语态：“我们无法保存您的更改”而不是“错误已发生”。
- 所有博客文章日期相同。 随机化日期以使其看起来真实。
- 多个用户使用相同的头像图片。 为每个不同的人使用独特的资源。
- Lorem Ipsum。 切勿使用占位符拉丁文本。编写真实的草稿副本。
- 每个标题都使用标题大小写。 改用句子大小写。
组件模式
- 通用卡片外观（边框 + 阴影 + 白色背景）。 移除边框，或仅使用背景色，或仅使用间距。卡片应仅在高度指示层次结构时存在。
- 总是有一个填充按钮 + 一个幽灵按钮。 添加文本链接或三级样式以减少视觉噪音。
- 药丸形状的“新”和“Beta”徽章。 尝试方形徽章、旗帜或纯文本标签。
- 手风琴式常见问答部分。 使用并排列表、可搜索的帮助或内联渐进式披露。
- 带圆点的 3 卡片轮播推荐。 替换为瀑布流布局、嵌入的社交媒体帖子或单个旋转引用。
- 具有 3 种价格的定价表。 用颜色和强调突出推荐层级，而不仅仅是额外高度。
- 所有内容都使用模态框。 对简单操作使用内联编辑、滑动面板或可展开部分，而不是弹出窗口。
- 仅使用圆形头像。 尝试圆角方形或圆角正方形以获得更不通用的外观。
- 浅色/深色切换始终是太阳/月亮开关。 使用下拉菜单、系统偏好检测或将其集成到设置中。
- 具有 4 列的页脚链接农场。 简化。专注于主要导航路径和法律要求的链接。
图标
- 仅限于 Lucide 或 Feather 图标。 这些是“默认”的 AI 图标选择。使用 Phosphor、Heroicons 或自定义集合以区分。
- 火箭用于“启动”，盾牌用于“安全”。 用不太明显的隐喻（闪电、指纹、火花、保险库）替换陈词滥调。
- 图标之间的笔画宽度不一致。 审核所有图标并标准化为一种笔画权重。
- 缺少 favicon。 始终包含品牌化的 favicon。
- 库存“多元化团队”照片。 使用真实团队照片、抓拍或一致的插图风格，而不是令人不安的库存图像。
代码质量
- DIV 泛滥。 使用语义 HTML：
<nav>、<main>、<article>、<aside>、<section>。 - 内联样式与 CSS 类混合。 将所有样式移到项目的样式系统中。
- 硬编码的像素宽度。 使用相对单位（
%、rem、em、max-width）实现灵活布局。 - 图像上缺少替代文本。 为屏幕阅读器描述图像内容。切勿对有意义的图像留下
alt=""或alt="image"。 - 任意的 z-index 值如
9999。 在主题/变量中建立清晰的 z-index 比例。 - 被注释掉的死代码。 在交付前移除所有调试痕迹。
- 导入幻觉。 检查每个导入是否确实存在于
package.json或项目依赖中。 - 缺少元标签。 添加适当的
<title>、description、og:image和社交分享元标签。
策略性遗漏（AI 通常忘记的内容）
- 没有法律链接。 在页脚添加隐私政策和服务条款链接。
- 没有“返回”导航。 用户流程中的死胡同。每个页面都需要一条返回的路。
- 没有自定义 404 页面。 设计一个有用的、品牌化的“页面未找到”体验。
- 没有表单验证。 添加客户端验证，用于电子邮件、必填字段和格式检查。
- 没有“跳到内容”链接。 对键盘用户至关重要。添加一个隐藏的跳转链接。
- 没有 Cookie 同意。 如果司法管辖区要求，添加一个合规的同意横幅。
升级技巧
在升级项目时，从这些高影响力技巧中提取，以替换通用模式：
排版升级
- 可变字体动画。 在滚动或悬停时改变字重或宽度，使文本感觉生动。
- 轮廓到填充过渡。 文本以描边轮廓开始，并在滚动进入或交互时填充颜色。
- 文字遮罩揭示。 大号排版充当窗口，显示其背后的视频或动画图像。
布局升级
- 破碎网格 / 不对称。 故意忽略列结构的元素——重叠、溢出屏幕或通过计算随机性偏移。
- 空白最大化。 激进地使用负空间，迫使焦点集中在一个单一元素上。
- 视差卡片堆叠。 在滚动过程中粘合并物理堆叠在一起的区域。
- 分屏滚动。 屏幕的两半在相反方向滑动。
动态升级
- 带惯性的平滑滚动。 将滚动与浏览器默认设置解耦，以获得更沉重、电影般的感觉。
- 错开入场。 元素以轻微延迟级联进入，结合 Y 轴平移和不透明度淡入。切勿同时挂载所有内容。
- 弹簧物理。 用基于弹簧的运动替换线性缓动，为所有交互元素提供自然、有重量的感觉。
- 滚动驱动揭示。 通过扩展遮罩、擦除或与滚动进度相关的 SVG 路径绘制来进入的内容。
表面升级
- 真正的玻璃态。 超越
backdrop-filter: blur。添加一个 1px 内边框和一个微妙的内部阴影以模拟边缘折射。 - 聚光边框。 在光标下动态照亮的卡片边框。
- 颗粒和噪点叠加。 一个固定的、pointer-events-none 叠加层，带有细微噪点，以打破数字扁平感。
- 彩色、带色相的阴影。 携带背景色相而不是使用通用黑色的阴影。
修复优先级
按此顺序应用更改，以获得最大视觉影响和最小风险：
- 字体替换 — 最大的即时改进，最低风险
- 调色板清理 — 移除冲突或过饱和的颜色
- 悬停和激活状态 — 让界面感觉有响应
- 布局修复 — 解决空白、对齐和对称问题
- 内容替换 — 清理 AI 陈词滥调和占位符
- 组件模式重构 — 替换通用卡片、定价表和推荐
- 高级升级 — 应用动态、视差和玻璃态效果
- 可访问性和策略性遗漏 — 修复导航、表单、404 页面和元标签