做运营的小何想给活动做个报名落地页,找前端排期要等一周。后来她用 v0 自己搞定了——把脑子里的界面用一句话说清楚,几秒钟就拿到一版带样式的 React 页面,还能在浏览器里实时改。这类"文字变界面"的工具,最适合不想写代码又想把想法落地的普通人。
第一步:用一句话描述你想要的界面。别写"做一个好看的页面"这种空话,要写清板块和用途。比如"一个产品发布落地页,顶部导航、中间大标题加副标题和两个按钮、下面三张功能卡片、底部邮箱订阅"。描述越具体,第一版越接近你要的。预期结果:右侧立刻出现一版能看的页面,不是代码,是渲染好的样子。常见情况:第一版布局和你想的不完全一样,别急,下一步用对话调。
第二步:用自然语言微调,比手写 CSS 快十倍。选中某个区块,说"把按钮改成圆角、主色用蓝色、卡片之间留白大一点",它当场改。下面这句可直接复制:
请把这个落地页整体改成偏商务的深蓝配色,按钮改成圆角并带轻微阴影,三张功能卡片的图标用线性风格,整体在手机宽度下也能正常竖排。
第三步:验收并导出代码。改到满意后,点导出,v0 给的是标准 React + Tailwind 代码,可以下载到本地用 Bolt 或 Lovable 接着跑,也能直接丢给开发同事集成。验收标准:用浏览器开发工具切到手机宽度看一遍,三张卡片能正常竖排、按钮点击有反馈(哪怕是占位链接),就算合格;哪块空着就回到第二步补一句要求。
如果你完全不会代码也别怕——v0 的预览本身就是成品,很多落地页改改文字就能直接截图用在群里或公众号,不一定非得导出工程。等你想进一步改样式,再把代码交给会前端的同事,沟通成本比从零描述低得多。
有个小坑:v0 出的代码默认依赖它自己的组件约定,直接拷进老项目可能要改 import。所以最好把它当成"原型 + 灵感来源",正式上线前让开发过一遍。进阶玩法:把公司设计规范的截图喂给它当参考,生成出来的风格会更统一,多页项目还能让它记住"沿用同一套配色",避免每页各做各的。