让 AI 写前端的都被 UI 丑哭了吧？这招教你彻底去掉 AI 味

最近 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产品普洱”。