Skill 实战记录
这篇记录的是一次很具体的场景：我在 Codex 里重做这个 VitePress 博客的 UI，同时把过程中真正用到的 Skill 和 MCP 工具链整理下来。
1. 这次用了哪个 Skill
ui-ux-pro-max
这次最核心的 Skill 是 ui-ux-pro-max。
它主要帮助我做了三件事：
- 给博客确定整体设计方向，而不是直接开始改 CSS。
- 生成更适合内容站点的设计系统建议，包括排版、配色、信息层级和交互约束。
- 补充 UX 与 typography 检索结果，用来校正标题字体、导航结构和移动端间距。
这次实际检索到的方向
- 设计模式：内容优先、出版物 / Newsletter 风格
- 视觉风格：Swiss Modernism 2.0
- 排版重点：更强的信息层级、更克制的装饰、更稳定的网格
- 实现重点：响应式留白、清晰的选中态、键盘可访问性、移动端可读性
2. 这次用了哪些 MCP / 工具
这次不是只改代码，还反复检查了页面表现，所以实际用了几类工具。
2.1 终端执行
通过终端工具做这些事：
- 查看项目文件结构
- 读取 VitePress 配置和主题文件
- 跑
ui-ux-pro-max的检索脚本 - 执行
npm run docs:build - 启动本地预览服务
典型用途：
- 搜索文件：
rg --files - 查看配置：
sed -n - 构建验证：
npm run docs:build - 本地预览：
npm run docs:dev -- --host 127.0.0.1 --port 4173
2.2 Playwright MCP
在浏览器里做自动化检查时，用到了 Playwright MCP。
主要用途：
- 打开首页和文章页
- 检查首页信息结构是否正确渲染
- 检查移动端与桌面端断点
- 获取页面快照
- 截图验证 UI 是否有明显布局问题
这类能力适合做：
- 视觉回归前的快速人工检查
- 交互状态验证
- 响应式页面检查
2.3 Chrome DevTools MCP
当需要更稳定地查看截图和页面状态时，也用到了 Chrome DevTools MCP。
主要用途：
- 调整 viewport
- 截取移动端页面截图
- 刷新页面验证样式修改是否生效
- 读取页面可访问性快照
这一步很有用，因为有些问题只看代码看不出来，比如：
- 顶部留白过大
- header 内部背景不一致
- 侧栏当前项像“光标”而不是“选中态”
3. 这套组合为什么有效
这次比较有价值的不是某一个工具本身，而是它们的配合方式：
Skill负责给出设计判断依据- 终端负责读代码、改代码、构建验证
- Playwright / DevTools 负责把“看起来应该可以”变成“页面上确实成立”
这比只靠肉眼猜样式稳很多，尤其适合：
- VitePress / 文档站 UI 重构
- 博客主题优化
- 中英文混排排版调整
- 响应式细节修正
4. 这次最后落地了什么
这次 UI 重构里，最终落地的点包括：
- 首页改成更像技术出版物的结构
- 标题字体改成更适合中文的
Noto Serif SC - header 改成非固定，不再跟着滚动
- 侧栏当前页从“左侧光标线”改成整行选中态
- header 标题区与菜单区背景统一
5. 适合后续继续写的主题
这个 Skill 专栏后面可以继续补这些内容：
- 如何写一个可复用的 Codex Skill
- Skill 和 MCP 的职责边界
- 用 Skill 驱动前端重构的工作流
- 用浏览器 MCP 做 UI 验证
- 如何把设计建议真正落到代码里