最近 skills 大火，社区里出了好几个 UI 相关的技能。
我第一时间试了试，说实话，有点失望。
那味还是很重，一眼就能看出是 AI 生成的。
后来我琢磨了一下，发现问题出在哪了。
用别人的 skills 永远只能模仿别人的审美，真正的解法是找到自己喜欢的 UI 风格，然后让 AI 抽成专属于你的 skills。
今天就把我的方法分享给大家。
首先你得找到一个让你眼前一亮的网站。
可以是 Dribbble 上看到的设计稿，可以是某个你觉得特别好看的产品页面，总之得是你真心喜欢的风格。
找到之后，我们要用到谷歌的一个宝藏工具：https://stitch.withgoogle.com/
stitch 工具首页
这个工具可以根据你提供的参考图，批量生成多个风格变体。
你可以上传喜欢的 UI 截图，让它基于这个风格给你生成好几个方案。
生成之后不满意可以继续和 AI 对话调整，直到你觉得这就是你想要的感觉。
确定好风格之后，重点来了。
导出的时候一定要选 AI Studio，其他选项只能导出图片，代码复制不了。
选择导出到 AI Studio
导出界面
进入 AI Studio 之后，记得把模型切换成 Gemini 3 Pro。
这个模型生成的代码质量更高，后续调整也更顺畅。
在 AI Studio 里你还可以继续和 AI 对话，微调一些细节。
觉得差不多了就可以下载代码了。
在 AI Studio 完成复刻
接下来是最关键的一步。
把下载好的压缩包解压，然后丢给 Claude。
让它使用 /skill-creator 技能，把这套 UI 风格写成一个专属技能。
没下 /skill-creator 技能，可以在 claude code 中输入：
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
下载压缩包
让 Claude 写成 skills
技能创建好之后，我们来验证一下效果。
让 AI 用这个新技能写一个博客界面看看。
使用技能生成的页面
第一版出来我发现少了点东西，没有深色模式切换，也没有中英文切换。
这都是我想要的功能，于是让 AI 补上了。
优化后的版本
调整满意之后，还可以用 /update-skill 技能把这些优化更新进去。
需要这个技能的，公众号回复：更新 领取
Claude 支持热重载，技能更新后立刻生效，不用重启。
更新技能
最后说一下可能遇到的问题。
有些朋友可能打不开 stitch 这个网站，显示无法使用。
无法访问
这个是 IP 纯净度的问题。
你可以去 ippure.com 测试一下自己的 IP。
我试了纯净度 27% 的进不去，换了个纯净度 2% 的就进去了。
总结一下今天的方法：找到喜欢的 UI → 用 stitch 生成变体 → 导出到 AI Studio → 下载代码 → 让 Claude 写成 skills。
这套流程走下来，你生成的前端页面就带着你自己的审美印记了，再也不是千篇一律的 AI 味。
有什么问题评论区聊聊。
文章来自于“AI产品普洱”，作者 “AI产品普洱”。