后端程序员 VibeCoding 前端页面

我是前端，设计感来自于你的所见所闻。你想做出优秀的设计至少要见过足够多的设计作品。并沉淀出自己的口味。没有那么多设计也没关系。列出你的项目功能，列出模块。思考这些功能如何组合交互。取一根铅笔，几张白纸，一块橡皮开始画。最后才开始写代码。AI 会把你的铅笔稿做些 AI 味很浓的优化。不过可以先做着，做完之后取一套配色应用上。要氛围感的画再加一个符合用户画像的字体文件。这样就很完美了

@HMYang33 #1 就是以前我觉得 Apple 官网很炫酷，那个对于有经验前端来说，是手拿把掐吗

@JYii 这种酷酷的落地页，要单独剥离开 3D 建模或者背景视频给专业的人来做，前端只是引用过来，摆放在页面里，加点按钮和触发效果。对于稍微有点经验的前端都是手到擒来。

我也是后端，最近 vibecoding 了不少项目，说说我的一些做法
1. 约束前端的语言等工具，如：tailwindcss / vue3 / pnpm / xxx 等
2. 先让前端基于 tailwindcss 整理通用组件的风格（或者基于现有组件的定义）
3. 多语言 / 夜间模式自适应 / 主题色
4. 整体布局（根据你的项目来，如：header sider footer 等）
5. e2e 自动化测试
当需要开发具体页面时：
1. 让它理解需求，设计交互，给出方案。
2. 根据方案调整以后，你要求它输出测试用例，并说明为什么，在这个过程中，可以调整方案
3. 落地，并让它验证，推送到 feature 分支等
4. 回归测试


上面的步骤可以自己搞 skill 或者 agent ，看你最终自己如何找到自己舒服的节奏