redesign-existing-projects

name	redesign-existing-projects
description	把现有网站与应用升级到高端品质。审计当前设计、识别通用 AI 套路，在不破坏功能的前提下应用高端设计标准。适用于任何 CSS 框架或原生 CSS。

重设计技能

工作方式

应用于现有项目时，遵循以下顺序：

1. 扫描 —— 读代码库。识别框架、样式方式（Tailwind、原生 CSS、styled-components 等）与当前设计套路。
2. 诊断 —— 走一遍下面的审计。列出你发现的每一个通用套路、薄弱点与缺失状态。
3. 修复 —— 在现有技术栈内应用有针对性的升级。不要推倒重写。改进已有的东西。

设计审计

字体

检查以下问题并修复：

• 到处是浏览器默认字体或 Inter。 换成有性格的字体。好选择：Geist、Outfit、Cabinet Grotesk、Satoshi。对编辑部/创意类项目，把衬线标题与无衬线正文搭配。
• 标题缺乏存在感。 增大 display 文字尺寸、收紧字距、降低行高。标题应显得厚重、有意图。
• 正文太宽。 把段落宽度限制到约 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 列 Z 字形、非对称栅格、横向滚动或砌墙布局。
• 对全屏分区用 height: 100vh。 换成 min-height: 100dvh，防止移动浏览器上布局跳动（iOS Safari 视口 bug）。
• 复杂的 flexbox 百分比计算。 换成 CSS Grid，做可靠的多列结构。
• 没有 max-width 容器。 加一个容器约束（约 1200-1440px）配自动边距，避免内容在宽屏上通栏拉伸。
• flexbox 强制卡片等高。 内容长度不一时，允许可变高度或用砌墙布局。
• 一切都用统一 border-radius。 变化圆角：内部元素更紧，容器更柔。
• 无重叠或深度。 元素平铺相邻。用负边距制造分层与视觉深度。
• 对称的纵向内边距。 上下内边距总是相同。做视觉微调——底部内边距往往需略大。
• 仪表盘永远有左侧栏。 改试顶部导航、浮动命令菜单或可折叠面板。
• 缺少留白。 把间距翻倍。让设计呼吸。密集布局适合数据仪表盘，不适合营销页。
• 卡片组里按钮未底对齐。 卡片内容长度不同时，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、18 of 43。
• 占位公司名如「Acme Corp」「Nexus」「SmartFlow」。 编造贴合语境、可信的品牌名。
• AI 文案陈词滥调。 绝不用「Elevate」「Seamless」「Unleash」「Next-Gen」「Game-changer」「Delve」「Tapestry」或「In the world of...」。用朴实、具体的语言写作。
• 成功信息里的感叹号。 去掉它们。要自信，不要喧哗。
• 「Oops!」错误信息。 要直接：「Connection failed. Please try again.」
• 被动语态。 用主动语态：「We couldn't save your changes」而非「Mistakes were made.」
• 所有博文日期相同。 随机化日期让其显真实。
• 多个用户用同一张头像。 为每个不同的人用独特素材。
• Lorem Ipsum。 绝不用占位拉丁文。写真实草稿文案。
• 每个标题都用 Title Case。 改用句首大写。

组件套路

• 通用卡片外观（边框 + 阴影 + 白背景）。 移除边框，或只用背景色，或只用间距。卡片应仅在抬升能传达层级时才存在。
• 永远是一个填充按钮 + 一个幽灵按钮。 加文字链接或三级样式以减少视觉噪声。
• 胶囊形的「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. 悬停与激活态 —— 让界面显得活
4. 布局与间距 —— 妥当的栅格、max-width、一致内边距
5. 替换通用组件 —— 把陈词滥调套路换成现代替代
6. 加加载、空、错误状态 —— 让它显得完成
7. 打磨字体尺度与间距 —— 高端的收尾一笔

规则

• 在现有技术栈内工作。不要迁移框架或样式库。
• 不要破坏现有功能。每次改动后测试。
• 引入任何新库前，先检查项目的依赖文件。
• 若项目用 Tailwind，改配置前先检查版本（v3 与 v4）。
• 若项目无框架，用原生 CSS。
• 保持改动可审阅、聚焦。小而有针对性的改进胜过大重写。