redesign-existing-projects

重新设计现有项目

此技能用于诊断。它会找出现有界面的问题，并直接在原处修复。

设计值

所有具体值（字体、背景色、间距、圆角、图标集、动效时长）都位于本文末尾的设计值部分。该部分是唯一可信来源。下面的审查会告诉你要检查什么；设计值会告诉你要替换成什么。

绝不要自行编造设计值中没有的字体、十六进制颜色值、间距数值、圆角或缓动曲线。如果设计值未涵盖某种情况，请先询问，不要猜测。

要将此技能适配到其他设计系统，只需编辑设计值部分。整套审查会自动遵循其中的设置。

工作原理

1. 扫描——阅读代码库。识别所用框架、样式方法（Tailwind、原生 CSS、styled-components、CSS modules）和当前设计模式。
2. 诊断——执行下面的完整审查。列出发现的所有通用模式、薄弱环节和缺失状态。修复前先报告。
3. 修复——在现有技术栈中进行有针对性的改进，并按照修复优先级顺序处理。不要从头重写，而要改进现有内容。

设计审查

排版

• **使用浏览器默认字体，或 Inter / Roboto / Arial / Open Sans / Helvetica。**替换为设计值部分批准的字体。
• **同一网站使用两种字体。**统一为一种，除非项目说明明确要求使用一组字体。
• **任何地方使用斜体。**移除斜体。改用字重、字号或颜色来强调。
• **超粗字重（800、900、black）。**最高使用半粗体或粗体。
• **只使用常规体（400）和粗体（700）。**引入中等字重（500）和半粗体（600），以形成更细致的层次。
• **标题缺乏表现力。**增大展示字号并收紧字间距，让标题显得厚重而有分量。调整字距时，不要超出字号比例中已有的行高范围。
• **正文行宽过大。**将段落宽度限制在约 65 个字符。
• **数字使用比例字体。**对于数据密集型界面，启用 font-variant-numeric: tabular-nums。
• **缺少字间距调整。**大标题使用负字距，小标签和大写文字使用正字距。
• **副标题到处都使用全大写。**改用句首字母大写或小型大写字母。不要改用斜体。
• **出现孤行词。**最后一行只有一个词。标题使用 text-wrap: balance，正文使用 text-wrap: pretty 来修正。
• **文案中使用连字符。**标题、正文或标签中不要使用 -。改写该短语。
• **字号随意或不符合比例。**将所有字号调整为 Tailwind 字号比例。不要保留 text-[19px]、font-size: 22px 或 1.4rem。如果字号不符合某个档位，则调整到最接近的较低档位，并采用该档位对应的行高。不要同时采用上面两条中提到的独立自定义行高；只在匹配档位的取值范围内调整，以免规则互相冲突。
• **按钮文字字号不符合比例。**主按钮使用 text-base 半粗体。页眉按钮使用 text-sm 半粗体。

颜色与表面

• 背景颜色超出批准的调色板。 将所有深色表面调整为批准的深色值。不要替换为 #0a0a0a、#121212 或带蓝色色调的海军蓝。
• 任何形式的渐变背景。 背景应为纯色。彻底移除线性、径向和网格渐变背景。唯一允许的渐变是英雄区标题文字上的渐变。
• 纯色文字的英雄区标题。 为当前主题应用从左到右的批准文字渐变。
• 紫色和蓝色的“AI 渐变”美学。 这是最常见的 AI 标志性风格。改用纯色中性色基底和一种经过审慎选择的强调色。
• 过饱和的强调色。 饱和度保持在 80% 以下，让强调色与中性色协调，而不是过于刺眼。
• 一种以上的强调色。 选一种，其余都移除。
• 混用暖灰和冷灰。 统一采用一种灰色色系，并保持色调一致。
• 通用的 box-shadow。 让阴影带有背景色相，而不是使用低透明度的纯黑色。
• 没有任何纹理的纯色表面。 添加细微的噪点或颗粒叠加层。不要用渐变来解决纯色表面的单调感。
• 光照方向不一致。 检查每个阴影，确保它们体现同一个光源。
• 浅色页面中随机出现深色区块，或反之。 这看起来像是复制粘贴造成的失误。统一采用一种背景色调，或者过渡到相邻的批准色阶，不要在奶油色页面中突然跳到 #111。
• 空洞且缺乏层次感的区块。 添加高质量的背景图片，并以蒙版或低透明度叠加；也可以添加细微图案。没有真实素材时，请使用 https://picsum.photos/seed/{name}/1920/1080。切勿用环境渐变来解决。

