Redesign Existing Projects

Redesign 技能

何时使用

• 用户要求重新设计、改换风格、现代化、打磨或改进现有网站或应用的 UI 时使用。
• 任务是审计当前前端代码并进行有针对性的视觉改进，而不改变产品架构时使用。
• 设计感觉通用、AI 生成、间距粗糙、视觉扁平，或缺少响应式、交互、加载、空态、错误状态时使用。

局限性

• 本技能用于升级现有 UI，默认不授权框架迁移、信息架构重写或产品范围扩展。
• 进行视觉变更时，保留正常工作的行为、路由、数据流、无障碍语义和测试。
• 在认为工作完成之前，需在实际应用中跨支持的浏览器和视口尺寸验证重新设计的页面。

工作原理

应用到现有项目时，按以下顺序执行：

1. 扫描 — 阅读代码库，识别框架、样式方案（Tailwind、原生 CSS、styled-components 等）和当前设计模式。
2. 诊断 — 运行下方审计清单，列出发现的所有通用模式、薄弱点和缺失状态。
3. 修复 — 基于现有技术栈进行有针对性的升级，不要从头重写，在现有基础上改进。

设计审计

排版

检查并修复以下问题：

• 到处使用浏览器默认字体或 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 布局。替换为两列交错、非对称网格、水平滚动或瀑布流布局。
• 使用 height: 100vh 做全屏区块。 替换为 min-height: 100dvh 以防止移动浏览器上的布局跳动（iOS Safari 视口 bug）。
• 复杂的 flexbox 百分比计算。 替换为 CSS Grid 以获得可靠的多列结构。
• 没有 max-width 容器。 添加容器约束（约 1200-1440px）并设置自动边距，防止内容在宽屏上从边缘拉伸到边缘。
• flexbox 强制等高卡片。 允许可变高度，或在内容长度不一时使用瀑布流布局。
• 所有元素统一的 border-radius。 变化圆角大小：内部元素收紧，容器柔和。
• 没有重叠或深度。 元素扁平地并排排列。使用负 margin 创建层次和视觉深度。
• 对称的垂直内边距。 上下内边距总是相同。视觉上调整——底部内边距通常需要稍大一些。
• 仪表盘总是左侧边栏。 尝试顶部导航、浮动命令菜单或可折叠面板。
• 缺少留白。 把间距翻倍。让设计呼吸。密集布局适合数据仪表盘，不适合营销页面。
• 卡片组中的按钮没有底部对齐。 当卡片内容长度不同时，CTA 会出现在随机高度。将按钮固定在每张卡片底部，使其形成一条水平线，不受上方内容影响。
• 功能列表起始位置不同。 在定价表或对比卡片中，功能列表应在所有列中从相同 Y 位置开始。使用列表上方的一致间距或固定高度的标题/价格区块。
• 并排元素的垂直节奏不一致。 并排放置卡片、列或面板时，跨所有项目对齐共享元素（标题、描述、价格、按钮）。错位的基线让布局看起来破碎。
• 数学上居中但视觉上感觉偏了。 数学居中不一定看起来居中。文字旁的图标、圆圈中的播放按钮或按钮中的文字通常需要 1-2px 的视觉调整才感觉对。

交互与状态

