用 AI 复刻 v0.app (1) 🚀
背景 🔍
最近有了 AI 以后，从 0 开发一个工具就变的非常简单！刚好最近业务上，以及一些其他同事与开源社区的灵感，我有了一个想法，就是用 AI 复刻 v0.app 这个项目。
其实代码生成页面的功能，应该也有很多工具也有这个功能，不过公司内暂时还没有一个平台端的 playground。其实我们业务可能也会有这样的需求，所以先预言下 ✨。
访问地址：内网链接无法访问，仓库地址：内网链接无法访问
💡 由于是裁剪版本所以是叫 "v 负一"
功能介绍 💡
简单来说就是提示词模板 + 用户提示词 + 大模型 = HTML 代码生成器，其中大模型配置可以用 hik-maas
如果需要上传图片的话，则需要选择下 支持文件上传功能，且需要选择视觉模型，我这里选的是 GLM-4.5V
简单看板效果：通过图生代码 📊
简单图生成效果 🎨：
这里的 prompt 是这样的：
请你作为一名资深前端开发工程师。请根据以下提示词生成 HTML 代码，不要包含解释，只返回代码本身：
提示词：{prompt}
技术要求：
1. 使用现代HTML5和CSS3标准
2. 使用 Tailwind CSS 工具类进行样式设置
3. 代码要简洁、语义化
4. 使用Flexbox或Grid布局进行页面结构设计
5. 响应式设计
6. 包含必要的交互功能
7. 对于可能存在的图标，请使用Font Awesome或类似的图标库来近似实现
8. 确保良好的可访问性
请返回完整的 HTML 代码，包括所有必要的样式和脚本。亮点功能 ⭐
- 🌐 本地化优先：提示词模板、模型、甚至返回的代码都是存在浏览器缓存内部的
- 🔄 支持不同的模板切换：其实你想生成非 html 的代码也可以
- 📁 支持文件上传功能：支持流式输出代码，支持直接预览与复制（暂时不支持修改）
TODO 📋
- 🧩 代码解耦，采用 shadcn-vue 组件库，参考：ai-element
- 📊 调整数据看板模板的提示词优化
- 🖼️ 支持不同 vue 版本的预览效果
- 🧰 支持不同组件库的模板
- 💡 核心目的：沉淀一些好的 prompt，后续可以会考虑存下一些组内用下来比较好的 prompt
- 通过提示词和一些快照，把提示词和页面快照同步到 iris-snippet 中
- 是否考虑在做一个社区 类似 https://v0.app/templates
开发笔记 📝
1天半复刻完，基本都用的是 claude code，稍微记录一下心得 💡
重要的事情❗
- 🎯 一定要描述清楚你的需求
比如我要加一个按钮，那你必须告诉它按钮的名称，大概长啥样，要放到哪里。当然只能尽量描述，它才能帮你实现。如果不对的话，那你可以接着问。
- 🧹 多使用
/compact
比如你按钮加好了，但它的位置不对，那你可以接着让他给你调整位置，但最好在此之前执行 /compact 命令。
- 🧠 可以先让他理解你的功能
任何一个新的会话你相当于有个超级助理，但它的记忆是0，所以你要想好你要做什么，然后告诉它，然后它才能帮你做。如果你是在已有的功能上做调整，那你可以先让他理解你的功能，然后再去执行。比如我要加一个按钮，那你可以先让他理解你的功能，然后再去执行。一般你可以 @文件 命令，让它读下文件，然后根据文件内容，让他理解你的功能，然后再去执行你的任务。
我个人用下来，它主动做这件事情的意图没有 cursor-agent 那么强烈。
- 🧼 清除上下文
如果是2个不同的任务，那你可以先执行 /clear 命令，清除下上下文，然后再去执行。而且一个功能完成并通过测试。一定要在 git 面板，把 change 改成 stage-change，更有必要最好要提交下代码 💾。
- 🔍 复杂任务，多做审核
一般简单的任务，它不会用 task 工具，它咨询我是否改的时候我一般都选 yes，那我只要等他执行完我去测试就行了；但是复杂任务，它会用这个工具，在它调用这个工具一开始和关键步骤的时候你一定要看它的执行是否是符合你预期的。
- 📋 复杂任务，自己先分步骤
我这个项目其实是有前后端的，我在把大模型加入文件读取功能的时候，我大概分了几个步骤：
- 前端页面补充页面的配置项和上传按钮，调整入参
- 后端调整接口
- 后端返回格式存在特殊问题再做缺陷修复
这里都是一个大的会话完成，但每步完成都加了 /compact，以及做了 git 处理。
其实可以里面一些动作是我认为开发一个功能我的最佳实践，比如单个功能做完就要提交，前后端的开发流程等。
附上一个 claude-code 的逆向分析工具，里面的工具和 prompt 都是可以让我们可以更好的理解 claude-code 的执行过程。
以及 cursor社区rules，claude-code 在执行 /init 的时候其实也会读取 .cursor/rules 下面的文件的。