布局

• 所有内容都居中且对称。 通过偏移边距、混合纵横比，或让标题左对齐而内容居中，打破对称。
• 特色区块采用三列等宽卡片。 这是最常见的 AI 布局。三到五项优势作为内容是合适的；但布局应采用双列交错、不对称网格、水平滚动或瀑布流。
• 全屏区块使用 height: 100vh。 改用 min-height: 100dvh，避免 iOS Safari 上的布局跳动。
• 复杂的 Flexbox 百分比计算。 改用 CSS Grid。
• 没有最大宽度容器。 添加宽度约为 1200 到 1440px 且左右边距自动的约束。英雄区标题和副标题的宽度上限为 680px。
• 用 Flexbox 强行让卡片等高。 允许高度变化；如果内容长度不一，则使用瀑布流。
• 凭感觉选择圆角。 所有圆角都应来自 Tailwind 的尺寸比例。当一个形状位于另一个形状内部，且间距小于 32px 时，内层圆角等于外层圆角减去间距，但结果必须大于 2。
• 随意设置间距值。 所有外边距、内边距和间隔都应符合批准的间距比例。
• 没有重叠或层次感。 元素只是平铺在彼此旁边。使用负外边距进行叠放。
• 上下内边距对称。 根据视觉效果调整。底部内边距通常应略大一些。
• 仪表板总是带有左侧边栏。 可以尝试顶部导航、悬浮命令菜单或可折叠面板。
• 留白不足。 将间距提高一个级别，让布局更舒展。紧凑布局适合数据仪表板，不适合营销页面。
• 卡片组中的按钮底部未对齐。 将 CTA 固定在每张卡片底部，使它们排成整齐的水平线。
• 特色列表的起始垂直位置不一致。 在定价和对比列中，列表必须从相同的 Y 位置开始。为标题和价格区块设置固定高度。
• 并排元素的垂直节奏不一致。 对齐所有项目的标题、描述、价格和按钮。基线未对齐会显得布局出了问题。
• 数学上对齐，但视觉上不协调。 文字旁的图标、圆圈中的播放按钮和按钮中的文字，通常需要进行一到两个像素的视觉校正。

交互与状态

• 默认缓动曲线。 ease、linear 和 ease-in-out 会让动画显得生硬。请改用 Design Values 中的基础曲线；移动动画使用 duration-500，颜色或不透明度动画使用 duration-300，时长绝不低于 200ms。
• 滚动时直接出现的内容。 各个区块进入视口时，应短距离上移并淡入，整个过程持续 600 到 800ms，且只播放一次。
• 用滚动监听器驱动动画。 用 IntersectionObserver 或 Framer Motion 的 whileInView 替换 window.addEventListener('scroll')；逐帧监听会显著影响移动设备性能。
• 紧贴顶部边缘的导航栏。 让导航栏略微悬浮于边缘之外，尺寸贴合内容，并使用半透明模糊表面。
• 瞬间切换的菜单图标。 在打开和关闭状态之间的切换应采用基础曲线进行动画处理。
• 拥挤的移动端下拉菜单。 使用全高面板，并让链接按阅读顺序依次出现（间隔约 60ms，整个序列不超过 400ms）。
• 未处理减少动态效果的偏好。 在 prefers-reduced-motion 下，用简单淡入淡出替代移动效果。
• 按钮没有悬停状态。 添加背景色变化、轻微缩放或位移效果。
• 没有激活或按下反馈。 按下时添加 scale(0.98) 或 translateY(1px)。
• 缺少焦点环。 可见的焦点指示器是无障碍要求，不是样式选择。
• 没有加载状态。 用形状与实际布局相符的骨架屏替代圆形加载图标。
• 没有空状态。 设计一个完整的“入门指南”视图，而不是留下一块空白面板。
• 没有错误状态。 在表单中显示具体的内联错误。绝不要使用 window.alert()。
• 失效链接。 不要让按钮指向 #。为它们添加有效链接，或在视觉上将其禁用。
• 导航中没有当前页面指示器。 用独特样式区分当前激活的链接。
• 滚动时页面跳动。 为锚点导航添加 scroll-behavior: smooth。
• 为 top、left、width 或 height 添加动画。 改用 transform 和 opacity，以启用 GPU 加速。

