# Redesign Existing Projects > 当需要升级现有网站或应用时使用，通过审计通用 UI 模式并应用高级设计修复，无需重写。触发词：redesign、restyle、modernize、polish、upgrade UI、design audit、设计优化、界面改版、UI 升级、视觉优化 - Skill: `kscz0000/redesign-existing-projects` (Agent Skill) - Install (CLI): `npx skillmds@latest add kscz0000/redesign-existing-projects` - Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/redesign-existing-projects/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Security - Author: kscz0000 (https://skillmd.com/u/kscz0000) - Updated: 2026-09-21 - Page: https://skillmd.com/skills/kscz0000/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：`