LogoVibe Product
Github
为所有的产品创造精彩

学习使用 vibe coding 快速搭建产品原型

Vibe Dashboard
VibeTools
VP
Vibe Pro
Admin

Dashboard

Projects
12
+4% ↑
Tasks
16
+5% →
Team
20
+6% ↑
Budget
24
+7% →

Project Progress

Website Redesign
20%
5 days left
Mobile App Development
40%
4 days left
Marketing Campaign
60%
3 days left
Data Analysis
80%
2 days left

Recent Activity

A
Alex completed task Homepage Design
2h ago
S
Sara commented on Mobile App Wireframes
3h ago
T
Tom updated Project Timeline
5h ago
L
Lisa created New Marketing Plan
6h ago
9:41
Team Vibe
5 members • 3 online
Today
Alex added Sarah to the group
A
Hey team! I just pushed the new UI components to our repository.
9:30 AM
S
Great work! The new components look really clean.
9:32 AM
D
I'm having some issues with the responsive design. Could you help me later?
9:34 AM
Sure David, I can help you with that. Let's set up a quick call at 2pm?
9:36 AM
D
Perfect, thanks!
9:37 AM
S
I'll join the call too. Also, I've added some new mockups to our Figma project 🎨
9:38 AM
Awesome! Looking forward to seeing them. I think we're making great progress with the project 🚀
9:40 AM
A
Type a message...

Learn to Vibe Code

Master the art of coding with our interactive courses, expert instructors, and hands-on projects.

Join 10,000+ learners
function learnToCode() {
const skills = ['HTML', 'CSS', 'JavaScript'];
let experience = 0;
while (experience < 100) {
skills.forEach(skill => {)
practice(skill);
experience++;
})
}
return 'Vibe Coding Master';
}

Featured Courses

View All
Beginner • 42 Lessons

Web Development Fundamentals

4.9
Intermediate • 28 Lessons

Responsive Design Mastery

4.8
Advanced • 36 Lessons

JavaScript Frameworks

4.7
👨‍💻 500+ Courses
👩‍🏫 50+ Expert Instructors
🌎 Students from 120+ Countries
⭐ 4.8 Average Rating

编程有了"氛围感"

Andrej Karpathy@karpathy · Feb 3
我称这类全新的编程方式为「vibe coding」，就是完全跟着感觉走，放飞自我，指数式爆改，甚至忘了自己在写代码。 这之所以可能，是因为现在的 LLM（比如搭配 Claude Sonnet 的 Cursor Composer）已经太强了。 我现在几乎不碰键盘，直接用 SuperWhisper 跟 Composer 说话。 我会提出一些懒得动手的请求，比如「把侧边栏的 padding 减半」这种蠢萌的指令。 我总是直接点「全部接受」，连 diff 都不看。报错了我就复制粘贴进去，也不解释，通常它就能修好。 代码常常长得比我能轻松理解的规模还大，我得认真读一会儿才行。 有时候 AI 修不了 bug，我就绕过去，或者随便试点别的改动，bug 也就神奇地消失了。 用在周末做着玩的 side project 还挺行的，说它是「写代码」其实不太准确，更像是「看见什么说什么，跑一下再贴一下」，但它真的，大多数时候，都能跑。
1.3K 回复
4.9K 转发
29K 喜欢
4.9M 浏览

也就少了"距离感"

  • 在传统的软件开发流程中，从想法到产品之间，总有一段距离。

  • 过去，如果你不会写代码、不会设计交互、不会找人协作，你很难把一个 idea 实现为产品。许多优秀的想法，因为缺少实现能力，只能停留在一纸文档或 PPT 中。

  • 而在 AI 编程出现后，这段距离被压缩为「对话」的长度。你可以直接向 AI 描述你的想法，让它帮你实现。

  • 我们正在进入一个「想什么就做什么」的时代：你不需要知道"padding 是什么"，只要你能描述出"我想让这个边变窄一点"，在大多数情况下，AI 都能帮你做到。

点击「发送」按钮尝试生成

生成的应用将在此处显示

帮我设计一个社交媒体App界面

claude-3.7-sonnet

选对工具一切都很简单

市面上有很多 AI 编程工具，根据你的需求选一个最适合你的

开发场景

AI IDE