内容

• 占位人物。 常见姓名和重复的人脸会显得虚假。使用符合受众特征的完整具体姓名，并为每个人选用不同的面孔。
• 过于整齐的数字。 真实指标会包含小数和不规则的尾数；真实价格也应符合实际定价。列表中的日期应有所变化。
• 泛泛的品牌名称。 客户标识和公司名称应听起来像是来自产品所属的行业。
• 空洞的营销用语。 删除“革新”“增强效能”“尖端”“毫不费力”“改变你的工作流”“更上一层楼”“释放……的力量”“世界一流”等说法。直接说明产品的实际功能。
• 含糊的价值主张。 “简化”和“优化”没有说明具体价值。请改用可衡量的结果：“将每周报告所需时间从 4 小时缩短至 15 分钟”。
• 只列功能、不说成果。 每条功能介绍都应说明它对用户意味着什么。
• 缺乏说服力的 CTA。 绝不要使用“了解更多”或“提交”。请使用动词并说明用户能获得什么：“开始免费试用”“预约演示”。
• 首屏内容中的 CTA 相互竞争。 每个页面只设置一个主要操作。
• 证明材料埋在页面底部。 将推荐语、标识和数据放到它们所支持的主张旁边。
• 没有降低用户风险。 至少提供以下一项：免费试用、免费方案、无需信用卡、随时取消或退款保证。
• 语气夸张或俏皮的系统消息。 确认消息应平静且具体（“发票已发送给 Dana”）。错误消息应说明失败事项和下一步操作（“上传失败。文件超过 20 MB。”）。不要使用感叹号或感叹词。
• 使用被动语态。 明确说明谁做了什么：“我们无法保存你的草稿。”
• 占位文本。 任何“在此填写标题”或拉丁文占位内容都会阻碍发布。请撰写真实的文案草稿。
• 标题处处使用首字母大写的标题格式。 标题和按钮应使用句首字母大写格式。

组件模式

• 通用卡片样式：边框加阴影加白色背景。 改用单纯的背景色或间距。只有在层级关系需要通过高度差来体现时，才使用卡片。
• 卡片只在一侧加边框。 绝不这样做。边框要么环绕整个卡片，要么完全不加。
• 始终搭配一个实心按钮和一个幽灵按钮。 加入文本链接或三级样式，减少视觉噪声。
• 胶囊形「New」和「Beta」徽标。 尝试方形徽标、旗标或纯文本标签。
• 手风琴式 FAQ。 FAQ 部分本身应保留，包含 6 到 12 个问题。换一种模式：并排列表、可搜索帮助，或内联渐进式展开，都比一列箭头更易读。
• 带圆点的三卡片轮播推荐语。 改用瀑布流墙、嵌入式社交媒体帖子，或一条轮播引言。
• 三列高塔式定价表。 用颜色和字重突出推荐档位，而不是增加高度。
• 所有内容都用模态框。 简单操作改用内联编辑、滑出面板或可展开区块。
• 头像一律用圆形。 尝试超椭圆形或圆角方形。
• 用太阳和月亮开关切换浅色和深色模式。 改用下拉菜单、系统偏好检测或设置项。
• 四列页脚链接堆。 精简为主要入口和法律要求的链接。

图标和图像

• Lucide、Feather、Material Icons 或 Material Symbols。 这些是 AI 的默认选择。改用「设计价值」部分中批准的图标集。
• 用火箭表示「启动」、用盾牌表示「安全」。 用闪电、指纹、火花、保险库等替代陈词滥调的隐喻。
• 描边粗细不一致。 将所有图标统一为一种描边粗细。
• 缺少网站图标。 务必提供品牌专属图标。
• 库存照片中的「多元团队」。 使用真实照片、抓拍照片，或统一风格的插画。

代码质量

