前端核弹：初试用 v0.dev 聊天做 UI

[falcon05]

听说 https://v0.dev 改版了，加强了 ai 聊天的能力，昨天试着做了个 todo list 玩了一下，完成度相当高啊，而且可以定制化，比如我做的这个，就是用聊天的方式，让 ai 给我生成一个 ui 组件，然后我再稍微调整一下，就可以用了，下一步准备用 cursor 开发 api 和 oauth 。

先看看效果

https://cf-next-todo.pages.dev/

部署在 cloudflare ，目前不登录可以使用，数据保存在 localStorage。

代码 Github Repo

使用

• 创建项目

npm create cloudflare@latest -- cf-next-todo --framework=next

• 安装 v0.dev 聊天做好的 ui 组件：

可能有多个组件，所以可能执行需要多次: 比如我的是 todo-list，regist-form，login-form

npx shadcn@latest add "https://v0.dev/chat/b/组件 1token"
npx shadcn@latest add "https://v0.dev/chat/b/组件 2token"
npx shadcn@latest add "https://v0.dev/chat/b/组件 3token"

• 修改 src/app/page.js

import { TodoList } from '@/components/todo-list'

export default function Home() {
  return (
    <main className="container mx-auto px-4">
      <TodoList />
    </main>
  )
}

• 部署到 cloudflare

npm run deploy

[GeekGao]

这个基于 shadcn 的界面过于简单了，完成度也不高...下次建议发到程序员节点，而不是这个节点。

[falcon05]

@GeekGao 额，就做 UI 而言，我觉得完成度挺高的，todolist 本来就不复杂，而且这个甚至还包括了登录、注册，离线存储，而且我分享自己的经验，也创造了一些东西，即使不完美，也是创造分享，我选择不接受这个建议。

[xing393939]

结合 todo-list ，regist-form ，login-form 这三个组件的时候，需要改对应的代码的吧

[chesha1]

请问 op 用的是免费版还是付费版？

我看 pricing 里说，免费版可以用 chat ，每个月 200 credits ，但是又说这些 credits Does not apply to v0.dev/chat

这个到底是免费用户能不能用 chat

[falcon05]

@xing393939 不用啊

[falcon05]

@chesha1 能 chat ，免费的每天有次数限制

[tyzandhr]

说实在的，我觉得完成度够高了