Vibe coding新手求助！Codex设计前端总是不尽人意
- 内容介绍
- 文章标签
- 相关推荐
如题，楼主纯新手打算靠codex手搓一个小工具，但AI规划的和实际输出的差别也太大了
这是superpower计划的UI示意图，每一个项目都算是分好了类别，算是能用的水平：
image1236×445 17.1 KB
image2462×1099 200 KB
结果最后出来长这个鬼样子 ，啥信息内容都混杂在一起，差距太大了，完全都不能使用：
image971×919 60.7 KB
各位佬友们能支点招吗？楼主纯新手具体技术的可能不太懂，只会一味的对AI回同意继续。。。怎么才能调教AI设计好前端？
网友解答：--【壹】--：
用ui-ux-pro-max和frontend-skill
--【贰】--：
试试这个? 它们平台美观度不错
Variant – Endless designs for your ideas, just scroll
Enter an idea for an app or site and see endless design options just by scrolling.
导出搭配这个(不然要钱
气笑了, 三分钟手搓 Variant 导出脚本 开发调优本帖使用社区开源推广，符合推广要求。我申明并遵循社区要求的以下内容： 我的帖子已经打上 开源推广 标签： 是 我的开源项目完整开源，无未开源部分： 是 我的开源项目已链接认可 LINUX DO 社区： 是 我帖子内的项目介绍，AI生成、润色内容部分已截图发出： 是 以上选择我承诺是永久有效的，接受社区和佬友监督： 是 以下为项目介绍正文内容，AI生成、润色内容已使用截图方式发出 UI 生成…
--【叁】--：
先用 figma 生成 对应的前端界面（每天有一定的免费额度），把前端源码下载下来，之后再在这个源码基础上让 codex 修改。
--【肆】--：
gpt5.4设计前端不太行，建议找个有opus4.6的公益站把页面设计到pencil里，让gpt5.4去还原
--【伍】--：
之前回答过类似的问题了
codex做前端确实不尽如人意
想做好可以安装A社官方的前端skills，然后让他调用skills去做
最好还是给他你喜欢的设计类型，不要让他自己闷头做，给他找参考找约束
--【陆】--：
谢谢佬，我先看看文档
--【柒】--：
虽然 codex 写前端不太行，但是应该也没这么夸张 ，可以看看官方的文档
Designing delightful frontends with GPT-5.4 | OpenAI Developers
Practical techniques for steering GPT-5.4 toward polished, production-ready frontend designs.
--【捌】--：
可以用现成的prompt试试
https://linux.do/t/topic/1811898
--【玖】--：
Pencil – Design on canvas. Land in code.
Pencil fundamentally increases your engineering speed by bringing designing directly into your preferred IDE.
佬可以试下这个
--【拾】--：
用stitch先生成设计交互图，再让codex抄
--【拾壹】--：
先出文档，再让gemini出高保真生产UI原型，让codex严格还原原型，这是codex一把出来的效果
image1912×760 116 KB
--【拾贰】--：
试试把gpt放CC里，然后用这个skill呢。 claude-code/plugins/frontend-design/skills/frontend-design/SKILL.md at main · anthropics/claude-code
如题，楼主纯新手打算靠codex手搓一个小工具，但AI规划的和实际输出的差别也太大了
这是superpower计划的UI示意图，每一个项目都算是分好了类别，算是能用的水平：
image1236×445 17.1 KB
image2462×1099 200 KB
结果最后出来长这个鬼样子 ，啥信息内容都混杂在一起，差距太大了，完全都不能使用：
image971×919 60.7 KB
各位佬友们能支点招吗？楼主纯新手具体技术的可能不太懂，只会一味的对AI回同意继续。。。怎么才能调教AI设计好前端？
网友解答：--【壹】--：
用ui-ux-pro-max和frontend-skill
--【贰】--：
试试这个? 它们平台美观度不错
Variant – Endless designs for your ideas, just scroll
Enter an idea for an app or site and see endless design options just by scrolling.
导出搭配这个(不然要钱
气笑了, 三分钟手搓 Variant 导出脚本 开发调优本帖使用社区开源推广，符合推广要求。我申明并遵循社区要求的以下内容： 我的帖子已经打上 开源推广 标签： 是 我的开源项目完整开源，无未开源部分： 是 我的开源项目已链接认可 LINUX DO 社区： 是 我帖子内的项目介绍，AI生成、润色内容部分已截图发出： 是 以上选择我承诺是永久有效的，接受社区和佬友监督： 是 以下为项目介绍正文内容，AI生成、润色内容已使用截图方式发出 UI 生成…
--【叁】--：
先用 figma 生成 对应的前端界面（每天有一定的免费额度），把前端源码下载下来，之后再在这个源码基础上让 codex 修改。
--【肆】--：
gpt5.4设计前端不太行，建议找个有opus4.6的公益站把页面设计到pencil里，让gpt5.4去还原
--【伍】--：
之前回答过类似的问题了
codex做前端确实不尽如人意
想做好可以安装A社官方的前端skills，然后让他调用skills去做
最好还是给他你喜欢的设计类型，不要让他自己闷头做，给他找参考找约束
--【陆】--：
谢谢佬，我先看看文档
--【柒】--：
虽然 codex 写前端不太行，但是应该也没这么夸张 ，可以看看官方的文档
Designing delightful frontends with GPT-5.4 | OpenAI Developers
Practical techniques for steering GPT-5.4 toward polished, production-ready frontend designs.
--【捌】--：
可以用现成的prompt试试
https://linux.do/t/topic/1811898
--【玖】--：
Pencil – Design on canvas. Land in code.
Pencil fundamentally increases your engineering speed by bringing designing directly into your preferred IDE.
佬可以试下这个
--【拾】--：
用stitch先生成设计交互图，再让codex抄
--【拾壹】--：
先出文档，再让gemini出高保真生产UI原型，让codex严格还原原型，这是codex一把出来的效果
image1912×760 116 KB
--【拾贰】--：
试试把gpt放CC里，然后用这个skill呢。 claude-code/plugins/frontend-design/skills/frontend-design/SKILL.md at main · anthropics/claude-code