redesign-existing-projects

重新设计技能

工作原理

将此技能应用于现有项目时，请按以下顺序操作：

1. 扫描 — 阅读代码库。识别框架、样式方法（Tailwind、原生 CSS、styled-components 等）和当前设计模式。
2. 诊断 — 按照下面的审查清单检查。列出发现的每一种通用模式、薄弱环节和缺失状态。
3. 修复 — 基于现有技术栈进行针对性升级。不要从头重写，而要改进现有内容。

设计审查

排版

检查并修复以下问题：

• 处处使用浏览器默认字体或 Inter。 换成更有个性的字体。不错的选择包括：Geist、Outfit、Cabinet Grotesk、Satoshi。对于编辑类或创意类项目，可将衬线字体用于标题，无衬线字体用于正文。
• 标题缺乏存在感。 增大展示文字的字号，收紧字间距，降低行高。标题应显得厚重且有意为之。
• 正文行宽过大。 将段落宽度限制在约 65 个字符。适当增大行高以提升可读性。
• 只使用常规（400）和粗体（700）字重。 引入中等（500）和半粗体（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。尝试在主视觉区、功能区块或行动号召区块后添加背景图像，即使只用低不透明度的全宽照片，也能提升页面的视觉表现力。

布局

• 所有内容都居中且对称。 通过错开的边距、混合纵横比，或在居中内容上方使用左对齐标题来打破对称。
• 将三个等宽卡片列作为功能区。 这是最常见的 AI 布局。改用双列交错布局、不对称网格、水平滚动或瀑布流布局。
• 使用 height: 100vh 创建全屏区域。 改用 min-height: 100dvh，以防移动浏览器上布局跳动（iOS Safari 视口错误）。
• 使用复杂的 Flexbox 百分比计算。 改用 CSS Grid，可靠地构建多列结构。
• 没有最大宽度容器。 添加容器约束（约 1200-1440px），并设置自动外边距，避免内容在宽屏上铺满整个页面。
• 通过 Flexbox 强制卡片等高。 允许卡片高度不同，或在内容长度不一时使用瀑布流布局。
• 所有元素都使用相同的圆角。 调整圆角：内部元素更小，容器更柔和。
• 没有重叠或层次感。 元素平铺排列。使用负边距来营造层叠效果和视觉深度。
• 上下内边距对称。 顶部和底部内边距始终相同。根据视觉效果调整，底部内边距通常需要稍大一些。
• 仪表盘总是带有左侧边栏。 可以尝试顶部导航、悬浮命令菜单，或可折叠面板。
• 缺少留白。 将间距加倍，让设计更加舒展。紧凑布局适用于数据仪表盘，而非营销页面。
• 卡片组中的按钮未对齐到底部。 当卡片内容长度不同时，行动号召按钮会出现在不同高度。将按钮固定在每张卡片底部，无论上方内容如何，都能让它们排成整齐的一行。
• 功能列表的起始垂直位置不一致。 在定价表或对比卡片中，各列的功能列表应从相同的 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 文案常见的陈词滥调。 不要使用“Elevate”“Seamless”“Unleash”“Next-Gen”“Game-changer”“Delve”“Tapestry”或“In the world of...”。用朴实、具体的语言表达。
• 成功消息中的感叹号。 删除感叹号。表达自信，不要大声嚷嚷。
• “Oops!”这类错误消息。 直接说明：“连接失败。请重试。”
• 被动语态。 使用主动语态：用“我们无法保存你的更改”，而不是“更改未能保存。”
• 所有博客文章的日期都相同。 随机设置日期，让它们看起来更真实。
• 多个用户使用同一张头像图片。 为每个不同的人使用独特的素材。
• Lorem Ipsum。 不要使用占位拉丁文本。撰写真实的草稿文案。
• 每个标题都使用标题式大小写。 改用句首字母大写格式。

组件模式

• 千篇一律的卡片样式（边框 + 阴影 + 白色背景）。 去掉边框，或只用背景色，或只用间距。只有在层级关系需要通过凸显来传达时，才使用卡片。
• 总是搭配一个实心按钮和一个幽灵按钮。 添加文本链接或三级样式，减少视觉干扰。
• 药丸形的“New”和“Beta”徽标。 尝试方形徽标、旗标或纯文本标签。
• 手风琴式常见问题解答。 改用并排列表、可搜索帮助或内联渐进式展示。
• 带圆点的三卡片轮播式用户评价。 改用瀑布流布局、嵌入式社交媒体帖子或单条轮播引用。
• 三列塔式定价表。 用颜色和强调样式突出推荐档位，而不只是增加高度。
• 所有操作都使用模态框。 对于简单操作，改用内联编辑、侧滑面板或可展开区域，而不是弹窗。
• 头像一律使用圆形。 尝试超椭圆形或圆角方形，减少千篇一律的感觉。
• 明暗模式切换总是使用太阳/月亮开关。 改用下拉菜单、系统偏好检测，或将其整合到设置中。
• 包含 4 列链接的页脚。 精简内容，重点保留主要导航路径和法律要求的链接。

