实测，GPT Image 2 出UI设计图，Codex 帮我做出来并部署实现上线了！

实测，GPT Image 2 出UI设计图，Codex 帮我做出来并部署实现上线了！ 实测，GPT Image 2 出UI设计图，Codex 帮我做出来并部署实现上线了！ Modified May 20 04 / 部署上线：让界面图变成真实链接 做出来了还不够。一个能点开的URL，比一百张截图都有说服力。 部署这一步，也交给Codex就行。不管你想用GitHub Pages、Vercel还是Netlify，直接跟Codex说： "帮我把这个项目部署到xxx上线，给我一个公开链接。" Codex会自动帮你处理：初始化仓库、推送代码、配置部署、生成链接。你只需要确认一次"是否部署"，剩下的它自己跑完。 说实话，这一步带来的冲击感比"做出来"更强。 因为它不再是一个概念图，而是一个"上线了的网站"，可以直接演示的Demo。 本期教程线上Demo ： https://sunkimk.github.io/sunkim storefront/ 从品牌界面图到真实URL，整条链路： GPT Image 2出UI界面图 → Codex生成可交互页面 → 部署上线。全程没写一行代码，大概花了一个多小时。 05 / 进阶：输出DESIGN.md，后续页面复用规范 上面的流程已经能出结果了。但如果你要做更多页面 标准化地生成， 这时候就需要DESIGN.md了。 关于DESIGN.md的完整介绍和用法，之前写过一篇详细的文章： https://mp.weixin.qq.com/s/2qG DJpXGrtJ5jkEoTCj5Q 怎么提取？直接让Codex帮你提。 把界面图截图或者项目地址丢给Codex，说： "从这张UI截图里提取设计token，生成DESIGN.md文件"。 "从项目页面里提取设计token，生成DESIGN.md文件"。 它会自动读取配色、字体、圆角、间距、组件属性，输出一个完整的DESIGN.md。 有了DESIGN.md，后续所有页面都能复用同一套规范，直接跟AI说： "根据 DESIGN.md 的规范，生成 XXXX页面了 " Codex会读你的DESIGN.md，用里面定义的色值、字体、圆角来写代码。 06 / 小结 如果你想试，最短路径： • 用GPT Image 2生成你品牌的网站界面图（把品牌视觉图喂回去，加一张参考网页风格） • 把界面图丢给Codex，输入页面生成提示词，三到五轮迭代调到满意 • 让Codex帮你部署上线——一句话的事 • (可选)做完之后，提取DESIGN.md沉淀设计规范，后续新页面复用 全程不需要会写代码，你只需要动动嘴皮子。 07 / 踩坑记录 坑1：UI界面图太"艺术"会翻车。 AI需要看到明确的组件边界 ——哪里是卡片、哪里是按钮。越像真实界面的图，还原效果越好。如果全是"氛围感大片"，AI根本不知道从哪下手。 例如这种氛围感大片： 坑2：GPT会"替你做设计决策"。 你给的是霓虹蓝紫，它可能改成"更专业"的蓝色。解决办法：提示词里加一句"严格保持原图的配色和布局，不要调整"。 坑3：精细调整在Codex上做，别在图片上死磕。 概念图像素有限，堆太多细节看不清。图片定方向，代码抠细节，各司其职。 👀 最后叨叨 学那么多，不如实操一下！ 你们最想用这套方法做出什么页面？评论区告诉我，下一篇我来实测。 关注我 AI进化 全知晓 附完整提示词 Code block Markdown Copy 请基于我提供的界面截图，进行最大深度的视觉与交互分析，并高精度还原界面中的组件样式与交互效果。 1. 界面样式还原要求 请深入理解图片中的整体界面风格，包括但不限于： 页面布局结构 组件层级关系 色彩系统 字体大小与字重 圆角、描边、阴影、渐变 间距、对齐方式 图标风格 按钮、卡片、输入框、导航栏等组件细节 要求尽可能高精度还原图片中的视觉效果，避免只做大概相似的布局。 2. 组件交互要求 界面中的每一个组件都需要具备完整的交互状态，包括： 默认状态 default 鼠标移入状态 hover 点击 / 激活状态 active / selected 禁用状态 disabled 组件样式与交互反馈需要保持统一，不允许出现样式割裂或状态缺失。 3. 吉祥物 IP 处理要求 界面中的吉祥物 IP 需要作为单独图片资源处理，不要直接画死在界面里。 处理规则如下： 如果我提供了吉祥物切图，请优先使用提供的切图。 如果没有提供切图，请使用 image2 图片生成器生成对应的吉祥物透明底图片。 生成吉祥物时，必须保持与参考图中吉祥物的动作、姿态、比例和风格一致。 生成后的吉祥物需要以透明背景 PNG 的形式替换到界面中。 吉祥物在页面中的位置、大小、层级和遮挡关系，需要与参考图保持一致。 4. 图标使用规范 界面中的图标默认使用 Hugeicons 图标库： https://hugeicons.com/ 请优先选择与参考图含义和视觉风格最接近的 Hugeicons 图标。 如 Hugeicons 中没有完全匹配的图标，可以选择语义接近、风格一致的替代图标，但需要保持整体图标线宽、圆角和视觉统一性。 5. 输出要求 请最终输出一套可直接使用的前端界面代码，并确保： 页面布局与截图高度一致 组件视觉效果高度还原 所有组件具备完整交互状态 https://mp.weixin.qq.com/s/2qG DJpXGrtJ5jkEoTCj5Q 04 / 部署上线：让界面图变成真实链接 做出来了还不够。一个能点开的URL，比一百张截图都有说服力。 部署这一步，也交给Codex就行。不管你想用GitHub Pages、Vercel还是Netlify，直接跟Codex说： "帮我把这个项目部署到xxx上线，给我一个公开链接。" Codex会自动帮你处理：初始化仓库、推送代码、配置部署、生成链接。你只需要确认一次"是否部署"，剩下的它自己跑完。 说实话，这一步带来的冲击感比"做出来"更强。 因为它不再是一个概念图，而是一个"上线了的网站"，可以直接演示的Demo。 本期教程线上Demo ： https://sunkimk.github.io/sunkim storefront/ 从品牌界面图到真实URL，整条链路： GPT Image 2出UI界面图 → Codex生成可交互页面 → 部署上线。全程没写一行代码，大概花了一个多小时。 05 / 进阶：输出DESIGN.md，后续页面复用规范 上面的流程已经能出结果了。但如果你要做更多页面 标准化地生成， 这时候就需要DESIGN.md了。 关于DESIGN.md的完整介绍和用法，之前写过一篇详细的文章： https://mp.weixin.qq.com/s/2qG DJpXGrtJ5jkEoTCj5Q https://mp.weixin.qq.com/s/2qG DJpXGrtJ5jkEoTCj5Q 怎么提取？直接让Codex帮你提。 把界面图截图或者项目地址丢给Codex，说： "从这张UI截图里提取设计token，生成DESIGN.md文件"。 "从项目页面里提取设计token，生成DESIGN.md文件"。 它会自动读取配色、字体、圆角、间距、组件属性，输出一个完整的DESIGN.md。 有了DESIGN.md，后续所有页面都能复用同一套规范，直接跟AI说： "根据 DESIGN.md 的规范，生成 XXXX页面了 " Codex会读你的DESIGN.md，用里面定义的色值、字体、圆角来写代码。 06 / 小结 如果你想试，最短路径： • 用GPT Image 2生成你品牌的网站界面图（把品牌视觉图喂回去，加一张参考网页风格） • 把界面图丢给Codex，输入页面生成提示词，三到五轮迭代调到满意 • 让Codex帮你部署上线——一句话的事 • (可选)做完之后，提取DESIGN.md沉淀设计规范，后续新页面复用 全程不需要会写代码，你只需要动动嘴皮子。 07 / 踩坑记录 坑1：UI界面图太"艺术"会翻车。 AI需要看到明确的组件边界 ——哪里是卡片、哪里是按钮。越像真实界面的图，还原效果越好。如果全是"氛围感大片"，AI根本不知道从哪下手。 例如这种氛围感大片： 坑2：GPT会"替你做设计决策"。 你给的是霓虹蓝紫，它可能改成"更专业"的蓝色。解决办法：提示词里加一句"严格保持原图的配色和布局，不要调整"。 坑3：精细调整在Codex上做，别在图片上死磕。 概念图像素有限，堆太多细节看不清。图片定方向，代码抠细节，各司其职。 👀 最后叨叨 学那么多，不如实操一下！ 你们最想用这套方法做出什么页面？评论区告诉我，下一篇我来实测。 关注我 AI进化 全知晓 附完整提示词 🔗 原文链接： https://mp.weixin.qq.com/s/q3TKcKMK... https://mp.weixin.qq.com/s/q3TKcKMK... 原创 Sunkim Sunkim AI星踪岛 星探2026年5月19日 17:17 广东 我用AI给自己做了一个潮牌，从品牌名到Logo到视觉系统，一套全出了。 然后我又用AI把品牌官网也做了，还部署上线了。 全程没写一行代码。 在上一篇分享 我把 Codex 摸透了,16个设计师必看技巧直接抄作业！ ，当时在评论区看到有人说 "放出具体案例" ， "AI产出的结果呢" ，看到大家这么积极，有点小兴奋呢... 我把 Codex 摸透了,16个设计师必看技巧直接抄作业！ 好，今天不光做出来，还上线给你看。整条链路走完。 有看过我之前写的 「 GPT image 2 最被低估的隐藏玩法：做全套品牌视觉提案！ 」的 朋友 ， 应该记得我提到过： 无限延展 GPT image 2 最被低估的隐藏玩法：做全套品牌视觉提案！ 问题来了： 能不能让GPT Image 2继续延展网站页面，然后用Codex做出来并部署上线？ 01 / 第一步：让GPT Image 2延展网站设计 我之前 做了一套品牌视觉提案，已经有了完整的视觉DNA，现在要继续把它延展成电商网站。 提示词比你想象的简单 很多人以为要写一大段品牌描述才能让AI出图。其实不用。 我的做法是： 直接把品牌视觉图喂回去，再加一张参考的网页界面风格。 提示词只有一句话： "图1、2、3是我的品牌视觉DNA，图4是我想要参考的WEB界面风格，请根据参考风格帮我生成一套店铺网站web设计。" 没了。就这么短。 短提示词的好处是快。 一张图拼上去，一句话扔过去，几分钟就能看到"做成网页大概什么感觉"。适合快速验证方向——先看大方向对不对，再决定要不要抠细节。 Tips：有时候用图比用文字描述更有效 因为图片里什么都有。配色、角色、风格、氛围——你不需要用文字去描述，GPT Image 2自己看得懂。 设计师最擅长视觉表达，那就直接用视觉去跟AI沟通。 我出了3张界面效果图 用上面的提示词，GPT Image 2在同一轮对话里依次生成了三个页面： 页面1：首页（Home） 图看点： 完整的潮牌电商首页——顶部导航、全屏Hero区域、数据统计条，再往下是分类筛选栏和6个产品卡片网格。品牌DNA里的配色、角色、排版风格全部保留，而且把参考网页的卡片式布局融进来了。 页面2：商品集合页（Collection） 图看点： 和首页结构类似但更聚焦商品浏览——Hero区域换了文案和产品组合，产品网格展示了不同品类，每张卡片有价格、色块选择和标签。参考了电商平台的信息密度。 页面3：商品详情页（Product Detail） 图看点： 经典的商品详情页布局——左侧是产品大图+缩略图切换（背面/正面/细节），右侧是商品信息区，是电商详情页的标准范式。 三张图风格高度统一——因为是同一轮对话、同一套品牌视觉图喂出来的。角色形象、配色方案、图形语言完全一致。 这就是"无限延展"的好处：风格漂移几乎为零。 02 / 第二步：把3张 UI 图丢给Codex，生成可交互网站 界面图出来了，接下来交给Codex。 把3张界面图 +品牌视觉图 和提示词一起提交给Codex，告诉它你要什么： Codex会看你的3张界面图，读取里面的布局结构、配色方案、组件排列，一口气生成3个HTML文件。 对，一次性出3个页面，不用一个一个来。 03 / Before / After 放结果。 GPT Image 2生成的SUNKIM首页——一张精美的图片，不能点击、不能交互、不能滚动。 用Codex生成的HTML页面——可以滚动、可以hover产品卡片、可以点击导航。 把首页、集合页、详情页三个界面图和首轮页面效果并排对比。 坦白讲： 还原度在80%左右。色彩和布局基本到位，但概念图里那些精致的商品图、微妙的渐变过渡、涂鸦质感的图形元素——这些"氛围感"层面的东西，代码还原起来确实吃力。 但换个角度想： 现在一个小时内出demo，用来内部评审、客户提案、测试方向，够用了。 迭代：和Codex一起调，哪里不对点哪里 第一版通常不会100%到位。别急，继续描述你要的效果： "Hero区域的Slogan字号再大一些，用全大写，加上霓虹蓝紫的发光文字效果。" "产品卡片hover的时候，不只是边框变色，还要有一个从下往上的霓虹蓝紫光晕。" "图标位置偏移了，正常应该在字段内容左侧" 还可以直接截取设计效果图，让他按照设计稿修改 三到五轮对话，基本就能出来一个能看的版本。 如果某个效果你说不清楚， 直接丢个 公开链接+截图参考区域 ，告诉Codex"照这个效果来"。 调整后最终效果