跳到内容

夜深了,注意休息,愿你今夜好梦。

  • 10 回复
  • 875 浏览

用 Cursor Composer 生成前端页面真香

参与讨论

最近刷到那个“Vibe Coding”的视频,我也试了试 Cursor 的 Composer 模式,直接把 Figma 链接丢进去让它写 React 代码。虽然样式细节还得手动调,但省去了搭环境和写基础组件的时间,确实省事儿。不过对于逻辑复杂的后端接口,它还是会犯些低级错误,不能全信。

讨论区

按楼层回复,支持引用与表情;使用 @用户名 或 @昵称 可提醒对方;发言计入圈子贡献字数。

10s 条评论

  1. 法务别找我
    法务别找我 绽放14.4k

    回复 @不测不信邪:私藏一个 V0.dev,这玩意儿生成 Tailwind 代码比直接喂 Figma 干净多了,不用在那儿痛苦地重构类名。V0.dev

  2. 粉笔没落灰
    粉笔没落灰 绽放13.2k
    引用 法务别找我

    回复 @不测不信邪:私藏一个 V0.dev,这玩意儿生成 Tailwind 代码比直接喂 Figma 干净多了,不用在那儿痛苦地重构类名。V0.de…

    @法务别找我 V0.dev 确实比 Figma 直出干净,不用费劲洗 Tailwind 类名。班上孩子试过,用这个搭架子快多了,省得手动重构。链接 v0.dev

  3. Momo摸鱼画手
    Momo摸鱼画手 绽放14.5k
    引用 法务别找我

    回复 @不测不信邪:私藏一个 V0.dev,这玩意儿生成 Tailwind 代码比直接喂 Figma 干净多了,不用在那儿痛苦地重构类名。V0.de…

    回复 @安全佬路过:别抄提示词了,自己试。直接用 V0.dev 生成组件再拼装,Tailwind 类名干净多了,省得手搓重构。

  4. 下次一定改
    下次一定改 成长9,324

    @深夜改BUG 别光依赖 Figma,直接看 Cursor 官网的文档示例,配合 Shadcn UI 这种现成组件库,能省掉大量手动调样式的时间。

  5. 佛系打工人
    佛系打工人 成长10.1k

    @Momo摸鱼画手 Composer 生成一堆未使用的 Tailwind 类名是常态,建议上 unplugin-remove-unused-css 自动清洗,不然项目臃肿得慌。

  6. 法务别找我
    法务别找我 绽放14.4k

    @深夜改BUG 别硬刚 Figma 了,直接用 Cursor 的 Composer 配合 V0.dev 生成组件再拼装,连 Tailwind 类名都干净,省时省力。

  7. 咖啡续命中
    咖啡续命中 成长10.6k

    @深夜改BUG 确实,Figma 丢进去那种乱码 Tailwind 我上次也踩坑了。可以试试这个顺序,先让 Cursor 用 shadcn/ui 这种现成组件库生成骨架,比硬写类名省心多了,参考一下 shadcn/ui 的文档,布局稳很多。

  8. 十万加在逃
    十万加在逃 绽放16.2k

    Figma 转代码那套确实容易乱,我一般拿它跑个初稿,然后去 GitHub 搜 `tailwindcss-purge` 相关的清理脚本洗一遍类名,不然维护起来真要命 🤦‍♀️

  9. 下次一定改
    下次一定改 成长9,324

    @深夜改BUG Figma 丢进去生成的代码结构往往很乱,建议配合 Framer Web 这种组件库约束输出,不然 Tailwind 类名写出来根本没法维护,还得手动重构一遍。

  10. 粉笔没落灰
    粉笔没落灰 绽放13.2k
    引用 下次一定改

    @下次一定改 Figma 丢进去确实容易乱,班上孩子试过直接用 Cursor 生成完整页面,结果 Tailwind 类名写得跟天书一样,维护起来头大。我后来发现用 Framer Web 做原型约束效果不错,至少结构清晰些,省得后面手动重构半天。

发表评论

登录后发表评论

登录即可参与楼层讨论,支持引用回复与 @ 提醒。

前往登录页

Welcome! This site is in Chinese. Tap EN in the top bar to read in English.