• 一堆 <div>。 使用 <nav>、<main>、<article>、<aside>、<section>。
• 内联样式和类混用。 将所有样式移入项目的样式系统。
• 硬编码像素宽度。 使用 %、rem、em 和 max-width。
• 缺少替代文本。 描述内容。对于有意义的图像，绝不要将 alt="image" 留空泛地使用。
• 随意设置 z-index，例如 9999。 在主题中建立一套层级规范。
• 注释掉的无用代码。 删除所有调试残留。
• 臆造导入项。 验证每个导入项都存在于项目依赖中。
• 缺少 meta 标签。 添加 <title>、description、og:image 和社交分享标签。

战略性遗漏

AI 通常会完全忘记的内容：

• 没有法律链接。 在页脚添加隐私政策和服务条款。
• 没有返回导航。 每个页面都需要提供离开页面的方式。
• 没有自定义 404 页面。 设计一个带有品牌风格且能提供帮助的页面。
• 没有表单验证。 在客户端检查电子邮件格式和必填字段。
• 没有跳转到正文的链接。 这对键盘用户至关重要。
• 没有 Cookie 同意提示。 在司法辖区要求时，添加符合规定的横幅。
• 没有考虑落地页索引。 仅用于广告且有时限的优惠页面应设为 noindex。常青页面需要合适的标题、meta 描述、内部链接，以及用于 AEO 的纯文本问答式 FAQ。

修复优先级

按以下顺序，以最低风险实现最大的视觉影响：

1. 替换字体 —— 即时提升效果最大，风险最低
2. 清理颜色和表面样式 —— 采用批准的调色板，移除背景渐变
3. 悬停、激活和焦点状态 —— 让界面更有活力
4. 布局和间距 —— 网格、最大宽度、间距比例、嵌套圆角公式
5. 动效调整 —— 基础缓动曲线、通过 IntersectionObserver 实现滚动显现、悬浮导航和移动端菜单
6. 替换通用组件 —— 用上述替代方案取代陈词滥调的模式
7. 加载、空状态和错误状态 —— 让产品显得完整
8. 文案调整 —— 去除陈词滥调、增加具体内容、改进 CTA
9. 优化字体比例 —— 最后的精致打磨

规则

• 使用现有技术栈。不要迁移框架或样式库。
• 不要破坏现有功能。每次更改后都要测试。
• 应用修复前先报告诊断结果。让用户决定是否否决相关事项。
• 导入任何新库前，先检查项目的依赖文件。
• 如果项目使用 Tailwind，修改配置前先检查版本是 v3 还是 v4。
• 如果没有框架，请使用原生 CSS。
• 保持更改易于审查且聚焦。优先进行小幅、有针对性的改进，而不是大规模重写。
• 切勿臆造设计值。如果设计值中没有，请询问。

设计值

本技能的唯一事实来源。编辑此部分可使其适配你自己的设计系统。

字体： Geist、Manrope、Geist Mono、Poppins。绝不使用 Inter、Roboto、Arial、Open Sans、Helvetica。不要使用斜体。字重不得高于粗体。

深色背景： #000000 · #181818 · #1F1F1F · #272727 · #313131 · #131209

主视觉标题渐变： 深色主题 #FFFFFF → #9B9B9B；浅色主题 #000000 → #666666。从左到右，仅应用于文本。

间距： 0、2、4、8、12、16、24、32、40、48、64、80、96px。主按钮垂直方向 8px，水平方向 12px。

圆角： 仅使用 Tailwind 值。嵌套形状之间的间距小于 32px 时，使用 inner = outer − gap，且仅当计算结果大于 2 时应用。

图标： Phosphor、Solar、Iconamoon。

动效： 基础曲线 ease-[cubic-bezier(0.22,1,0.36,1)]，位移使用 duration-500，颜色和不透明度使用 duration-300。滚动显现效果通过 IntersectionObserver 实现，时长为 600 到 800ms。遵循 prefers-reduced-motion 设置。

字号比例： Tailwind 默认值。

致谢

此技能的部分内容改编自 Leon Lin（@LexnLin）以 MIT 许可发布的 taste-skill。其重新设计审查结构、内容真实性检查，以及动效和导航理念为此处对应部分提供了参考；这些部分此后均已重写。

MIT License

Copyright (c) 2026 Leonxlnx

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.