开启时会模糊预览图,关闭后正常显示

I built a Cursor-like experience plugin for Neovim: avante.nvim I am building Alma now: https://t.co/pfq9srNgsd


We're in a race. It's not USA vs China but humans and AGIs vs ape power centralization. @deepseek_ai stan #1, 2023–Deep Time «C’est la guerre.» ®1

![如何写好 v0 的提示词,应该也适用于lovable等其他AI编程工具
核心框架:三个关键输入
经过大量测试,v0团队发现最好的提示词都包含三个部分:
1. 产品表面(Product Surface)
具体要做什么
2. 使用场景(Context of Use)
谁在什么时候用,要解决什么问题
3. 约束条件(Constraints & Taste)
怎么做,有什么限制
模板长这样:
做一个 [具体的组件、数据、功能]。
给 [什么人] 用,
在 [什么场景] 下,
为了 [达成什么目标]。
约束:
- 平台/设备
- 视觉风格
- 布局要求
第一部分:产品表面
别说"做个仪表盘",说清楚仪表盘里有什么。
比如:
仪表盘显示:
- 前 5 名销售员的姓名和业绩
- 团队业绩 vs 目标的进度条
- 销售漏斗(线索 → 合格 → 演示 → 成交)
- 最近 6 个月的业绩趋势图
你越具体,v0 就越不会瞎猜,也不会做一堆你用不上的功能。
第二部分:使用场景
这是最容易被忽略,但影响最大的部分。
想想这几个问题:
- 谁在用?
- 什么时候用?
- 要做什么决策?
- 有多少时间?
还是刚才那个仪表盘的例子:
销售经理(不懂技术)在早会时用,
在办公室的大显示器上看,
快速找出表现不好的人,顺便表扬一下做得好的。
看出区别了吗?
同样是仪表盘,给销售经理早会用,和给数据分析师深度分析用,设计完全不同。
前者要一眼看出重点,后者需要详细的筛选和下钻功能。
Vercel 团队做了个对比测试:
没写使用场景的版本:
- 搜索功能是假的(只有个框)
- 购物车点不了
- 手机上看一团糟
写了使用场景的版本:
- 搜索和购物车都能用
- 完美适配手机
- 还自动加了快速预览和分类筛选
虽然多花了 26 秒生成,但省掉了后续 1-2 轮修改。算下来反而更快。
第三部分:约束条件
包括:
- 风格偏好
- 设备假设
- 布局期望
- 配色方案
- 响应式要求
比如:
专业但亲切的感觉。
用卡片式布局,层次清晰。
配色:绿色表示正常,黄色预警,红色告急。
主要在大屏幕上用。
要有真实 SaaS 产品的感觉。
v0 的默认设置已经不错了,但具体的约束能让它变得更好,而且代码更简洁。
实测对比
Vercel 团队做了三组对比测试,每组只改变一个变量。
测试 1:使用场景的影响
模糊版:
"做个电商网站,要有商品列表、筛选和购物功能。"
清晰版:
"时尚电商网站,给 25-35 岁的年轻人用,主要在通勤时用手机浏览。他们会快速对比多个商品再下单。
做一个商品页面,包括:可滑动的图片、商品名、价格、描述、尺码颜色选择、加购按钮。
顶部只要返回键和购物车图标。干净高级的感觉。"
结果:清晰版一次就做对了。模糊版需要再改 1-2 轮。
测试 2:产品表面的影响
模糊版:"做个用户资料页。"
清晰版:
"做个用户资料页,显示:头像、昵称、用户名、邮箱、简介、注册时间、活动统计(帖子数、评论数、粉丝数)、最近活动列表(带时间戳)、编辑和设置按钮。"
测试 3:约束条件的影响
基础版:
"做个客服工单仪表盘。显示:待处理工单、响应时间、客服表现、最近活动。"
详细版:
"做个客服工单仪表盘。显示:待处理工单、响应时间、客服表现、最近活动。
移动优先(主管在现场时用手机看)。
浅色主题,高对比度。
配色:红色表示紧急(超过 24 小时),黄色中等,绿色正常。
最多 3 列布局。要有加载状态。"
关键区别:基础版只是"能在手机上看"(桌面布局缩小),详细版是真正的"移动优先"。
后续迭代
生成之后,你有两种改进方式:
1. 继续写提示词
适合功能性改动,比如加功能、改结构
2. 设计模式
点击 Design Mode,直接选中元素调整。适合快速改颜色、间距、字体这些视觉细节
记住:逻辑和结构用提示词,视觉调整用设计模式。
最后给你一个完整的例子:
做一个客服仪表盘,显示:
- 待处理工单数量
- 平均响应时间
- 按优先级分类的工单(高/中/低)
- 客服表现列表(显示当前工作量)
- 最近工单活动流
给客服主管用(管理 5-10 个客服),在巡场时用手机看,为了防止客服过载,保证响应时间达标。
每 30 分钟检查一次,识别负载过重的客服并重新分配工作。
约束:
- 移动优先,浅色主题,高对比度
- 按优先级配色:红色紧急,黄色中等,绿色正常
- 显示客服状态标识(忙碌/空闲)
- 手机上最多 2 列
写在最后
好的提示词 = 更好的结果 + 更快的速度。
下次用 v0 时,试着多写一点。说清楚给谁用的,为什么需要它,怎么用。
--
原文地址见评论区 如何写好 v0 的提示词,应该也适用于lovable等其他AI编程工具
核心框架:三个关键输入
经过大量测试,v0团队发现最好的提示词都包含三个部分:
1. 产品表面(Product Surface)
具体要做什么
2. 使用场景(Context of Use)
谁在什么时候用,要解决什么问题
3. 约束条件(Constraints & Taste)
怎么做,有什么限制
模板长这样:
做一个 [具体的组件、数据、功能]。
给 [什么人] 用,
在 [什么场景] 下,
为了 [达成什么目标]。
约束:
- 平台/设备
- 视觉风格
- 布局要求
第一部分:产品表面
别说"做个仪表盘",说清楚仪表盘里有什么。
比如:
仪表盘显示:
- 前 5 名销售员的姓名和业绩
- 团队业绩 vs 目标的进度条
- 销售漏斗(线索 → 合格 → 演示 → 成交)
- 最近 6 个月的业绩趋势图
你越具体,v0 就越不会瞎猜,也不会做一堆你用不上的功能。
第二部分:使用场景
这是最容易被忽略,但影响最大的部分。
想想这几个问题:
- 谁在用?
- 什么时候用?
- 要做什么决策?
- 有多少时间?
还是刚才那个仪表盘的例子:
销售经理(不懂技术)在早会时用,
在办公室的大显示器上看,
快速找出表现不好的人,顺便表扬一下做得好的。
看出区别了吗?
同样是仪表盘,给销售经理早会用,和给数据分析师深度分析用,设计完全不同。
前者要一眼看出重点,后者需要详细的筛选和下钻功能。
Vercel 团队做了个对比测试:
没写使用场景的版本:
- 搜索功能是假的(只有个框)
- 购物车点不了
- 手机上看一团糟
写了使用场景的版本:
- 搜索和购物车都能用
- 完美适配手机
- 还自动加了快速预览和分类筛选
虽然多花了 26 秒生成,但省掉了后续 1-2 轮修改。算下来反而更快。
第三部分:约束条件
包括:
- 风格偏好
- 设备假设
- 布局期望
- 配色方案
- 响应式要求
比如:
专业但亲切的感觉。
用卡片式布局,层次清晰。
配色:绿色表示正常,黄色预警,红色告急。
主要在大屏幕上用。
要有真实 SaaS 产品的感觉。
v0 的默认设置已经不错了,但具体的约束能让它变得更好,而且代码更简洁。
实测对比
Vercel 团队做了三组对比测试,每组只改变一个变量。
测试 1:使用场景的影响
模糊版:
"做个电商网站,要有商品列表、筛选和购物功能。"
清晰版:
"时尚电商网站,给 25-35 岁的年轻人用,主要在通勤时用手机浏览。他们会快速对比多个商品再下单。
做一个商品页面,包括:可滑动的图片、商品名、价格、描述、尺码颜色选择、加购按钮。
顶部只要返回键和购物车图标。干净高级的感觉。"
结果:清晰版一次就做对了。模糊版需要再改 1-2 轮。
测试 2:产品表面的影响
模糊版:"做个用户资料页。"
清晰版:
"做个用户资料页,显示:头像、昵称、用户名、邮箱、简介、注册时间、活动统计(帖子数、评论数、粉丝数)、最近活动列表(带时间戳)、编辑和设置按钮。"
测试 3:约束条件的影响
基础版:
"做个客服工单仪表盘。显示:待处理工单、响应时间、客服表现、最近活动。"
详细版:
"做个客服工单仪表盘。显示:待处理工单、响应时间、客服表现、最近活动。
移动优先(主管在现场时用手机看)。
浅色主题,高对比度。
配色:红色表示紧急(超过 24 小时),黄色中等,绿色正常。
最多 3 列布局。要有加载状态。"
关键区别:基础版只是"能在手机上看"(桌面布局缩小),详细版是真正的"移动优先"。
后续迭代
生成之后,你有两种改进方式:
1. 继续写提示词
适合功能性改动,比如加功能、改结构
2. 设计模式
点击 Design Mode,直接选中元素调整。适合快速改颜色、间距、字体这些视觉细节
记住:逻辑和结构用提示词,视觉调整用设计模式。
最后给你一个完整的例子:
做一个客服仪表盘,显示:
- 待处理工单数量
- 平均响应时间
- 按优先级分类的工单(高/中/低)
- 客服表现列表(显示当前工作量)
- 最近工单活动流
给客服主管用(管理 5-10 个客服),在巡场时用手机看,为了防止客服过载,保证响应时间达标。
每 30 分钟检查一次,识别负载过重的客服并重新分配工作。
约束:
- 移动优先,浅色主题,高对比度
- 按优先级配色:红色紧急,黄色中等,绿色正常
- 显示客服状态标识(忙碌/空闲)
- 手机上最多 2 列
写在最后
好的提示词 = 更好的结果 + 更快的速度。
下次用 v0 时,试着多写一点。说清楚给谁用的,为什么需要它,怎么用。
--
原文地址见评论区](/_next/image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F1960882043249942533%2Fh4J39ERy_400x400.jpg&w=3840&q=75)
原文 https://t.co/vMMq7nLaJK


ceo @replit. civilizationist


🧠在家居士 | 🥦素食者 | 🏃🏻马拉松爱好者 | 💰省钱小能手 | 搭🪜技术资深学者 | 👨💻科技宅 | 🆕更新狂 | 🆅 六边型战五渣


喜欢摇滚乐、爱钓鱼的PM 网站:https://t.co/vnUpLt752o
