redesign-existing-projects

以 [[design-foundation]] 为基础——hallmark 的 6 项规范 + slop-test 是共同的底线（不可妥协）；此 skill 在此基础上增添 风格，而非取代底线。

Redesign Skill

工作方式

将此 skill 应用于现有项目时，请按以下顺序操作：

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 背后使用背景图像——即使只添加一张不透明度较低的全宽照片，也能增强视觉表现力。

布局

• 所有内容都居中且对称。 通过错开的边距、混合使用不同宽高比，或在居中内容上方设置左对齐的标题来打破对称。
• 功能区采用三列等宽卡片。 这是最常见的 AI 布局。改用两列交错布局、不对称网格、水平滚动或瀑布流布局。
• 使用 height: 100vh 创建全屏区块。 改用 min-height: 100dvh，避免移动浏览器出现布局跳动（iOS Safari 视口错误）。
• 复杂的 Flexbox 百分比计算。 改用 CSS Grid，可靠地构建多列结构。
• 没有最大宽度容器。 添加容器约束（约 1200-1440px），并设置自动外边距，避免宽屏上的内容铺满整个页面。
• 通过 Flexbox 强制卡片等高。 允许卡片高度不同，或在内容长度不一时使用瀑布流布局。
• 所有元素都使用统一的圆角半径。 灵活调整圆角：内部元素的圆角更小，容器的圆角更柔和。
• 没有重叠或层次感。 元素平铺并排。使用负外边距来营造叠层效果和视觉深度。
• 上下内边距对称。 顶部和底部内边距始终相同。根据视觉效果调整——底部内边距通常需要略大一些。
• 仪表盘总是带有左侧边栏。 可以尝试顶部导航、浮动命令菜单或可折叠面板。
• 缺少留白。 将间距加倍，让设计更舒展。紧凑布局适用于数据仪表盘，而非营销页面。
• 表格或列表中的行因长文本（文件名、标题、电子邮件）无限换行而高于其他行。 在使用 table-layout: fixed 且数据为真实内容（而非占位文本）时，这种情况尤为明显——紧凑的分页表格可能会膨胀到需要滚动数千像素。通过 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 将单元格限制为单行显示（如果在 table-layout: fixed 下截断未生效，可添加 max-width: 0），并在 title 属性或工具提示中保留完整值，这样只限制布局，不会丢失信息。
• 卡片组中的按钮没有底部对齐。 卡片内容长度不一时，行动号召按钮会散落在不同高度。将按钮固定在每张卡片的底部，无论上方内容如何变化，都能让按钮整齐地排成一行。
• 功能列表的起始垂直位置不一致。 在定价表或对比卡片中，各列的功能列表应从同一 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、+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。 不要使用占位拉丁文本。编写真实的草稿文案。
• 所有标题都使用标题式大小写。 改用句式大小写。

组件模式

• 通用卡片样式（边框 + 阴影 + 白色背景）。 移除边框，或仅使用背景色，或仅使用间距。只有在层级关系需要通过海拔高度来体现时，才应使用卡片。
• 卡片左侧边缘的彩色强调条（border-left: 3-4px solid 或 ::before 条纹）。 这是老套的 AI/Bootstrap“警示/提示框”标志——看起来像状态标记，生硬的竖线会与卡片的圆角冲突，而且每张卡片上都重复出现，最终让整个页面看起来像日志查看器。应将强调色/品牌色融入其他元素：头像/图标、小圆点或标签、标题颜色，或铺满整个区域的柔和色调——不要放在侧边当作脊线。对于统一应用于每张卡片顶部的强调条，结论也一样。
• 总是使用一个实心按钮 + 一个幽灵按钮。 添加文本链接或三级样式，减少视觉噪声。
• 胶囊形“New”和“Beta”徽章。 可尝试方形徽章、旗标或纯文本标签。
• 手风琴式 FAQ 区块。 可改用并排列表、可搜索帮助或行内渐进式展开内容。
• 带圆点的 3 卡片轮播评价。 可替换为瀑布流墙、嵌入的社交帖子，或单条轮换显示的引述。
• 三列高塔式定价表。 用颜色和强调样式突出推荐档位，而不只是增加高度。
• 所有内容都使用模态框。 简单操作可改用行内编辑、侧滑面板或可展开区块，避免弹窗。
• 只使用圆形头像。 可尝试圆角超椭圆形或圆角方形，让视觉效果不那么千篇一律。
• 浅色/深色切换总是用太阳/月亮开关。 可使用下拉菜单、检测系统偏好，或将其整合到设置中。
• 四列页脚链接堆。 精简内容，聚焦主要导航路径和法律要求的链接。

图标

• 只使用 Lucide 或 Feather 图标。 这是 AI 图标的“默认”选择。可使用 Phosphor、Heroicons 或自定义图标集来体现差异。
• 用火箭表示“启动”，用盾牌表示“安全”。 用不那么明显的图标替换陈词滥调的隐喻（闪电、指纹、火花、保险库）。
• 图标的描边宽度不一致。 检查所有图标，并统一描边粗细。
• 缺少 favicon。 始终包含品牌 favicon。
• 库存照片中的“多元化团队”。 使用真实团队照片、抓拍照片或风格统一的插画，避免令人不适的库存图片。

代码质量

