记录一下codex 配合 Stitch 对页面进行美化的效果
- 内容介绍
- 文章标签
- 相关推荐
记录一下codex 配合 Stitch 对页面进行美化的效果
刚刚刷论坛接触到的stitch，也来展示下执行力了。
官网：
Stitch - Design with AI
Stitch generates UIs for mobile and web applications, making design ideation fast and easy.
原来的codex给我做的丑页面
image1905×868 45.3 KB
stitch给我设计的
image1803×841 332 KB
添加stitch 到codex的mcp中
config.toml 添加：
[mcp_servers.stitch]
url = "https://stitch.googleapis.com/mcp"
http_headers = { "X-Goog-Api-Key" = "your-api-key" }
# env_http_headers = { "X-Goog-Api-Key" = "STITCH_API_KEY" } ## 配合环境变量使用（安全考虑使用这种方式）
api获取方式： 右上角点击自己头像 → Stitch Settings → 找到 API KEY → Create Key 即可
打开 codex /mcp 查看
image2094×904 82.9 KB
获取stitch项目
image2103×461 66.4 KB
最后一步指令：
先使用 Stitch 把xxx项目的设计系统（颜色/字体/圆角等）取出来，再对齐我本地项目的 UI 技术栈，把设计落实到代码里，最后做一轮可见的视觉升级并构建验证
image2099×939 181 KB
"干"了多次的效果：
咱写后端的也不知道它说啥，干就完了
image1871×877 38 KB
结论：
是好看了些，但是好像和设计图差距还是很大
初次试用，而且设计图和页面相差甚大，可以让Stitch根据我的网页来做设计，然后在通过codex+mcp来编码，效果应该是会好很多，有空再玩玩看
再次尝试结果：
记录一下codex 配合 Stitch 对页面进行美化的效果 搞七捻三[image] 继续尝试，让他按我现在的页面来美化。 [image] 确认调用到Stitch了。 第一版： [image] 第二版：（让它补充卡片、icon等） [image] 很难评啊网友解答：
--【壹】--：
前端还是得哈基米来，不得不说gpt写的前端是真的丑
--【贰】--：
依旧是丑呀
--【叁】--：
真不错啊
--【肆】--：
我的意思是绝大多数情况下不需要经过stitch走一道。直接让codex参考你预期网站的效果就好。stitch转一道很费劲
--【伍】--：
gpt（我已经努力了）
--【陆】--：
image1277×673 56.6 KB
有的，他有这个功能，我刚测试没用。所以这个效果这么差应该是我不会用
--【柒】--：
不太有这个必要，直接丢给codex一个网站让他做成同样的风格就好。
image1920×1360 265 KB
--【捌】--：
我单纯用 ui-ux-pro-max 出来的效果都还不错，比 codex 自己写好很多
--【玖】--：
是呀，我就让他给我生成一个电商ERP系统的设计稿。跟我自己弄的demo功能不一样，所以就如我所说，没玩好。感觉可玩性还是很高的，你可以提出设计想法看到设计图，然后直接生成代码
--【拾】--： Leo-Huang:
stitch 给我设计的
image1803×841 332 KB
很高级
Leo-Huang:“干” 了多次的效果：
咱写后端的也不知道它说啥，干就完了
image1871×877 38 KB
codex你干的啥啊
--【拾壹】--： 晚安:
得哈基米来，不得不说gpt写的前端是
感觉跟原型差距还是有，但是stitch设计确实不错
--【拾贰】--：
不懂样式不懂设计岂不是很难做到两手一摊，丢给AI的效果了
--【拾叁】--：
感觉这不算美化
看起来功能都不一样了
--【拾肆】--：
我也是做的这个组合 ，设计的效果又很对细节，必须一点一点描述清楚，不然它自己 就是做个大概，而且stitch 浪费一点页面 让他把主要元素单独汇总到一页上不互相遮盖，后面gpt就会做了
--【拾伍】--：
codex输出的前端页面真的一言难尽，太丑了
--【拾陆】--：
确实 设计稿让人眼前一亮呀
--【拾柒】--：
不不不，我感觉是我的问题，毕竟我不懂前端和设计，不知道要怎么让它做得更好
--【拾捌】--：
codex你个没有用的家伙
明明只需要照着抄就行了，但是做出来的还是丑
--【拾玖】--：
那确实，对于大多后台管理系统来说没必要整这么复杂。除非是想自己设计别具一格的UI，还能把编码交给AI的场景可以考虑
记录一下codex 配合 Stitch 对页面进行美化的效果
刚刚刷论坛接触到的stitch，也来展示下执行力了。
官网：
Stitch - Design with AI
Stitch generates UIs for mobile and web applications, making design ideation fast and easy.
原来的codex给我做的丑页面
image1905×868 45.3 KB
stitch给我设计的
image1803×841 332 KB
添加stitch 到codex的mcp中
config.toml 添加：
[mcp_servers.stitch]
url = "https://stitch.googleapis.com/mcp"
http_headers = { "X-Goog-Api-Key" = "your-api-key" }
# env_http_headers = { "X-Goog-Api-Key" = "STITCH_API_KEY" } ## 配合环境变量使用（安全考虑使用这种方式）
api获取方式： 右上角点击自己头像 → Stitch Settings → 找到 API KEY → Create Key 即可
打开 codex /mcp 查看
image2094×904 82.9 KB
获取stitch项目
image2103×461 66.4 KB
最后一步指令：
先使用 Stitch 把xxx项目的设计系统（颜色/字体/圆角等）取出来，再对齐我本地项目的 UI 技术栈，把设计落实到代码里，最后做一轮可见的视觉升级并构建验证
image2099×939 181 KB
"干"了多次的效果：
咱写后端的也不知道它说啥，干就完了
image1871×877 38 KB
结论：
是好看了些，但是好像和设计图差距还是很大
初次试用，而且设计图和页面相差甚大，可以让Stitch根据我的网页来做设计，然后在通过codex+mcp来编码，效果应该是会好很多，有空再玩玩看
再次尝试结果：
记录一下codex 配合 Stitch 对页面进行美化的效果 搞七捻三[image] 继续尝试，让他按我现在的页面来美化。 [image] 确认调用到Stitch了。 第一版： [image] 第二版：（让它补充卡片、icon等） [image] 很难评啊网友解答：
--【壹】--：
前端还是得哈基米来，不得不说gpt写的前端是真的丑
--【贰】--：
依旧是丑呀
--【叁】--：
真不错啊
--【肆】--：
我的意思是绝大多数情况下不需要经过stitch走一道。直接让codex参考你预期网站的效果就好。stitch转一道很费劲
--【伍】--：
gpt（我已经努力了）
--【陆】--：
image1277×673 56.6 KB
有的，他有这个功能，我刚测试没用。所以这个效果这么差应该是我不会用
--【柒】--：
不太有这个必要，直接丢给codex一个网站让他做成同样的风格就好。
image1920×1360 265 KB
--【捌】--：
我单纯用 ui-ux-pro-max 出来的效果都还不错，比 codex 自己写好很多
--【玖】--：
是呀，我就让他给我生成一个电商ERP系统的设计稿。跟我自己弄的demo功能不一样，所以就如我所说，没玩好。感觉可玩性还是很高的，你可以提出设计想法看到设计图，然后直接生成代码
--【拾】--： Leo-Huang:
stitch 给我设计的
image1803×841 332 KB
很高级
Leo-Huang:“干” 了多次的效果：
咱写后端的也不知道它说啥，干就完了
image1871×877 38 KB
codex你干的啥啊
--【拾壹】--： 晚安:
得哈基米来，不得不说gpt写的前端是
感觉跟原型差距还是有，但是stitch设计确实不错
--【拾贰】--：
不懂样式不懂设计岂不是很难做到两手一摊，丢给AI的效果了
--【拾叁】--：
感觉这不算美化
看起来功能都不一样了
--【拾肆】--：
我也是做的这个组合 ，设计的效果又很对细节，必须一点一点描述清楚，不然它自己 就是做个大概，而且stitch 浪费一点页面 让他把主要元素单独汇总到一页上不互相遮盖，后面gpt就会做了
--【拾伍】--：
codex输出的前端页面真的一言难尽，太丑了
--【拾陆】--：
确实 设计稿让人眼前一亮呀
--【拾柒】--：
不不不，我感觉是我的问题，毕竟我不懂前端和设计，不知道要怎么让它做得更好
--【拾捌】--：
codex你个没有用的家伙
明明只需要照着抄就行了，但是做出来的还是丑
--【拾玖】--：
那确实，对于大多后台管理系统来说没必要整这么复杂。除非是想自己设计别具一格的UI，还能把编码交给AI的场景可以考虑