---

name: redesign-existing-projects description: "用于升级现有网站或应用，通过审计通用UI模式并应用高级设计修复，无需重写。" category: frontend risk: safe source: community source_repo: Leonxlnx/taste-skill source_type: community date_added: "2026-04-17" author: Leonxlnx tags: [frontend, redesign, design-audit, ui] tools: [claude, cursor, codex, antigravity]

重新设计技能

何时使用

• 当用户要求重新设计、重新样式化、现代化、美化或改进现有网站或应用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。尝试在英雄区块、功能块或CTA后面使用背景图像——即使是低透明度的微妙全宽照片也能增加存在感。