• div 堆砌。 使用语义化 HTML：<nav>、<main>、<article>、<aside>、<section>。
• 行内样式与 CSS 类混用。 将所有样式移至项目的样式系统中。
• 硬编码像素宽度。 使用相对单位（%、rem、em、max-width），以实现灵活布局。
• 图片缺少 alt 文本。 为屏幕阅读器描述图片内容。对于有意义的图片，绝不要将 alt="" 或 alt="image" 留空或作为占位内容。
• 随意设置类似 9999 的 z-index 值。 在主题/变量中建立清晰的 z-index 刻度。
• 注释掉的无用代码。 发布前移除所有调试残留。
• 虚构的导入项。 检查每个导入项是否确实存在于 package.json 或项目依赖中。
• 缺少 meta 标签。 添加适当的 <title>、description、og:image 和社交分享 meta 标签。

策略性遗漏（AI 通常会忘记的内容）

• 没有法律链接。 在页脚添加隐私政策和服务条款链接。
• 没有“返回”导航。 用户流程中存在死胡同。每个页面都需要提供返回方式。
• 没有自定义 404 页面。 设计友好且符合品牌风格的“找不到页面”体验。
• 没有表单验证。 对电子邮件、必填字段和格式添加客户端验证。
• 没有“跳转到内容”链接。 这对键盘用户至关重要。添加隐藏的跳转链接。
• 没有 Cookie 同意机制。 如果司法管辖区有相关要求，请添加合规的同意横幅。

升级技巧

升级项目时，可借鉴以下高影响力技巧，替换通用模式：

排版升级

• 可变字体动画。 在滚动或悬停时插值调整字重或宽度，让文字更具生命力。
• 描边到填充的过渡效果。 文字初始为描边轮廓，在滚动进入视口或交互时填充颜色。
• 文字遮罩揭示。 让大字号文字成为窗口，透出其背后的影片或动画图像。

布局升级

• 打破网格／不对称布局。 刻意忽略分栏结构的元素——彼此重叠、延伸出屏幕边缘，或以经过计算的随机偏移排列。
• 最大化留白。 大量使用负空间，让注意力集中在单个元素上。
• 视差卡片堆叠。 滚动时，区块固定并在彼此之上实际堆叠。
• 分屏滚动。 屏幕的两半朝相反方向滑动。

动效升级

• 带惯性的平滑滚动。 让滚动脱离浏览器默认行为，营造更厚重、更具电影感的体验。
• 错落入场。 元素以细微延迟依次出现，同时结合 Y 轴位移和透明度淡入。不要一次性挂载所有内容。
• 弹簧物理效果。 将线性缓动替换为基于弹簧的动效，让所有交互元素呈现自然、厚重的感觉。
• 滚动驱动的揭示效果。 内容通过扩展遮罩、擦除效果或随滚动进度绘制的 SVG 路径进入视口。

表面效果升级

• 真正的玻璃拟态。 不要止步于 backdrop-filter: blur。添加 1px 内边框和细微的内阴影，模拟边缘折射。
• 聚光边框。 卡片边框在光标经过时动态发亮。
• 颗粒与噪点叠加层。 添加固定的、pointer-events-none 的叠加层，带有细微噪点，以打破数字界面的平板感。
• 彩色阴影。 让阴影带有背景的色相，而不是使用通用的黑色。

修复优先级

按以下顺序应用更改，以最小风险获得最大的视觉效果：

1. 更换字体 — 即时提升效果最大，风险最低
2. 整理色彩方案 — 移除冲突或过度饱和的颜色
3. 悬停和激活状态 — 让界面更有活力
4. 布局和间距 — 使用合适的网格、最大宽度和一致的内边距
5. 替换通用组件 — 用现代替代方案取代陈词滥调的模式
6. 添加加载、空状态和错误状态 — 让体验更完整
7. 打磨排版比例和间距 — 完成高端质感的最后一步

规则

• 使用现有技术栈。不要迁移框架或样式库。
• 不要破坏现有功能。每次更改后都要测试。
• 导入任何新库之前，先检查项目的依赖文件。
• 如果项目使用 Tailwind，在修改配置前先确认版本（v3 还是 v4）。
• 如果项目没有框架，使用原生 CSS。
• 保持更改便于审查且聚焦。优先进行小而有针对性的改进，而不是大规模重写。

---

输出报告

完成所有主要技能任务后，向 wiki 编写一份提案草稿。

步骤

1. 构建文件名：

• 格式：DDMMYY-<ten>.md
• DDMMYY = 今天的日期（例如，2026 年 6 月 2 日对应 020626）
• <ten> = 用 2–4 个 kebab-case 单词概括完成的工作（例如，landing-page-coteccons、brand-kit-fintech、ingest-auth-spec）

2. 编写 llmwiki/wiki/draft/uiux/DDMMYY-<ten>.md：

# DDMMYY-<ten>
**Type:** draft
**Status:** proposed
**Tags:** <skill-name>, output-report
**Proposed:** YYYY-MM-DD

## What
<One sentence — what this skill invocation produced or decided>

## Output
<Key artefacts, files created/modified, or decisions made>

## Files
| File | Action |
|------|--------|
| `path/to/file` | created / modified |

## Notes
- Invoked via: `/<skill-name>` skill

## Origin
- **Draft:** `wiki/draft/uiux/DDMMYY-<ten>.md`
- **Commit:** _(filled by verify-before-commit)_
- **Date promoted:** _(filled by verify-before-commit)_

3. 更新 wiki 索引和日志：

• llmwiki/wiki/index.md — 追加一行：| [DDMMYY-<ten>](draft/uiux/DDMMYY-<ten>.md) | draft | YYYY-MM-DD |
• llmwiki/wiki/log.md — 追加：## YYYY-MM-DD — <skill-name> — <ten>

仅当技能未产生任何产物且未作出任何决策时跳过（例如，像 /caveman-stats 这样的纯显示模式）。