关于生成式UI工具实现与探索
- 内容介绍
- 文章标签
- 相关推荐
作为前端开发，一直在研究AI生成式UI工具的开发和实践，现在已经基本成熟可生产，现在的基本通用的思路是：
- UI生成system系统提示词；
- AI调用design system【类似 UI UX Pro Max skill的工具】;
- 调用assets图片资源工具（ai function call）匹配图片资源；
system prompt → user prompt => html
以下是直出的效果：
zhichu-11920×1111 231 KB
zhichu-32268×1183 155 KB
最近想到一个思路，就是扩展一个plan规划模式：
根据user prompt生成页面规划，拆解成页面结构，经过评审，再生成html，避免"直接让AI写整页 HTML"时常见的信息架构混乱、copy 不到位、视觉令牌漂移等问题。
通过约束的规则评审通过之后，再生成，听起来挺合理，但是感觉结果貌似不理想：
- 花费的时间和token更多；
- 效果也没见得比直出更好（当然可能也跟规划和评审阶段的逻辑有关）；
和上图一样的提示词，规划模式：
plan-12288×1417 231 KB
plan-22288×1417 253 KB
plan-32288×1417 262 KB
plan-41920×1189 313 KB
plan-51920×1113 202 KB
plan-62270×1065 169 KB
plan-72265×963 121 KB
plan-82268×1113 177 KB
值得思考交流的是：
- 有没有必要加类似的规划评审流程？
- AI的底层模型现在或者未来可能本身已经对生成式UI有类似规划评审的优化，是不是在工具层加这个逻辑会是多余的？
--【壹】--：
佬，截图里用的是开源项目吗？最近也有需要做前端页面的工作。目前是在gemini网页让生成html看效果，然后把html给cc进行实现的笨方法
--【贰】--：
我是uxui的设计师，其实说实话，佬这个流程产品产出的效果通过figma make的opus或Gemini模型是可以直接实现的。Claude design产出会更好。以提示词驱动产出更好的设计这条路其实不太行的通，现在的大模型也都很难做到，Claude design有的时候效果也没有特别好。目前在有image2的更新后我提供个新的思路路径给佬友，通过image2产出设计规范、设计样式（因为image生图最新的审美很好）或风格图等（在这里面加入各种类型的选择就像Claude design一样），然后再让opus 4.7或Gemini基于优秀审美的图片进行还原复刻，这种效果要比你让大模型凭空做的通过提示词优化的效果要好。
--【叁】--：
是的，后端对设计没有美感，提示词也不知道怎么细化，脑子里面没有一点具体的设计思路和ai说都说不明白的
--【肆】--：
我的工具里面使用的是通义千问的视觉理解模型去识别，然后生成json格式的组件描述，这样生成出来的比较接近了，除非装饰性比较花的效果。
对应figma设计稿，最近我正式的项目是在claude code 中开启figma mcp，然后生成，这个还原度很高，用deepseek v4 pro都挺好用了。
--【伍】--：
最近自己vc的时候UI写得像一坨屎，UIUX，stitch都用上了做出来跟大学生的课后作业一样，看执行路径跟你的思路类似就是先规划页面再拆解再生成，但是很多的UI设计细节是比较考验功底的，就比如配色对比圆角阴影动画什么的，生成的简直一坨
--【陆】--：
这个提示词这么管用吗？codex的gpt5.4使用skill写的页面感觉也不太行，使用谷歌的stitch直接生成的原型挺可以的，放在codex实现，就没有那么好了，是模型的占据大比例吧，现在都是说genmini写的前端可以，如果配合好的提示skill是不是更好，佬你使用的是genmini吗
--【柒】--：
佬，除了image2有试过其它模型的效果么，一直觉得figma转代码的还原度不行，通过figma mcp去读数据，再转代码的
--【捌】--：
我有内置system提示词，模型我匹配了很多，deepseek,glm,kimi,gpt,gemini都有
--【玖】--：
这些skill都装了 有改进但是效果一般般吧
--【拾】--：
是的，本来就没有这块的知识储备，全指望AI有点白扯，gpt opus gemini都试过没有一个满意的，也可能开发的页面本来就像是一个2B的管理时页面不需要什么花里胡哨的设计
--【拾壹】--：
噢噢，用词不严谨，我修改下。
assets是自定义开发的ai function tool，给AI调用匹配图片的。
--【拾贰】--：
我自己写的，不过基础的版本是开源的，不知道贴开源地址在这里可不可行。
--【拾叁】--：
确实有审美能力的开发优势会强很多，再懂一些架构和客户打交道的能力，价值拉满。
--【拾肆】--：
谢谢佬的思路，我这个工具主要是给不用技术或者客户使用，可以借鉴这些流程，融入到工具里面。
--【拾伍】--： Donyzh:
Claude desig
真的，审美不好做出来的ui真的一眼难尽，也没有那个创意去驱动ai
--【拾陆】--：
那可以看看使用更好的模型和优化更好的提示词。
--【拾柒】--：
可以用这些skill看看：
- Frontend-Design
- UI UX Pro Max
--【拾捌】--：
- UI生成系统system提示词；
- 调用类似 UI UX Pro Max skill的工具给UI;
我怎么没看明白, 这两句里面的UI是指什么, 还是AI agent
assets工具具体是指那个
--【拾玖】--：
佬是后端吗，深有体会，没有前端那种对UI的敏感性，就是AI强大我都不知道要和他如何描述，生成的页面太拉了
作为前端开发，一直在研究AI生成式UI工具的开发和实践，现在已经基本成熟可生产，现在的基本通用的思路是：
- UI生成system系统提示词；
- AI调用design system【类似 UI UX Pro Max skill的工具】;
- 调用assets图片资源工具（ai function call）匹配图片资源；
system prompt → user prompt => html
以下是直出的效果：
zhichu-11920×1111 231 KB
zhichu-32268×1183 155 KB
最近想到一个思路，就是扩展一个plan规划模式：
根据user prompt生成页面规划，拆解成页面结构，经过评审，再生成html，避免"直接让AI写整页 HTML"时常见的信息架构混乱、copy 不到位、视觉令牌漂移等问题。
通过约束的规则评审通过之后，再生成，听起来挺合理，但是感觉结果貌似不理想：
- 花费的时间和token更多；
- 效果也没见得比直出更好（当然可能也跟规划和评审阶段的逻辑有关）；
和上图一样的提示词，规划模式：
plan-12288×1417 231 KB
plan-22288×1417 253 KB
plan-32288×1417 262 KB
plan-41920×1189 313 KB
plan-51920×1113 202 KB
plan-62270×1065 169 KB
plan-72265×963 121 KB
plan-82268×1113 177 KB
值得思考交流的是：
- 有没有必要加类似的规划评审流程？
- AI的底层模型现在或者未来可能本身已经对生成式UI有类似规划评审的优化，是不是在工具层加这个逻辑会是多余的？
--【壹】--：
佬，截图里用的是开源项目吗？最近也有需要做前端页面的工作。目前是在gemini网页让生成html看效果，然后把html给cc进行实现的笨方法
--【贰】--：
我是uxui的设计师，其实说实话，佬这个流程产品产出的效果通过figma make的opus或Gemini模型是可以直接实现的。Claude design产出会更好。以提示词驱动产出更好的设计这条路其实不太行的通，现在的大模型也都很难做到，Claude design有的时候效果也没有特别好。目前在有image2的更新后我提供个新的思路路径给佬友，通过image2产出设计规范、设计样式（因为image生图最新的审美很好）或风格图等（在这里面加入各种类型的选择就像Claude design一样），然后再让opus 4.7或Gemini基于优秀审美的图片进行还原复刻，这种效果要比你让大模型凭空做的通过提示词优化的效果要好。
--【叁】--：
是的，后端对设计没有美感，提示词也不知道怎么细化，脑子里面没有一点具体的设计思路和ai说都说不明白的
--【肆】--：
我的工具里面使用的是通义千问的视觉理解模型去识别，然后生成json格式的组件描述，这样生成出来的比较接近了，除非装饰性比较花的效果。
对应figma设计稿，最近我正式的项目是在claude code 中开启figma mcp，然后生成，这个还原度很高，用deepseek v4 pro都挺好用了。
--【伍】--：
最近自己vc的时候UI写得像一坨屎，UIUX，stitch都用上了做出来跟大学生的课后作业一样，看执行路径跟你的思路类似就是先规划页面再拆解再生成，但是很多的UI设计细节是比较考验功底的，就比如配色对比圆角阴影动画什么的，生成的简直一坨
--【陆】--：
这个提示词这么管用吗？codex的gpt5.4使用skill写的页面感觉也不太行，使用谷歌的stitch直接生成的原型挺可以的，放在codex实现，就没有那么好了，是模型的占据大比例吧，现在都是说genmini写的前端可以，如果配合好的提示skill是不是更好，佬你使用的是genmini吗
--【柒】--：
佬，除了image2有试过其它模型的效果么，一直觉得figma转代码的还原度不行，通过figma mcp去读数据，再转代码的
--【捌】--：
我有内置system提示词，模型我匹配了很多，deepseek,glm,kimi,gpt,gemini都有
--【玖】--：
这些skill都装了 有改进但是效果一般般吧
--【拾】--：
是的，本来就没有这块的知识储备，全指望AI有点白扯，gpt opus gemini都试过没有一个满意的，也可能开发的页面本来就像是一个2B的管理时页面不需要什么花里胡哨的设计
--【拾壹】--：
噢噢，用词不严谨，我修改下。
assets是自定义开发的ai function tool，给AI调用匹配图片的。
--【拾贰】--：
我自己写的，不过基础的版本是开源的，不知道贴开源地址在这里可不可行。
--【拾叁】--：
确实有审美能力的开发优势会强很多，再懂一些架构和客户打交道的能力，价值拉满。
--【拾肆】--：
谢谢佬的思路，我这个工具主要是给不用技术或者客户使用，可以借鉴这些流程，融入到工具里面。
--【拾伍】--： Donyzh:
Claude desig
真的，审美不好做出来的ui真的一眼难尽，也没有那个创意去驱动ai
--【拾陆】--：
那可以看看使用更好的模型和优化更好的提示词。
--【拾柒】--：
可以用这些skill看看：
- Frontend-Design
- UI UX Pro Max
--【拾捌】--：
- UI生成系统system提示词；
- 调用类似 UI UX Pro Max skill的工具给UI;
我怎么没看明白, 这两句里面的UI是指什么, 还是AI agent
assets工具具体是指那个
--【拾玖】--：
佬是后端吗，深有体会，没有前端那种对UI的敏感性，就是AI强大我都不知道要和他如何描述，生成的页面太拉了