AI IDE 在传统编程专用的 IDE 基础上，添加了如 AI 代码补全和 Agent 模式等 AI 功能，功能更丰富、更复杂、更完整，可以与代码编写流程无缝融合，实现 AI 和人工之间的平衡协作

推荐产品

cursor
cursor
Windsurf
Windsurf

了解你的搭档

市面上的模型五花八门，选择起来让人犯难
不过只要了解每个模型的特点和适用场景，就能帮你高效地完成任务

通用模型
能力全面；速度与质量平衡；适合大多数通用编程任务

适用场景:

代码解释、代码补全、代码生成、代码重构与优化等

推理模型
专注于逻辑推理、复杂问题求解和多步思考；速度较慢，质量较高

适用场景:

复杂算法设计、复杂问题解决、调试与错误定位等

轻量模型
参数量小；速度极快，质量一般。适用于极为简单的任务

适用场景:

代码补全、简单指令理解问答

多模态模型
能够处理图像等多模态数据

适用场景:

界面到代码生成

Claude
Claude 3.7 Sonnet
通用模型
全能型模型，代码能力出色，速度与质量平衡
Claude
Claude 3.7 Sonnet Thinking
推理模型
专注于复杂推理任务，提供详细思考过程

沟通是一门艺术

提示词（prompt）是你与模型之间重要的“接口”。掌握一些通用原则，并结合各类模型的差异，把「我想让边距再窄一点」这种朦胧的想法变成精确、可复现的指令。

通用五步法

步骤关键做法Why it matters
1. 角色设定用一句话告诉模型它是谁、它要做什么。例：`You are an expert UI designer…`Claude 和 GPT 都会优先遵循 system 角色
2. 明确目标指出最终产物格式（文本 / JSON / 代码片段）。例：`Return Figma-like JSON representing the UI.`减少模型"发挥"
3. 上下文输入给足背景：产品定位、用户画像、已知约束。长上下文对 Claude / GPT 效果显著
4. 分步思考要求模型「逐步思考，再给结论」。例：`Think step-by-step, then output final answer only.`推理模型尤为受益
5. 迭代 & 反馈如果结果不理想：指出问题 → 添加示例 → 缩小范围。Prompt 设计是循环而非一次成型

针对不同模型类型的沟通策略

通用模型
GPT-4oClaude SonnetDeepSeek V3

在对话开头统一设定角色

在一个 prompt 里同时给目标 + 约束 + 示例

注意事项： 追求响应速度时，可删减示例数量。
推理模型
Claude Sonnet ThinkingGPT o3DeepSeek R1Gemini 2.5 Pro

提示语更加简洁，不要过分设计，只需要明确任务目标和需求，为推理模型预留发挥空间，限制太多反而影响其输出质量

注意事项： 这类模型慢，但擅长长链逻辑；给足推理空间。
多模态模型
GPT-4oGemini

上传 UI 参考图和界面草稿等，并要求模型"参考图片设计和布局"

注意事项： 避免在同一轮里上传多张图片；分批更稳。

快速模板（复制即可用）

SYSTEM: You are a senior product engineer.
USER: Our goal ► Build a minimal "habit tracker" mobile UI.
Constraints ► Dark theme, ‎iOS-style padding, Chinese copy.
Deliverable ► Figma-like JSON.
Process ► Think step-by-step, output final JSON only.

一个产品原型，就这么简单！

从创意到实现，只需一个精确的描述。探索下方示例，感受AI如何快速生成产品原型。

YouTube

如何使用AI快速构建产品原型

Vibe产品 • 3.2万次观看 • 2小时前

4:25

AI产品设计工具流：从想法到实现

Vibe产品

2.1万次观看 • 3天前

4:25

使用Claude 3.7构建完整Web应用

Vibe产品

1.5万次观看 • 1周前

4:25

产品原型设计最佳实践分享

Vibe产品

4.7万次观看 • 2周前

首页
探索
订阅
历史
收藏
Claude 3.7 Sonnet

视频流媒体

YouTube风格的视频平台，支持视频推荐、订阅频道和评论互动

提示词：

我想要开发一个YouTube风格的视频流媒体app，将其输出为一个高保真的原型图设计，请根据以下规范完成：
1. 产品设计：分析产品的主要功能和需求，确定核心功能
2. UI 设计：保证设计符合目标人群的喜好和使用习惯、符合移动端的设计规范，使用现代的 UI 元素，注重产品体验和视觉
3. mock...
Claude 3.7 Sonnet