图标

• 只使用 Lucide 或 Feather 图标。 这是 AI 选择图标时的“默认”做法。使用 Phosphor、Heroicons 或自定义图标集来打造差异化。
• “启动”用火箭，“安全”用盾牌。 用不那么直白的图标替代陈词滥调的隐喻（闪电、指纹、火花、保险箱）。
• 图标描边宽度不一致。 检查所有图标，并统一描边粗细。
• 缺少 favicon。 始终添加品牌 favicon。
• 图库里的“多元化团队”照片。 使用真实团队照片、抓拍照片或风格统一的插画，避免令人不适的图库图片。

代码质量

• 堆砌 div。 使用语义化 HTML：<nav>、<main>、<article>、<aside>、<section>。
• 内联样式与 CSS 类混用。 将所有样式移至项目的样式系统中。
• 硬编码的像素宽度。 使用相对单位（%、rem、em、max-width），打造灵活布局。
• 图片缺少 alt 文本。 为屏幕阅读器描述图片内容。对于有意义的图片，绝不要留空 alt="" 或使用 alt="image"。
• 随意设置的 z-index 值，例如 9999。 在主题/变量中建立清晰的 z-index 层级。
• 注释掉的无用代码。 发布前移除所有调试残留。
• 虚构的导入。 检查每个导入是否确实存在于 package.json 或项目依赖中。
• 缺少 meta 标签。 添加适当的 <title>、description、og:image 和社交分享 meta 标签。

战略性遗漏（AI 通常会忘记的事项）

• 没有法律链接。 在页脚添加隐私政策和服务条款链接。
• 没有“返回”导航。 用户流程中存在死胡同。每个页面都需要提供返回方式。
• 没有自定义 404 页面。 设计一个实用且符合品牌形象的“页面未找到”体验。
• 没有表单验证。 为电子邮件、必填字段和格式检查添加客户端验证。
• 没有“跳转到内容”链接。 这对键盘用户至关重要。添加一个隐藏的跳转链接。
• 没有 Cookie 同意提示。 如果司法管辖区有要求，请添加合规的同意横幅。

升级技巧

升级项目时，可采用以下高影响力技巧来替换通用模式：

排版升级

• 可变字体动画。 在滚动或悬停时插值调整字重或字宽，让文字更具生命力。
• 描边到填充的过渡。 文字起初是描边轮廓，进入视口或发生交互时再填充颜色。
• 文字蒙版揭示。 将大号文字作为窗口，展示其背后的视频或动画图像。

布局升级

• 打破网格／不对称布局。 元素有意忽略列结构——相互重叠、延伸到屏幕之外，或以计算后的随机方式偏移。
• 最大化留白。 大胆使用负空间，将注意力集中到单个元素上。
• 视差卡片堆叠。 各区块在滚动时固定并实体般地相互堆叠。
• 分屏滚动。 屏幕的两半朝相反方向滑动。

动效升级

• 带惯性的平滑滚动。 摆脱浏览器默认滚动效果，营造更厚重、更具电影感的体验。
• 依次入场。 元素以轻微延迟依次出现，结合 Y 轴位移和透明度渐变。不要一次性挂载所有元素。
• 弹簧物理效果。 用基于弹簧的动效替代线性缓动，让所有交互元素的运动更自然、更有分量。
• 滚动驱动的揭示效果。 内容通过扩展蒙版、擦除效果或随滚动进度绘制的 SVG 路径进入视野。

表面效果升级

• 真正的玻璃拟态。 不止使用 backdrop-filter: blur。添加 1px 内边框和微妙的内阴影，模拟边缘折射。
• 聚光边框。 卡片边框在光标下动态发亮。
• 颗粒和噪点叠层。 添加固定且 pointer-events-none 的叠层，并加入细微噪点，打破数字界面的平滑感。
• 彩色阴影。 阴影采用背景色相，而非通用的黑色。

修复优先级

按以下顺序应用更改，以最小风险获得最大视觉提升：

1. 更换字体 — 即时提升最大，风险最低
2. 清理调色板 — 移除冲突或过度饱和的颜色
3. 悬停和激活状态 — 让界面更有活力
4. 布局和间距 — 使用合适的网格、最大宽度和统一内边距
5. 替换通用组件 — 用现代替代方案取代陈词滥调的模式
6. 添加加载、空内容和错误状态 — 让体验显得完整
7. 微调排版比例和间距 — 为设计增添高级质感的最后一步

规则

• 使用现有技术栈。不要迁移框架或样式库。
• 不要破坏现有功能。每次更改后都进行测试。
• 导入任何新库之前，先检查项目的依赖文件。
• 如果项目使用 Tailwind，在修改配置前先确认版本（v3 还是 v4）。
• 如果项目没有框架，请使用原生 CSS。
• 让更改易于审查且聚焦。优先进行小而有针对性的改进，而非大规模重写。