01 / 确定视觉方向
Frontend Design · 网站视觉设计
新页面缺少统一风格。先明确受众、信息层级和字体，再做视觉方案。
按 anthropics/skills 的说明引入 frontend-design 技能目录。提供受众、品牌约束、页面目标和技术栈，先完成一个页面，再检查实际视觉效果。技能目录内 LICENSE.txt 为 Apache-2.0。
独立实践 / 2026 年 11 月 13 日
网站 UI Skills：从设计到打磨的选择指南
整理六个用于网站设计、界面审查和 React 工程的 AI Skills，按实际问题选择，附原始来源、使用边界与复用方法。
先判断页面的问题在哪里。
网站 UI Skills 是交给编程 Agent 的可复用说明，有时也包含工具。它们可以帮助组织设计与审查任务，但仍需要清楚的需求、真实内容和浏览器中的实际检查。
这是收录与选型指南，不是六款工具的实测排名。本专题未逐一运行这些外部技能；文末的官网案例记录实际改版过程，不将改版效果归因于这六个技能。
确定视觉方向新页面缺少统一风格。先明确受众、信息层级和字体，再做视觉方案。协调设计系统多个页面的配色、字体和交互不一致，需要一套共同规则。审查现有界面上线前检查键盘操作、焦点、表单和动效。打磨已有页面页面能用，但缺少细节或视觉节奏。一次聚焦一个区域。排查 React 性能用于 React 或 Next.js 性能问题，改动前后都需要测量。整理 React 组件组件参数不断增加、复用困难时，梳理组合方式和状态。
对于本站这样的静态 HTML/CSS 个人官网，优先关注视觉方向、界面审查与打磨。只有项目实际使用 React 时，才考虑后两个工程类技能。
六个技能，各有分工。
02 / 协调设计系统
UI UX Pro Max · 设计系统
多个页面的配色、字体和交互不一致，需要一套共同规则。
按仓库指南选择对应编程工具的安装方式；检索工具需要 Python 3。输入网站用途和技术栈，先生成设计方向，再核对对比度与手机布局；不要直接把推荐当作验收结果。
03 / 审查现有界面
Web Design Guidelines · 界面审查
上线前检查键盘操作、焦点、表单和动效。
从 vercel-labs/agent-skills 中选择 web-design-guidelines，指定要审查的界面文件。技能会联网获取最新规则，复核时记录规则版本。本次未独立确认许可证，仅收录原始链接。
04 / 打磨已有页面
Impeccable · 界面打磨
页面能用，但缺少细节或视觉节奏。一次聚焦一个区域。
按官方指南安装并初始化项目上下文，先针对一个组件使用 critique 或 polish。安装前查看 hooks；live 模式的 Apply 可能启动关闭审批的 Agent，使用前将 IMPECCABLE_LIVE_COPY_AGENT 设为 chat 或 off。
05 / 排查 React 性能
React Best Practices · 前端性能
用于 React 或 Next.js 性能问题，改动前后都需要测量。
通过仓库安装入口选择 vercel-react-best-practices，提供 React / Next.js 组件和具体性能问题，对比改动前后的表现。它偏工程优化，不负责生成视觉风格；SKILL.md 声明 MIT。
06 / 整理 React 组件
Composition Patterns · 组件复用
组件参数不断增加、复用困难时，梳理组合方式和状态。
选择 vercel-composition-patterns，提供需要复用或布尔参数过多的一组组件。先确认 React 版本；React 19 专属建议不能直接套用到旧版本。SKILL.md 声明 MIT。
从一页开始，再逐步扩展。
- 写清需求：受众、页面目标、真实内容、技术栈和约束。
- 选择一个匹配的技能，阅读原始说明，核对依赖与权限，再按官方方式安装。
- 先处理一个页面或区域，保留修改前版本，并指出要解决的具体问题。
- 检查桌面与手机布局、键盘导航、真实链接和空状态。满足需求后再扩展到其他页面。
可直接改写的需求示例
请围绕个人品牌、精选作品和公开资源库改版我的官网。采用杂志式排版，使用真实项目内容；内容充实，减少装饰性边框，用柔和底色组织栏目。保留中英文链接、搜索和键盘操作。先说明阅读顺序，再实现一个页面，并列出需要视觉检查的部分。
使用前的几个问题
需要六个一起安装吗？
不需要。先解决当前最重要的问题；多个技能的建议可能重叠，小步修改更容易判断哪些改动有效。
能在 Codex 里使用吗？
先查看各来源是否提供 Codex 的安装方式及所需工具。仓库里有 SKILL.md，并不代表它的脚本和集成都已适配你的环境。
用了设计 Skill 就能提升搜索排名吗？
不能保证。先做好有独立价值的内容、准确的标题和相关链接，再观察实际搜索展示与点击。 Google 有用内容指南 ↗