文章多模态与视觉
VibeCoding做出风格同一的UI 做好这个三步跟大模型约法三章
如何在VibeCoding中做出美观且风格统一的复杂产品UI，主要分为以下三个核心步骤：
1.制作概念图：跳过代码阶段，先用生图模型生成几张不同视觉方向的概念图供挑选，确定产品的整体感觉和品牌色。
2.创建HTML样板：将选定的概念图转化为可用的HTML代码样板，实现具体的视觉效果并整理出可复用的素材组件。
3.编写设计规范：将所有设计资源整理成给AI阅读的文字版（README.md）和给人看的可视化HTML版，挂载到Agent每次开工都会读取的文件中，确保后续新增页面时AI能稳定遵循同一套规则。
最后一步
原始来源 · 请支持原创
PM刘搞定 //相关内容
收录2026-11-02
用 Codex 五分钟做出专注计时小程序并上线
文章以「专注时刻」微信小程序为例，演示用 Codex 从零生成原生小程序代码的完整流程：给出结构化提示词生成倒计时与记录两页面，导入微信开发者工具、真机预览、上传代码、提交审核并发布。案例数据本地存储、无需登录和服务器，强调先做简单可用版本，再逐步迭代。
文章2026-10-31
AI味太重不能一味的怪agent，把这16个UI动效学会【分享】
整理16种常见UI动效及其应用场景，涵盖边缘流光、聚光、3D倾斜、滚动叙事、磁吸、打字机、数字滚动、弹性、错峰等，并给出动画时长与性能优化建议，强调掌握专业名词有助于让AI准确实现这些动效。
收录2026-10-31
AI生成UI太丑？三个方法让它变好看
针对vibe coding中AI生成UI千篇一律（蓝紫渐变、大圆角、emoji）的问题，作者基于20多款应用经验给出三种解法：使用成熟前端UI库、自定义UI token分阶段打磨、借助Figma或taste-skill等AI设计工具，并强调先功能后UI、统一设计token。
//评论
0 条