layout
hero
features
home
name
text
tagline
actions
Easy-Vibe
Learn Vibe Coding from 0 to 1
不止是写代码，而是成为集产品、设计、全栈开发于一身的超级个体。
从想法到原型，从原型到上线，把每一次输出变成可交付的产品。
让 AI 成为你的搭档：更快、更稳、更有创造力。
用系统化的学习路径，构建你的个人技术与产品护城河。
theme
text
link
brand
开启学习之旅
/stage-0/0.1-learning-map/
title
details
零基础友好
专为非技术背景设计。从“会说话就会编程”开始，通过贪吃蛇等小游戏快速上手，打破技术恐惧。
title
details
循序渐进的实战路径
独创“三阶段”学习法。从 AI 产品经理思维，到全栈开发落地，再到复杂应用构建，步步为营。
title
details
Vibe Coding 新范式
掌握 AI 时代的编程核心。学会与 AI 结对编程，让 IDE 成为你的最强搭档。
title
details
真实项目驱动
拒绝玩具代码。亲手构建 Web 原型、全栈应用、微信小程序，将每一个想法真正落地为产品。
为什么选择 Easy-Vibe？
2025 年是 AI 编程的元年。越来越多的人开始尝试 AI 编程，但往往止步于简单的 Demo。
🌱
Stage 0: 纯新手
适合产品、运营及非技术背景。通过做游戏理解 AI 编程逻辑，建立信心。
查看详情 →
🎨
Stage 1: AI 产品经理
掌握 Vibe Coding 工作流。学会拆解需求，独立完成高保真 Web 应用原型。
查看详情 →
💻
Stage 2: 初中级开发
深入全栈开发。前端组件化、数据库设计、后端 API 开发与部署上线。
查看详情 →
🚀
Stage 3: 高级开发
构建复杂跨平台应用。微信小程序实战，挑战更高阶的 AI 原生应用开发。
查看详情 →
<style>
.VPHomeHero .text {
font-size: 1.8rem;
}
.stage-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
max-width: 1152px;
margin: 0 auto;
padding: 20px;
}
.stage-card:nth-child(1) { --card-color: #10b981; } /* Green for Stage 0 */
.stage-card:nth-child(2) { --card-color: #3b82f6; } /* Blue for Stage 1 */
.stage-card:nth-child(3) { --card-color: #8b5cf6; } /* Purple for Stage 2 */
.stage-card:nth-child(4) { --card-color: #f59e0b; } /* Orange for Stage 3 */
.stage-card {
background-color: var(--vp-c-bg-soft);
border-radius: 12px;
padding: 24px;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
border: 1px solid var(--vp-c-bg-soft);
position: relative;
overflow: hidden;
}
.stage-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: var(--card-color);
opacity: 0.5;
transition: opacity 0.2s;
}
.stage-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-color: var(--card-color);
}
.stage-card:hover::before {
opacity: 1;
}
.stage-icon {
font-size: 3rem;
margin-bottom: 16px;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}
.stage-card h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 8px;
color: var(--vp-c-text-1);
transition: color 0.2s;
}
.stage-card:hover h3 {
color: var(--card-color);
}
.stage-card p {
font-size: 0.9rem;
color: var(--vp-c-text-2);
margin-bottom: 16px;
line-height: 1.5;
}
.stage-card a {
color: var(--card-color);
font-weight: 500;
text-decoration: none;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
transition: transform 0.2s;
}
.stage-card a:hover {
text-decoration: none;
transform: translateX(4px);
}
</style>
Made with ❤️ by Open Source Contributors
觉得有帮助？
你的 Star 是我们持续更新的动力 🚀
<style>
/* ... existing styles ... */
.footer-cta {
margin-top: 100px;
padding: 40px 24px;
text-align: center;
background: var(--vp-c-bg-soft);
border-radius: 24px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
border: 1px solid var(--vp-c-bg-soft);
transition: border-color 0.3s;
}
.footer-cta:hover {
border-color: var(--vp-c-brand);
}
.love-text {
color: var(--vp-c-text-3);
font-size: 0.875rem;
margin-bottom: 24px;
font-family: var(--vp-font-family-mono);
}
.support-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 8px;
color: var(--vp-c-text-1);
}
.support-text {
font-size: 1.1rem;
color: var(--vp-c-text-2);
margin-bottom: 24px;
}
.github-badge {
display: flex;
justify-content: center;
align-items: center;
}
.github-badge img {
height: 32px; /* Make the button slightly larger */
}
/* Custom style for the GitHub Star button in Hero section */
.VPButton.alt[href*="github.com"] {
background: linear-gradient(90deg, #8B5CF6, #EC4899, #8B5CF6);
background-size: 200% auto;
border: 1px solid transparent !important;
color: white !important;
font-weight: 600;
animation: gradient 3s linear infinite;
box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.5);
transition: all 0.3s ease;
}
.VPButton.alt[href*="github.com"]:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
background-position: right center;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
</style>
sanbuphy
d35cfb3402