joyeking/redesigned-portfolio

重新设计技能

工作原理

当应用于现有项目时，请遵循以下步骤：

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 布局。替换为 2 列之字形、不对称网格、水平滚动或瀑布流布局。
• 对全屏部分使用 height: 100vh。 替换为 min-height: 100dvh 以防止在移动浏览器上出现布局跳动（iOS Safari 视口错误）。
• 复杂的 flexbox 百分比计算。 使用 CSS Grid 实现可靠的多列结构。
• 没有 max-width 容器。 添加一个容器约束（大约 1200-1440px）并设置自动边距，以免内容在宽屏上拉伸到边缘。
• 通过 flexbox 强制卡片等高等宽。 当内容长度变化时，允许可变高度或使用瀑布流。
• 所有元素统一圆角。 变化圆角半径：内部元素更紧，容器更柔和。
• 没有重叠或深度。 元素平坦地并排放置。使用负边距来创建层次和视觉深度。
• 对称的垂直内边距。 顶部和底部内边距总是相同。进行视觉调整——底部内边距通常需要稍大一些。
• 仪表板总是有左侧边栏。 尝试顶部导航、浮动命令菜单或可折叠面板。
• 缺少空白。 将间距加倍。让设计呼吸。密集布局适用于数据仪表板，不适用于营销页面。
• 卡片组中的按钮未底部对齐。 当卡片内容长度不同时，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、+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 或自定义集以形成差异化。
• 用火箭船代表“发布”，盾牌代表“安全”。 用不那么明显的图标（闪电、指纹、火花、保险库）替换陈词滥调的隐喻。
• 图标笔画宽度不一致。 审计所有图标并标准化为一种笔画粗细。
• 缺少网站图标。 始终包含品牌网站图标。
• 库存的“多元化团队”照片。 使用真实的团队照片、抓拍镜头或一致的插图风格，而不是虚假的库存图片。

代码质量

• Div 汤。 使用语义化 HTML：<nav>、<main>、<article>、<aside>、<section>。
• 内联样式与 CSS 类混合。 将所有样式移到项目的样式系统中。
• 硬编码的像素宽度。 使用相对单位（%、rem、em、max-width）实现灵活的布局。
• 图片缺少 alt 文本。 为屏幕阅读器描述图片内容。对有意义的图片，永远不要留 alt="" 或 alt="image"。
• 任意的 z-index 值，例如 9999。 在主题/变量中建立一个清晰的 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. 组件差异化 — 替换通用 UI 模式
6. 交互细节 — 添加加载状态、过渡和微交互
7. 内容清洗 — 移除 AI 文案和占位文本
8. 深层表面 — 纹理、玻璃态和动态阴影

项目评估清单

开始前：

• 项目是否在 Git 中？如果没有，先初始化它。
• 构建是否通过？npm run build（或等效命令）不应出错。
• 是否有可访问的开发服务器？npm run dev 有效。
• 你知道正在使用哪个 CSS 框架吗？
• 你验证过所有依赖都安装了吗？
• 有代码风格指南或 Prettier 配置吗？

完成后：

• 所有交互式元素都有可见的焦点指示器吗？
• npm run build 通过了吗？
• 你在常规尺寸的笔记本电脑和移动视口上测试过吗？
• 你检查过控制台是否有错误或警告吗？
• 字体是否正确加载（无 FOIT/FOUT）？
• 新的设计元素是否与现有的一致？
• 你移除或替换了所有测试/调试资源吗？
• 新的设计在浅色模式和深色模式下都测试过吗？（如果适用）
• 备份/未修改的 git 分支仍然可用吗？

维护说明

• 保持审计最新。 随着设计趋势的演变，更新此列表。AI 工具也在改进——曾经发现的问题可能会被修复。
• 按项目调整。 并非每个问题都适用于所有项目。优先考虑对用户体验影响最大的问题。
• 记录变更。 在 git 提交中使用清晰的描述性信息记录你的更改。
• 在发现新模式时贡献。 如果你遇到 AI 生成的常见设计模式，将它们添加到此列表中。
• 在上下文中提出异议。 如果你认为某个模式在特定项目中有意为之，请在应用更改前质疑它。并非每个通用模式都是坏的——有些是有意选择。