Files
test-repo/docs/en-us/index.md
T

7.4 KiB
Raw Blame History

layout, hero, features
layout hero features
home
name text tagline actions
Easy-Vibe Learn Vibe Coding from 0 to 1
Become a super individual combining product, design, and full-stack development.
From idea to prototype, from prototype to production, turn every output into a deliverable product.
Make AI your partner
faster, more stable, more creative.
Build your personal technology and product moat with a systematic learning path.
theme text link
brand Start Learning /stage-0/0.1-learning-map/
theme text link
alt Star on GitHub https://github.com/datawhalechina/easy-vibe
title details
Beginner-Friendly Designed for non-technical backgrounds. Start with "if you can speak, you can code", quickly get started through games like Snake, and overcome technical fear.
title details
Progressive Practical Path Unique "three-stage" learning method. From AI product manager thinking, to full-stack development implementation, to complex application construction, step by step.
title details
Vibe Coding New Paradigm Master the core of AI era programming. Learn to pair-program with AI, making your IDE your strongest partner.
title details
Real Project-Driven No toy code. Build web prototypes, full-stack applications, WeChat mini-programs with your own hands, and truly land every idea as a product.

Why Choose Easy-Vibe?

2025 is the first year of AI programming. More and more people are trying AI programming, but often stop at simple demos.
Easy-Vibe is dedicated to filling this gap, teaching you how to organize the development process with AI like a professional, from prototype to production, bridging the last mile of product landing.

<script setup> import { useData } from 'vitepress' const { site } = useData() const base = site.value.base </script>
🎨

Stage 1: AI Product Manager

Suitable for product, operations, and non-technical backgrounds. Build confidence through games, master Vibe Coding workflow, and independently complete high-fidelity web application prototypes.

Learn More →
💻

Stage 2: Full-Stack Development

Dive deep into full-stack development. Frontend componentization, database design, backend API development, and deployment.

Learn More →
🚀

Stage 3: Advanced Development

Build complex cross-platform applications. WeChat mini-program practice, challenge higher-level AI-native application development.

Learn More →
<style> /* LOGO 容器:负责上下浮动动画 */ .VPHomeHero .image { animation: float 6s ease-in-out infinite; } @media (min-width: 960px) { /* 给 LOGO 容器设置不可侵犯的左侧边界 */ .VPHomeHero .image { margin-left: 80px !important; flex-shrink: 0; /* 保证图片不被挤压 */ } .VPHomeHero .tagline { max-width: 450px; white-space: pre-wrap; } } .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

Find this helpful?

Your Star motivates us to keep updating 🚀

<style> .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; } .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>