2026 才准备开始用 ai 写代码，有个疑问请教一下

24 年用过 v0 ，简单的还原很牛逼，复杂 UI 不清楚

现有的 ai ，都是用别的模型，把图描述成字，然后再读字。字里面肯定确实了 ui 的细节。
换工作流了，让产品或设计直接用 ai 写 html 来设计，然后写好的界面代码给你，接上逻辑，就能 1：1 复刻了

这个问题要不你去问我 ai ，哈哈哈

@cutecore 有个不明白啊，比如我后端 springboot 项目的配置里有一些比如数据库连接信息、api 秘钥之类需要保密的配置项，那我整个项目给 cluade 访问会不会不安全？安全审计会不会说我数据泄露啥的

只有 ui 稿截图想要完全还原不太现实, 视觉元素还好说, 主要交互类的操作信息没法单纯从图上获取. 我试过如果有类似具体实现的代码可以参考, opus 4.5 倒是可以按你给出的技术栈基本还原(比如把 dbeaver 这种界面用 React 复刻一个前端版本).

ui 不行，除非用专门做前端的 AI 分析工具，cursor 只适合手搓代码，直接按图画 UI 它做不到

给设计图生成大概

然后自己微调一下基本就行了.

最简单的就是，使用 ide(vscode,cursor,antigravity)安装一个 opencode(另需安装 oh-my-opencode)插件，然后白嫖或者购买一个 kimi2.5 的开发套餐。然后直接截图或者把所有截图都明明好放在项目新建文件夹里面，然后让他根据截图写就行了，在 opencode 中使用 @来加载文件或者图片。kimi2.5 根据图片写前端的能力比 gemini3 还强，还原度非常高。提示词很简单，一步一步来。先让 AI 出一份项目说明文档.md ，包括技术栈架构等，然后和 AI 说，@项目架构.md 根据文档初始化项目基本框架,只要一个 demo 页面，要能直接运行。然后新开一个窗口，@docs/首页.jpg 根据图片写一下首页。 还有一下进阶技巧是使用 AI 开发规范约束框架，比如 openspec speckit 等，你可以自己研究。不过你只是根据截图全新写可以先不用

可以截图，截图的基本都是不准的，只能保证个大概，像素级还原目前来看感觉还是有点难度，我这边用了 figma mcp 也无法保证能完全还原，还有就是如果需要组件化开发很大程度依赖于设计稿的设计规范

@walkingmoonwell 开发测试当然用的不是一套环境
而且正式环境很多都内网,给它它也访问不了

确实可能泄密的,用环境变量什么的外部变量;比如只有内网访问的域名;从内网读取设置

使用 gemini 让他参考生成 json 格式，然后拿 json 格式再给 cursor 参考

可以考虑在 v0 先做一版实现你的基础需求 然后再让 cursor 这种介入修改 我觉得是比较可用的

我也准备 2026 开始氛围编程。感觉真的是同样落伍了之前试过字节出的那个 ide 当时感觉有点蠢就再也没用过没想到现在进化的这么快

@wu67 用 cursor 一年了，没遇见过你说的快捷键问题……

@skkakaka2 我也不知道啊， 官网开完套餐下载安装完就是这样子了，难受得要命，直接对话框叫他自己改过来恢复默认的键位，他直接给我消耗了一堆 token…

我们是 UX 使用 Figma Make 直接根据设计稿生成 React 的代码，还原度 UX 自己调教好，所有动态数据让智能体单独走配置数据，配置数据可以单独从 excel 里读取，也可以单独 js/ts 文件维护。然后前端拿到 React 代码，再根据业务逻辑调整。还原度这块至少能保证没问题。