# 如何利用 AI设计出你心目中的优秀界面设计?(实操版)
**作者**: 冰河
**日期**: 2026-04-05T16:29:28.000Z
**来源**: [https://x.com/binghe/status/2041537566747529318](https://x.com/binghe/status/2041537566747529318)
---

前不久,我写过一篇帖子,主要讲的是小白,如何利用 AI 工具打造符合自己审美的 UI 界面设计 SOP 工作流!
很多朋友看完还是觉的不会做,今天我拿一个小案例来帮大家做一下实操。
方法很简单,不过中间有些注意事项要与大家说明。如果你没看过,可以看下面的帖子:
废话不多说,我们开始:
我想做一个类似灵动岛的提醒工具,在 Coding 的时候程序已经架构的差不多了,就是 Claude code 做的界面比较简单,能用,但不美观!
如何利用 AI 工具,打造我们心目中的UI 效果,就用我们上面帖子中的流程跑一遍!
首先,我会和 Claude 在网页端进行多轮讨论,来完成这个软件的设计思路,并且要求它产出产品开发文档!
这个文档给 Claude code 开发使用,直接可以动手编程。
但是另一个开发文档是给 Gemini 看的,它主要是产出Stitch 的前端设计提示词!
这个文档主要是视觉与情绪的描述,比较感性,画面感,Gemini 拿到后能马上“看见”这个产品。

好,Claude code 的开发过程这里不做说明。
现在我们拿着那个视觉设计简报,来到 Gemini
新开一窗口,上传附件,并提供以下提令:

上图下面Gemini 给出的回复内容就是使用 Stitch 的生成 UI的专业提示词!
我们再打开 Stitch网站,直接新开项目,输入 Gemini 的提示词生成看看效果 !

非常不错,毛玻璃的感觉已经出来了!并且UI 配色说明也做了精细化的标注。
这里有移动端的展示,但我要的只是其中的一个界面,就是最右面的,所以,我会点击最右面的卡片-- 导出 -- AI studio(使用AI Studio 构建)

这时会跳转到 Google AI Studio 里,对话框里直接提交。
生成可预览效果,如图:

如果你觉的有问题,可以继续修改。
如果没有问题,就点 Code ,后面有下载,把代码下截到本地!

在 Claude code 端把代码拉到开发窗口,让它依照前端代码来还原设计风格。
到这里全流程其实就结束了!
但是!还没完!
我们会遇到第一个问题,就是如果Stitch 做的东西你不喜欢怎么办?
我在上面的SOP 里说了, 去到Dribbble 网站,找你喜欢的设计风格。

保存几张样图。
就是你希望出现的UI效果,再回到 Gemini 里,再上传这些图片。

并写指令:仿照附件效果图,重新输出适合 Stitch 的提示词,只改设计风格,不要改其它功能设定!
Gemini 会再次出提示词,拿去 Stitch 里继续生成最新版的UI 界面。不断调整直到你满意!
今天的案例有点特殊,我经过几次调整,没有完成我想要的效果。因为:这次的软件是 Mac 端的产品,毛玻璃的效果一直没还原到满意标准。
代码中的写法在 Web 技术栈里已经是最接近 macOS 玻璃感的实现了。就是看上去不对!技术问题这里不做详细说明了。
也就是说:无论 Stitch / Web 怎么模拟,最终的"真·玻璃感"只有等 Claude Code 用 SwiftUI 写完后才能看到。
Web 设计稿能给你的最多是个"看起来 70% 像"的参考。
但如果你的产品是网站的话,这点就不用担心!
如果出现我这样的情况,大家也别急,我有个更好的办法:
跳过 Stitch,直接拿对的参考图喂 Claude Code
我去 Dribbble 搜下面关于“毛玻璃,灵动岛”这类关键词,下载 5-10 张图:
- iOS dynamic island
- macOS notification widget
- floating notification card glassmorphism
- Raycast UI
把这些图直接保存下来,做成一个"设计参考集",连同开发文档一起交给 Claude Code,让它对照参考图直接用 SwiftUI 实现。
这里我在网页端做了一下测试:

然后 Claude Opus4.6 深度思考后,给了我最终的设计文档,并且还附上了“起手示”


我很粗暴的把这些内容一骨脑扔回 Claude Code , 让它把涉及到 UI 界面的地方补回!
卡片结构、灵动岛气质、玻璃质感,最后完成卡片结构等。
他看完自己知道怎么做,不用担心!
因为产品还没做完,但实际效果非常完美!
这就是全过程了,希望可以帮到大家!
## 相关链接
- [@binghe](https://x.com/binghe)
- [7.5K](https://x.com/binghe/status/2041537566747529318/analytics)
- [Apr 6](https://x.com/binghe/status/2040829183014928652)
- [36K](https://x.com/binghe/status/2040829183014928652/analytics)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [11:24 PM · Apr 7, 2026](https://x.com/binghe/status/2041537566747529318)
- [7,595 Views](https://x.com/binghe/status/2041537566747529318/analytics)
- [View quotes](https://x.com/binghe/status/2041537566747529318/quotes)
---
*导出时间: 2026/4/8 21:03:47*