1. 引言

众所周知，AI 在构建 UI 方面，大都是难看的蓝/紫色渐变或是浅白色……

原因在下面的博客说的很清楚了

今天介绍的这个 skill，可以让你的 claude code 在构建 UI 方面提升 100 倍👍👍可以让你的 AI 制作出与众不同的前端页面，而不是难看的蓝/紫色渐变！！！

这来自 Anthropic 早些时候发布的一篇的博客，关于如何通过 skill 改善前端设计，博客链接我放文末了

下面我们来看看如何在 Claude code 中使用这个 skill

你可以直接复制这个 skill，根据自己的需求进行修改，优化

我就直接使用这个 skill 了

先看下之前的页面是什么样的

你的 AI 写的页面是不是也是这样？？

看看让这个 skill 设计的前端如何？？

2. 首先，安装这个 skills

# 添加 Claude code 插件市场
/plugin marketplace add anthropics/claude-code
# 安装前端设计插件
/plugin install frontend-design@claude-code-plugins

可以看到这个 skill 已经安装成功

3. 让 skill 修改当前页面

直接让 Claude code 调用 skill 重新设计前端页面

Claude code 先是查看当前的页面，读取文案内容 然后，调用这个前端 skill

生成任务列表以及设计方案

这是 Claude code 更改的内容

4. 效果展示

效果，自己看吧

5. 参考资源

5.1. 博客地址

https://www.claude.com/blog/improving-frontend-design-through-skills

5.2. GitHub 地址

https://github.com/anthropics/skills.git

里面提供好几个 skill，功能也都很强，大伙可以去用用看~