十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

easy-vibe Stage 3 进阶开发全景指南:从 Claude Code 核心技能到跨平台原生应用实战

easy-vibe Stage 3 进阶开发全景指南:从 Claude Code 核心技能到跨平台原生应用实战 easy-vibe Stage 3 进阶开发全景指南从 Claude Code 核心技能到跨平台原生应用实战【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本文是 easy-vibeAI 原生产品开发者第一课进阶阶段Stage 3的技术导览。它完整梳理了本阶段四大学习板块——Claude Code 核心技能、跨平台开发、个人品牌建设与 AI 高级能力——的模块地图、学习定位与实战要点并辅以仓库源码级实现证据帮助你建立从工具精通到产品落地的完整进阶路径。读完本文你将掌握 Stage 3 各模块之间的依赖关系、每个模块解决的核心问题以及如何在 docs/fr-fr/stage-3/index.md 的指引下高效安排自己的学习节奏。一、Stage 3 在 easy-vibe 课程体系中的定位easy-vibe 的课程体系将 AI 原生开发者的成长划分为多个阶段Stage 1 侧重产品思维与原型构建Stage 2 覆盖前端、后端与 AI 能力的系统开发而Stage 3「Développement avancé」进阶开发则要求你从能写应用跃迁到能驾驭复杂应用。用原文档的话说这一阶段的核心任务有三个构建复杂的跨平台应用Multi Programmes WeChat、Android、iOS、桌面端等在实践中掌握微信小程序的完整开发探索AI 原生应用的进阶开发MCP、Agent 团队协作、RAG 工作流编排等。整个阶段被组织为四个板块核心技能Compétences fondamentales、跨平台开发Développement multiplateforme、个人品牌Marque personnelle与 AI 能力附录Annexe des capacités IA共 22 个可独立学习又彼此衔接的模块。1.1 目标读者À qui sadresse cette étape原文档明确给出了四类目标人群你可以据此自测是否具备进入本阶段的条件有全栈开发经验、希望挑战更复杂应用的高级开发者希望系统掌握跨平台开发技术的工程师希望深入理解 AI 原生应用开发的探索者希望建立个人技术品牌的技术博主。1.2 前置条件Prérequis进入 Stage 3 之前你需要满足以下条件已完成「初中级开发」阶段即 easy-vibe 的 Stage 2或具备等效的全栈开发经验熟悉前端框架如 React/Vue与后端开发理解 AI 基础概念并能调用 API。如果前置条件尚未满足建议先回到 docs/fr-fr/stage-2/index.md 补齐基础再进入本阶段。二、核心技能板块让 AI 编码工具真正职业化核心技能板块共 8 个模块围绕Claude Code 与 MCP 生态展开解决的核心问题是如何把 AI 从能写代码的助手升级为遵循工程纪律的团队成员。原文档在 docs/fr-fr/stage-3/core-skills/ 目录下完整存放了这些模块建议按下列顺序学习。2.1 Claude Code 快速上手basics这是整个板块的起点模块docs/fr-fr/stage-3/core-skills/basics/index.md目标是让你快速掌握 Claude Code 的安装、配置、基础操作与实用技巧。文档包含的核心要素有安装方式手动执行npm install -g anthropic-ai/claude-code后以claude --version验证或者直接让已有的 AI 编码 Agent如 Cursor、Windsurf替你检测环境、处理依赖冲突并完成安装首次启动初始化进入项目目录运行claude随后完成 Anthropic 账户登录、套餐选择免费版适合个人轻量学习Pro 版配额更高、响应优先、条款确认与可选的自定义 API Key 配置三项入门实验对话感受自然语言理解 → 生成 Markdown 文档体验内容创作 → 编写并运行贪吃蛇小游戏走通需求→编码→运行→纠错的端到端闭环11 项核心技巧包括双击 Esc 回退对话状态、引用文件支持src/utils.ts:45-60行级引用与 Tab 补全、!执行终端命令、/plan任务规划、/init生成 CLAUDE.md、/compact压缩上下文、ShiftTab自动接受、CtrlC紧急中断、/context查看 token 消耗、/resume恢复会话等配置体系.claude/settings.local.json个人、不入库→.claude/settings.json团队共享、入库→~/.claude/settings.json全局默认的三层优先级合并规则CLAUDE.md作为项目记忆的模板规范.claudeignore通过忽略 node_modules、构建产物、日志与二进制文件来节省 40%60% 的 token 消耗以及基于allow / ask / deny三段式结构的权限规则配置。其中值得特别说明的是CLAUDE.md 的工程价值每次启动 Claude Code 时它都会读取该文件从而免去反复解释技术栈、编码规范与常用命令的沟通成本。在本仓库中AGENTS.md 就扮演了类似的项目说明书角色是观察这种约定如何落地的直接样本。2.2 MCP 与 Claude Code 完全指南mcpMCPModel Context Protocol是 Claude Code 连接外部工具与服务的协议它把只能读写本地文件的 AI 升级为能访问 GitHub、数据库、API 与云服务的超级助手docs/fr-fr/stage-3/core-skills/mcp/index.md。该模块的核心内容如下两种配置文件层级层级配置文件路径作用域用户级~/.claude.json所有项目项目级.claude/mcp.json当前项目原文档明确推荐优先使用项目级配置因为它可以被提交进 Git 供团队共享、允许不同项目使用不同 MCP 服务、且不污染全局设置。三种传输模式transportSTDIO本地进程通过commandargs启动本地进程例如npx -y modelcontextprotocol/server-filesystemHTTP远程服务通过urltransport: http连接可附加headers如Authorization: Bearer votre-tokenSSE服务端事件流通过urltransport: sse订阅服务端推送。实操示例与最佳实践文档给出了 GitHub 工作流自动化创建分支→提交→推送→调github_create_pull_request建 PR、SQLite 数据查询SELECT * FROM users ORDER BY created_at DESC LIMIT 10、Puppeteer 页面截图分析、Notion 笔记同步四个实战场景调试方面支持自然语言诊断与/doctor命令输出结构化诊断报告。四条最佳实践值得牢记优先项目级配置、敏感信息用环境变量而非硬编码、用版本号锁定 MCP 服务器版本如server-github1.2.3防止npx -y拉取破坏性更新、在.claude/README.md中记录各服务器的用途与凭据获取方式。仓库佐证本仓库的 config/mcporter.json 是一份真实的 MCP 客户端配置示例与文档中mcpServers的 JSON 结构相互印证可作为对照参考。2.3 Skills 完全指南skillsSkills 把专业知识、工作流与最佳实践打包成可复用的技能书让 Claude 在执行特定任务时直接按预设标准工作而不必每次重新解释需求docs/fr-fr/stage-3/core-skills/skills/index.md。模块给出了完整的入门路径先安装find-skillsnpx skills add vercel-labs/skillsfind-skills -g -y作为 AI Agent 世界的技能应用商店搜索引擎再通过npx skills add remotion-dev/skills -g安装第一个实际技能Remotion 视频创作框架随后即可用自然语言指挥 Claude 编写 1920×1080、带飞入动画与旋转缩放效果的 React 视频代码。模块还解释了 Skills 解决的核心痛点重复指令、知识无法积累、标准不统一、效率低下——它让 Claude 从每次从零教起的新人变成熟悉团队约定与最佳实践的老成员。2.4 长时间任务执行long-running-tasks这一模块回答一个尖锐问题如何让 AI 像真正的开发者一样持续工作到任务真正完成docs/fr-fr/stage-3/core-skills/long-running-tasks/index.md。核心原理在于LLM 对是否完成的判断并不可靠因此需要一个外部系统把 AI 关在循环里反复校验三个问题——是否真正完成是否符合客观标准是否还有遗漏文档给出了层层递进的三种实现方式最原始的 while true Bash 循环Ralph Wiggum 脚本只有 5 行#!/bin/bash while true; do cat PROMPT.md | claude done带迭代上限的安全版本通过MAX_ITERATIONS变量防止无限循环浪费 API 调用更复杂的任务编排系统文档后续章节展开。同时强调配套纪律任务描述应写入PROMPT.md并包含明确的客观完成标准如所有测试通过、覆盖率 80%、文档已更新时输出 task complete只有这样才能让外部循环准确判断终止时机。2.5 Agent 团队完全指南agent-teamsAgent Teams 让多个独立 AI 实例像真实开发团队一样协作docs/fr-fr/stage-3/core-skills/agent-teams/index.md。模块先用一张对比表澄清了它和 Subagent 的本质区别维度SubagentAgent Teams拓扑星型所有子代理向主代理汇报网状成员之间可直接通信通信主代理下发提示、子代理返回结果成员直接讨论与协调上下文每个子代理独立主代理只传必要信息每个成员完全独立的上下文并行可并行但协作链仍以主代理为中心真正的并行开发协作任务协调主代理集中分配成员更自主地认领任务模块通过经理给助理发任务卡Subagent与项目经理带领真实团队Agent Teams的类比帮助读者直观理解两者适用场景快速、独立、无需持续讨论的任务用 Subagent跨模块复杂重构、需要多角度讨论如安全专家与性能专家辩论、需要前后端与测试真正并行推进时用 Agent Teams。同时如实指出 Agent Teams 的 token 成本更高因为成员独立运行且通信更频繁。2.6 Superpowers工业级质量开发框架superpowersSuperpowers 是由 Jesse Vincent网名 obra开源的 Agent 技能框架专门解决 AI 编程的玩具级代码问题docs/fr-fr/stage-3/core-skills/superpowers/index.md。它的定位被形象地描述为给聪明实习生配一位资深工程师导师。安装方式# 添加 marketplace 并安装 /plugin marketplace add obra/superpowers-marketplace /plugin install superpowerssuperpowers-marketplace # 或手动 clone git clone https://github.com/obra/superpowers.git ~/.claude/skills/superpowers模块的核心价值在于纪律强化brainstorming技能在需求模糊时主动苏格拉底式提问澄清test-driven-development强制 RED-GREEN-REFACTOR 循环writing-plans将大项目拆解为小任务code-review保证代码质量。文档特别澄清了一个常见误解不显式要求 TDD 时Claude 是否写测试取决于模型自身习惯只有显式提及 TDD 或调用技能名如/test-driven-development时TDD 流程才会被强制激活。2.7 AI 辅助开发工作流最佳实践workflow该模块解决真实开发场景下的核心问题面对数千文件的项目从何下手、如何在陌生代码区新增功能、如何定位无处下手的 bug、如何安全重构docs/fr-fr/stage-3/core-skills/workflow/index.md。它的方法论框架包括三个层次能力边界认知AI 擅长规则清晰、可自动化的任务生成代码结构、秒读千行代码定位、发现语法错误与常见漏洞、批量重命名与格式化但不懂业务逻辑、无法替你权衡技术选型与架构设计、不了解团队特殊约定——因此协作模式应当是你决策、你验收AI 执行与检索分项目类型策略全新项目走规划结构→搭建骨架→逐功能实现三步流存量项目则先建项目知识库、再小步改动项目知识库建设通过 CLAUDE.md、文档与约定沉淀降低多轮沟通成本提升与 AI 协作的效率上限。2.8 基于 GitHub Issues 的端到端迭代开发github-iterative-development这是核心技能板块的收官实战课用一个真实公开仓库演示Spec 驱动开发的完整闭环docs/fr-fr/stage-3/core-skills/github-iterative-development/index.md。起点是一句话需求——我想为 macOS 做一个 CRM 管理导入的联系人最终产出Relationship Compass原生 macOS 应用支持联系人的搜索过滤、关系画像编辑、CSV 导入、互动记录与跟进日期计算。模块给出了规格驱动与纯聊天的对比从聊天直接实现Spec 驱动实现当前对话是唯一依据版本化的 Spec 是基准需求随聊随加先更新 Spec 与任务进度活在 AI 摘要里进度活在 Issues 与 commits 里能跑即完成逐条核对验收标准核心工作流为grill-with-docs → to-spec → to-tickets → implement → code-review并配套了 GitHub 的三个角色定位项目档案Spec、词汇表、架构决策、工作看板Issues、优先级、依赖、完成证明commits、测试、关闭的 Issues。它还给出了可操作的准备命令npx skillslatest add mattpocock/skills -y gh auth status gh repo create relationship-compass-macos --public --source . --remote origin --push并强调公开仓库需使用假数据、真实数据则用--private且要在推送前检查示例、日志与 Git 历史。该模块自带的 7 张截图docs/fr-fr/stage-3/core-skills/github-iterative-development/images/直观展示了最终应用界面与交互过程。三、跨平台开发板块11 个平台的从零到一跨平台板块的目标是构建微信小程序、Android、iOS 应用并实现多端覆盖。原文档列出了 11 个模块docs/fr-fr/stage-3/cross-platform/每个模块在仓库中都有独立的 index.md 教程内容完整可执行模块核心主题主要技术栈/产出choose-platform按用户场景与需求选择最合适的开发平台决策方法论wechat-miniprogram从零开发微信小程序小程序核心开发流wechat-miniprogram-backend带后端支持的完整小程序应用前后端一体化android-app用现代跨平台框架构建 Android 原生应用跨平台框架ios-appiOS 应用开发与发布iOS 生态开发规范pwa-local-app把网页变成可离线、可安装桌面的真应用PWAbrowser-ai-extension一键总结任意网页的浏览器 AI 助手扩展浏览器扩展electron-voice-to-textWindows/macOS/Linux 三端桌面语音识别应用Electronnft-minting10 分钟从零编写并铸造 NFT 智能合约Solidity 合约vscode-extension带多文件问答与自定义快捷键的 VS Code 项目助手VS Code 扩展qt-industrial-hmi水泵监控 HMI 系统掌握工业级桌面应用开发Qt此外仓库实际收录的跨平台教程比导航页列出的还要丰富还包括 flutter-app、react-native-expo、godot-game-development、ai-native-creator 与 app-publishing 等模块覆盖游戏引擎、AI 内容创作与应用上架等更多场景可按需学习。仓库实例佐证本仓库 examples/trae-3d-block-game/ 与 examples/trae-block-game/ 提供了用一段 prompt 从零生成可运行应用的完整样例——每个样例都包含prompt.txt提示词、入口文件与参考图reference.png是理解 AI 原生开发产出形态的直接参考examples/trae-3d-block-game/electron/main.js 还展示了 Electron 桌面封装的具体代码结构可对照 electron-voice-to-text 模块学习。四、个人品牌板块技术影响力从零开始个人品牌板块目前包含一个核心模块docs/fr-fr/stage-3/personal-brand/personal-website-blog/index.md主题是用现代技术栈构建高性能、视觉精致的个人网站与学术博客。这一步的目标是把前面所有阶段产出的项目、经验与思考沉淀为可被他人检索和访问的公开资产建立个人技术影响力。该模块与 easy-vibe 的文档工程实践是呼应的本仓库本身就是一套覆盖多语言zh-cn、zh-tw、en、fr-fr、de-de、es-es、ja-jp、ko-kr、vi-vn、ar-sa的静态站点其站点配置与构建逻辑可从 vercel.json、nginx.conf、Dockerfile 与 docs/DEPLOYMENT.md 中窥见——从站点生成scripts/generate-sitemap.mjs 负责 sitemap 生成到部署方式都是一份真实可参考的个人站点工程范例。五、AI 能力附录RAG 与 LangGraph 工作流编排AI 能力附录板块包含两个进阶模块面向需要构建复杂 AI 应用工作流的开发者docs/fr-fr/stage-3/ai-advanced/rag-introduction深入讲解 RAG检索增强生成的原理及其在 AI 应用中的价值回答什么是 RAG、它如何工作langgraph-advanced-rag使用 LangGraph 编排复杂 AI 工作流构建中级到高级的 RAG 系统。这两个模块与 easy-vibe 整个课程体系一脉相承Stage 2 中已有大量 RAG 的工程实践例如 docs/fr-fr/stage-2/backend/ 目录下的后端模块而附录板块在原理层面把RAG 是什么讲透并用 LangGraph 把多个 AI 步骤如何编排成一条工作流落地——这正对应了本阶段AI 原生应用进阶的学习目标。六、学习路径与实战建议综合原文档的模块编排与各模块的前置关系推荐以下学习顺序先工具后流程从 basics 入手打牢 Claude Code 基础紧接着学习 mcp 扩展工具边界再纪律后规模化用 skills 沉淀可复用技能用 superpowers 强化工程纪律再用 long-running-tasks 让 AI 承担长任务最后通过 agent-teams 实现多实例并行协作实战检验用 workflow 的方法论武装日常开发用 github-iterative-development 在一个真实仓库中走完 Spec→Issues→实现→测试→评审的完整闭环横向拓展按目标平台选择 cross-platform 中的对应教程小程序、Android/iOS、PWA、Electron、VS Code 扩展等用 AI 原生方式产出可发布的产品深度探索通过 RAG 与 LangGraph 模块ai-advanced构建复杂 AI 工作流最终以 personal-brand 模块为出口把成果沉淀为个人技术资产。整条路径遵循 easy-vibe做中学的核心理念每个模块都以可运行的实战产出为目标而本仓库中的 examples 目录与各模块附带的源码、截图和配置正是你边学边对照的最佳素材。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表