docs: update stage naming and enhance content presentation
- Rename "Stage 0" to "新手入门" for better clarity - Improve stage introduction layout with styled cards and tags - Add visual step progress bars in guide sections - Enhance terminology sections with card components and navigation - Update appendix sections with better organization and styling
This commit is contained in:
sanbuphy
@@ -20,21 +20,131 @@ AI coding的出现正在改写传统编程学习的规则。你不再需要花
|
||||
|
||||
## 三个阶段的成长路径：从“会用 AI”到“会做 AI 产品”
|
||||
|
||||
::: info 🎮 第零阶段：体验 AI 编程的魔力
|
||||
通过贪吃蛇等小游戏，你将第一次**体验到 AI 辅助编程的能力与边界**。这个阶段**不需要任何编程基础**，只需要你愿意动手尝试——看着 AI 在几分钟内帮你生成一个可玩的游戏，你会直观感受到 **vibecoding 的强大**。
|
||||
:::
|
||||
<div class="stage-intro">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🎮</div>
|
||||
<h3>新手入门</h3>
|
||||
<p class="stage-role">体验 AI 编程</p>
|
||||
<div class="stage-tags">
|
||||
<span>贪吃蛇小游戏</span>
|
||||
<span>零基础上手</span>
|
||||
<span>Vibecoding 初体验</span>
|
||||
<span>几分钟生成</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
::: tip 🛠️ 第一阶段：掌握产品开发的完整闭环
|
||||
学会使用 **AI IDE（如 Cursor、Claude 等工具）**将想法转化为可运行的 Web 应用原型。你将学习如何**拆解需求、设计多页面应用、接入 AI 能力**（文本生成、图像处理等），并用模拟数据完成一个完整的产品 demo。这个阶段结束时，你能**独立完成一个像“霍格沃茨画像”那样接入 AI 能力的前端应用**。
|
||||
:::
|
||||
<div class="stage-grid">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🛠️</div>
|
||||
<h3>第一阶段</h3>
|
||||
<p class="stage-role">产品经理 / 运营</p>
|
||||
<div class="stage-tags">
|
||||
<span>AI IDE (Cursor/Claude)</span>
|
||||
<span>需求拆解 & 原型</span>
|
||||
<span>接入 AI 能力</span>
|
||||
<span>完整 Demo 开发</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">💻</div>
|
||||
<h3>第二阶段</h3>
|
||||
<p class="stage-role">初中级开发 / 独立开发者</p>
|
||||
<div class="stage-tags">
|
||||
<span>Figma 到代码</span>
|
||||
<span>Supabase 数据库</span>
|
||||
<span>Stripe 支付集成</span>
|
||||
<span>Dify 知识库</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🚀</div>
|
||||
<h3>第三阶段</h3>
|
||||
<p class="stage-role">高级开发 / 架构师</p>
|
||||
<div class="stage-tags">
|
||||
<span>Web/小程序/多端</span>
|
||||
<span>MCP 高级工具</span>
|
||||
<span>RAG & LangGraph</span>
|
||||
<span>高级工程师思维</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
::: warning 💻 第二阶段：成为能上线产品的工程师
|
||||
这是质的飞跃。你将学习**现代 Web 开发的核心技能**：从 **Figma 设计稿**到组件化前端实现，从 **Supabase 数据库**到 API 接口开发，从 Git 版本管理到 **Zeabur 部署上线**。更重要的是，你将学会**集成支付系统（如 Stripe）**，让你的应用具备真实的商业价值。通过 **Dify** 等工具，你还将掌握知识库与工作流的构建，为应用注入更强的 AI 能力。
|
||||
:::
|
||||
<style>
|
||||
.stage-intro {
|
||||
margin: 20px auto;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
::: danger 🚀 第三阶段：构建跨平台的复杂应用
|
||||
掌握**多平台开发能力**，将同一个应用部署到 Web、微信小程序、安卓等多个平台。学习 **MCP 等高级工具**扩展 IDE 能力，深入理解 **RAG 原理**并使用 **LangGraph** 等框架设计复杂的 AI 工作流。这个阶段你将具备**高级工程师的思维方式和工具链**。
|
||||
:::
|
||||
.stage-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.stage-card {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stage-card:hover {
|
||||
transform: translateY(-2px);
|
||||
background-color: var(--vp-c-bg-mute);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stage-card h3 {
|
||||
margin: 0 0 4px 0 !important;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stage-role {
|
||||
margin: 0 0 8px 0 !important;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stage-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stage-tags span {
|
||||
font-size: 0.7rem;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-2);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.stage-card:hover .stage-tags span {
|
||||
background-color: var(--vp-c-bg);
|
||||
border-color: var(--vp-c-brand-dimm);
|
||||
color: var(--vp-c-brand-dark);
|
||||
}
|
||||
</style>
|
||||
|
||||
## 你将获得的核心能力
|
||||
|
||||
|
||||
@@ -40,7 +40,45 @@
|
||||
|
||||
AI 出现之后,第一次给了普通人一个全新的可能：你不需要会写代码,只需要学会对 AI 说清楚你想要什么。来自 GitHub Copilot 的[数据显示](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics),超过1500万开发者正在用AI辅助编程,平均46%的代码都是AI生成的! 在Java项目中这个比例能达到61%。
|
||||
|
||||
让人真正兴奋的是效率的飞跃：开发者完成任务的速度提升了 55%。原本需要 9.6 天才能提交的代码，现在只要 2.4 天就能搞定。 这种肉眼可见的效率提升，说明 AI 不再只是一个“可选工具”，而是正在成为开发流程中不可或缺的编程助手。采用率的数据也印证了这一点：在获得访问权限的当天，就有 81% 的开发者第一时间完成安装并开始使用；其中 96% 的人更是在当天就开始采纳 AI 提供的代码建议。换句话说，开发者几乎是立刻把 AI 融入了日常编码工作。
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">🚀</span>
|
||||
<span style="font-weight: bold; font-size: 16px;">效率与采用率的飞跃</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="20" style="margin-bottom: 24px;">
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #409EFF; font-size: 24px; font-weight: bold;">55%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">速度提升</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #67C23A; font-size: 24px; font-weight: bold;">2.4 <span style="font-size: 14px;">天</span></div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">任务耗时 (原9.6天)</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #E6A23C; font-size: 24px; font-weight: bold;">81%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">首日安装率</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #F56C6C; font-size: 24px; font-weight: bold;">96%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">建议采纳率</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div style="line-height: 1.8; color: #606266;">
|
||||
让人真正兴奋的是效率的飞跃：开发者完成任务的速度提升了 <b>55%</b>。原本需要 9.6 天才能提交的代码，现在只要 <b>2.4 天</b>就能搞定。 这种肉眼可见的效率提升，说明 AI 不再只是一个“可选工具”，而是正在成为开发流程中不可或缺的编程助手。采用率的数据也印证了这一点：在获得访问权限的当天，就有 <b>81%</b> 的开发者第一时间完成安装并开始使用；其中 <b>96%</b> 的人更是在当天就开始采纳 AI 提供的代码建议。换句话说，开发者几乎是立刻把 AI 融入了日常编码工作。
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
对于普通人来说,这个趋势更有意义:如果专业程序员都在大量依赖AI写代码,那我们这些**不会编程的人,为什么不能直接跟AI对话来实现自己的想法呢**?
|
||||
|
||||
|
||||
Reference in New Issue
Block a user