• 按钮没有 hover 状态。 添加背景偏移、轻微缩放或平移。
• 没有 active/pressed 反馈。 按下时添加微妙的 scale(0.98) 或 translateY(1px) 模拟物理点击。
• 零时长的瞬时过渡。 为所有交互元素添加平滑过渡（200-300ms）。
• 缺少 focus ring。 确保键盘导航有可见的焦点指示器。这是无障碍要求，不是可选的。
• 没有加载状态。 用骨架屏替换通用的圆形加载器，骨架屏应匹配布局形状。
• 没有空态。 空仪表盘什么都没显示是错失的机会。设计一个精心组合的"开始使用"视图。
• 没有错误状态。 为表单添加清晰的行内错误消息。不要使用 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" 徽章。 尝试方形徽章、旗帜或纯文本标签。
• 手风琴式 FAQ 区块。 使用并排列表、可搜索帮助或内联渐进式展开。
• 3 张卡片轮播式客户评价带圆点。 替换为瀑布流墙、嵌入式社交帖子或单条轮播引用。
• 3 列定价表。 用颜色和强调高亮推荐层级，而不仅仅是增加高度。
• 什么都用模态框。 简单操作使用行内编辑、滑出面板或可展开区块替代弹窗。
• 只用圆形头像。 尝试超椭圆或圆角方形以减少通用感。
• 明暗切换总是太阳/月亮开关。 使用下拉菜单、系统偏好检测或集成到设置中。
• 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 体系。
• 注释掉的死代码。 发布前移除所有调试残留。
• Import 幻觉。 检查每个 import 是否真实存在于 package.json 或项目依赖中。
• 缺少 meta 标签。 添加正确的 <title>、description、og:image 和社交分享 meta 标签。

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

• 没有法律链接。 在页脚添加隐私政策和服务条款链接。
• 没有"返回"导航。 用户流程中的死胡同。每个页面都需要返回路径。
• 没有自定义 404 页面。 设计一个有用的、品牌化的"页面未找到"体验。
• 没有表单验证。 为邮箱、必填字段和格式检查添加客户端验证。
• 没有"跳转到内容"链接。 对键盘用户至关重要。添加一个隐藏的跳转链接。
• 没有 cookie 同意。 如果管辖区要求，添加合规的同意横幅。

升级技巧

升级项目时，从以下高影响力技巧中选取以替换通用模式：

排版升级

• 可变字体动画。 在滚动或悬停时插值字重或字宽，让文字感觉活起来。
• 描边到填充过渡。 文字以描边轮廓开始，在滚动进入或交互时填充颜色。
• 文字遮罩揭示。 大号排版作为窗口，展示后方的视频或动画图像。

布局升级

• 打破网格 / 非对称。 元素故意忽略列结构——重叠、溢出屏幕或用精心计算的随机偏移。
• 留白最大化。 激进地使用负空间迫使注意力聚焦单一元素。
• 视差卡片堆叠。 区块在滚动时固定并在物理上层叠。
• 分屏滚动。 屏幕两半向相反方向滑动。

动效升级

• 带惯性的平滑滚动。 将滚动与浏览器默认行为解耦，获得更厚重、电影般的感受。
• 交错入场。 元素以微小延迟级联进入，结合 Y 轴平移与透明度淡入。绝不同时挂载所有元素。
• 弹簧物理。 用基于弹簧的运动替换线性缓动，为所有交互元素带来自然、有重量感的体验。
• 滚动驱动揭示。 内容通过扩展遮罩、擦除或绑定到滚动进度的 SVG 路径绘制进入。

表面升级

• 真正的毛玻璃效果。 超越 backdrop-filter: blur。添加 1px 内边框和微妙内阴影模拟边缘折射。
• 聚光灯边框。 在光标下动态发光的卡片边框。
• 纹理和噪点叠加。 固定的、pointer-events-none 的叠加层带有微妙噪点，打破数字扁平感。
• 彩色阴影。 携带背景色调的阴影，而非使用通用黑色。

修复优先级

按以下顺序应用变更，以最小风险获得最大视觉冲击：

1. 字体替换 — 最大的即时改进，最低风险
2. 颜色方案清理 — 移除冲突或过度饱和的颜色
3. Hover 和 active 状态 — 让界面感觉活起来
4. 布局和间距 — 正确的网格、max-width、一致的内边距
5. 替换通用组件 — 将陈词滥调的模式替换为现代替代方案
6. 添加加载、空态和错误状态 — 让它感觉完成
7. 打磨排版比例和间距 — 高级的最终润色

规则

• 使用现有技术栈工作，不迁移框架或样式库。
• 不破坏现有功能，每次变更后测试。
• 导入任何新库前，先检查项目的依赖文件。
• 如果项目使用 Tailwind，修改配置前检查版本（v3 vs v4）。
• 如果项目没有框架，使用原生 CSS。
• 保持变更可审查且聚焦。小而有针对性的改进胜过大重写。