技能说明
适用于网页、落地页、后台、组件和响应式改版，覆盖视觉方向、设计系统提取、深色模式、组件化和 UI 审查。支持 Claude Code、Codex、Cursor；审查结果需以项目证据和浏览器表现为准。
关于此技能
面向 React、Next.js 和 Tailwind 项目的网页界面设计与审查指南，覆盖视觉方向、设计系统提取、页面实现、响应式与深色模式改造，以及带发布判断的 UI 质量检查。它把产品决策、界面构建、动效和浏览器测量分开处理。
核心能力
网页视觉与实现
从视觉方向、配色、字体和布局出发，构建或重做 React、Next.js、Tailwind 界面。
多种工作模式
支持方向选择、设计系统提取、页面构建、审查、响应式改造、深色模式、组件化和截图转语义结构。
审查与发布判断
针对已存在的界面检查用户可见问题，要求以文件证据和渲染结果为依据，并给出可发布性判断。
适用场景
落地页与产品界面
为营销页、后台、表单、设置页和组件选择视觉方向并落地到代码。
现有页面改版
提取项目已经采用的设计规范，检查移动端、深色模式和组件一致性后再改动。
上线前 UI 检查
检查加载、空状态、错误、禁用、交互反馈、文字溢出和响应式表现；需要浏览器验证时配合 ui-verification。
使用步骤
- 01
安装到目标 Agent
使用 npx skills add mblode/agent-skills -g --agent claude-code codex cursor -y，按 README 配置云端环境。
- 02
先判断工作模式
新页面先选视觉方向或直接构建；已有页面且未指定改动时进入审查，避免把审查误做成重设计。
- 03
读取项目事实
优先查看现有 design.md、design-system.md、品牌指南和实际组件；不要凭默认模板替换项目决定。
- 04
实现并核验
按项目现有技术栈实现，在桌面和移动尺寸检查交互、状态、溢出、固定栏遮挡和控制台问题。
常见问题
它主要支持哪些项目？+
技能明确面向 React、Next.js 和 Tailwind 网页界面，也覆盖通用的 HTML/CSS/JS 设计任务；不把产品功能决策、深层动效或纯代码正确性混在一起。
审查模式会直接改代码吗？+
如果用户要求修复，会在审查范围内应用能确认的修改；如果只是询问是否可上线或是否无障碍，默认只给报告。
安装量和受欢迎程度如何理解？+
仓库 README 提供 skills.sh 安装徽章，但本条目只记录 GitHub 仓库的真实 star 数；第三方安装徽章不等同于安装量。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/09/05
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
npx skills add mblode/agent-skills -g --agent claude-code codex cursor -y