#VibeCoding · AI 短帖与讨论

Vibecoding 不只是写代码，现在连 UI 设计都能 AI 生成了。

整理了 6 个新工具：

1. beUI

专注 B 端组件库，生成后台界面很快。适合 admin 面板、数据看板。

1. BoardUI

白板式设计，用 Agent 自动排版。适合快速原型、头脑风暴。

1. ThreeUI

3D + WebGL 界面生成，基于 Three.js。适合展示型网站、产品落地页。

1. Fluid Functionalism

流体设计风格，动效自动生成。适合创意项目、艺术感强的界面。

1. Watermelon UI

轻量级移动端 UI，生成小程序、H5 页面很快。

1. HeroUI Pro

专注首屏设计，AI 生成 hero section。适合 landing page。

共同特点：
• 都支持从文字描述生成界面
• 都能导出代码（React/Vue/HTML）
• 都和 Claude Code/Cursor 能配合

局限：
• 复杂交互还是需要人工调整
• 品牌一致性难保证
• 设计系统级别的项目还不行

适合场景：

• 快速原型验证
• MVP 界面搭建
• 个人项目/小团队

你们用 AI 做设计吗？

#Vibecoding #AI设计 #UI工具 #前端

Vibe Coding 火了，但 90% 的人用错了。

不是让 AI 写代码，是你得知道怎么跟 AI 协作。

我总结了一个 10 步工作流，从需求到上线：

1. 写清楚需求——比写代码重要 10 倍
2. 让 AI 生成技术方案——别直接要代码
3. 评审方案——问 AI 潜在问题和风险
4. 分模块实现——一次一个功能点
5. 让 AI 写测试——先测再跑
6. 本地验证——别直接上生产
7. 让 AI 优化——性能、安全、边界情况
8. 文档同步——让 AI 同步更新 README
9. 部署上线——CI/CD 也交给 AI 配
10. 监控迭代——出问题让 AI 分析日志

关键点：AI 是副驾驶，不是自动驾驶。每个环节你都要把关，但具体执行可以让 AI 来。

我按这个流程做了一个小工具，从 0 到上线 3 小时，代码质量比我自己写还高。

适合谁？
• 有编程基础，想提效的开发者
• 产品经理想快速验证想法
• 独立开发者一个人干一个团队的活

不适合谁？
• 完全没编程基础——你分不清 AI 写的是对是错
• 复杂系统架构——AI 容易在边界情况上翻车

你们 Vibe Coding 过吗？踩过什么坑？

#VibeCoding #AI编程 #开发效率

Codex 省额度技巧：别从0开始写，先去 GitHub 找现成的

@JimmyRevived 分享了一个很实用的 Codex 使用技巧，能大幅减少 Token 消耗，核心就一句话：先接 GitHub 插件，再开始 Vibe Coding。

常见误区
很多人用 Codex 一上来就是：

• "帮我做个网站"
• "帮我写个 App"
• "直接开干！"

结果 Token 哗哗往下掉，额度很快就用完了。

更好的做法
你想做的东西，GitHub 上大概率已经有人做过了，而且很多项目已经相当成熟：能直接部署、能二次开发、核心功能都写好了。

让 AI 从 0 开始造轮子，不如基于现有项目改。

具体操作建议
每次做项目前，先把这段提示词丢给 Codex：

"我要做一个 XXX。先不要写代码。去 GitHub 找能直接使用或二次开发的开源项目。重点确认：

1. 项目是否还在维护
2. Star / 社区活跃度如何
3. 部署是否麻烦
4. 哪些功能可以直接复用
5. 技术栈是否适合我的需求

最后告诉我：应该直接用、基于现有项目修改，还是自研？"

为什么有效

• 减少重复劳动：不用写已经存在的代码
• 降低出错率：成熟项目经过社区检验
• 节省额度：调研比写代码省 Token
• 更快上线：基于现有项目改，比从0开始快

适用场景

• 做 MVP 验证想法
• 快速搭建原型
• 学习优秀项目的代码结构

不适用场景

• 完全创新的功能
• 有严格代码规范要求的企业项目
• 需要深度定制核心逻辑的场景

#Codex #AI编程 #VibeCoding #开源 #效率技巧