最近发现了两个可以设计出高级前端页面的 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，它就自动：
1. 检测到 frontend-design 已安装
2. 执行 npm install -g uipro-cli
3. 运行 uipro init --ai claude 完成安装
4. 检查安装结果
三、对比测试
为了对比下效果，我都用的统一的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），它的知识库会更有帮助。
推荐大家都试试，反正安装很简单。
💡 AI 工具的爆发，让普通人也能快速做出产品。
但如何做？如何变现？如何真正走向海外市场？
👉 想了解更多 AI 编程 & 出海实战信息
扫码或微信搜索 257735，发送暗号 【美金】
了解详情，加入实战社群。
微信扫一扫，了解更多详情
🚀 我们的出海作品展示平台上线啦！
欢迎访问 Showcase 平台，
这里汇聚了学员的出海实战作品，方便大家获得反馈、积累曝光机会。
我们还会定期举办创作活动与奖励计划，欢迎来逛逛！
🔗 更多教程请访问 ipengtao.com
文章评论