最近发现了两个可以设计出高级前端页面的 Claude Code Skill，一个是 Anthropic 官方出品的 Frontend Design，另一个是推荐比较多的 UI UX Pro Max。对比测试了一下，先看效果吧。
一、Frontend Design（Anthropic 官方）
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
适合构建高质量、有设计感的前端界面，避免一眼看出 AI 生成的那种风格。
安装方式：
# 方式一：Marketplace 安装（推荐）
/plugin marketplace add anthropics/claude-code
# 方式二：手动安装
git clone https://github.com/anthropics/claude-code
# 复制 plugins/frontend-design 到 ~/.claude/skills/
二、UI UX Pro Max
X上看到有人推荐。
这个开源项目把 UI 样式、调色板、字体搭配、图表类型、产品推荐、UX 指南以及特定技术栈的最佳实践全部做成一个可以搜索的知识库。
电脑需要有python环境。
安装方式：
npm install -g uipro-cli
cd /your/project
uipro init --ai claude # Claude Code
uipro init --ai cursor # Cursor
uipro init --ai all # 所有 AI 助手
本来打算按照上面的步骤手动执行截图的，结果一不小心 Claude Code 都给我安装好了，真的不要太省心。
我只是告诉它我要测试这两个 skill，它就自动：
- 检测到 frontend-design 已安装
- 执行
npm install -g uipro-cli - 运行
uipro init --ai claude完成安装 - 检查安装结果
三、对比测试
为了对比下效果，我都用的统一的Prompt，比如“用Frontend Design Build a landing page for a SaaS product management tool ”，Claude 自动调用了 /frontend-design
生成效果长这样，还是有点惊喜的。
视觉冲击力强，信息密度更高，数据展示面板有动态效果，颜色搭配协调。
UI UX Pro Max 执行相同的测试 prompt。
生成效果长这样
清新简洁的白色主题，橙色 CTA 按钮非常醒目，蓝色渐变背景有层次感，整体不错。
两个 skill 都能生成比普通 AI 输出更有设计感的页面，效果确实比不用 skill 时高级不少。
单从这两个demo来讲，我个人更喜欢 Frontend Design 的效果，因为看着设计更有个性，视觉冲击力强。
UI UX Pro Max 的优势是可定制性更强，如果你需要特定行业的配色方案或特定风格（比如 Glassmorphism），它的知识库会更有帮助。
推荐大家都试试，反正安装很简单。