「Vibe Coding → Agentic Engineering」演讲概念框架（内部 Skill）。
| Level | 阶段 | 特征 |
|---|---|---|
| L0 | Vibe Coder | 靠直觉和 ChatGPT |
| L1 | Prompt Engineer | 会写好 Prompt |
| L2 | Tool User | 会用 Claude Code、MCP |
| L3 | Agent Builder | 能设计 Agent 工作流 |
| L4 | Agentic Engineer | 系统化、可测试、可扩展 |
---
name: vibe-to-agentic-framework
description: The conceptual framework behind the Vibe Coding → Agentic Engineering presentation. Covers the journey arc, level system, TodoApp example, and section-by-section narrative. Use when creating or editing slides to ensure content fits the story.
user-invocable: false
---
# The "Vibe Coding to Agentic Engineering" Framework
This skill teaches the **conceptual model** behind the presentation. Every slide and section exists to tell a single story: how a developer incrementally moves from unstructured "vibe coding" (Low level) to high-level agentic engineering (High level).
## Core Concept
**Vibe Coding (Low level)** is when a developer uses Claude Code with no structure — no project context, no conventions, no reusable knowledge. Every prompt is a coin flip.
**Agentic Engineering (High level)** is when Claude Code operates as a fully configured engineering system: CLAUDE.md, Rules, Skills, Agents, Commands, Hooks, and MCP Servers all working together. Every prompt produces consistent, tested, production-quality code.
## The 4-Level Journey System
| Level | Order | Bar Height | Description |
|-------|-------|------------|-------------|
| Low | 1 | 25% | Vibe coding territory — no structure |
| Medium | 2 | 50% | Structured workflows, some automation |
| High | 3 | 75% | Domain knowledge, skills, custom agents |
| Pro | 4 | 100% | Full agentic engineering (theoretical ceiling only) |
The main presentation caps at **High**. `data-level="pro"` is never assigned. The Pro tick mark is a visual scale reference only.
## Level Transition Reference Table
| Slide | Slide Name | data-level |
|-------|-----------|------------|
| 10 | Better Prompting (section divider) | `low` |
| 18 | Project Memory (section divider) | `medium` |
| 29 | Domain Knowledge (section divider) | `high` |
| 34 | Agentic Engineering (section divider) | `high` |
## The Running Example: TodoApp Monorepo
**Before (Vibe Coding):**
todoapp/
├── backend/ # FastAPI (Python)
└── frontend/ # Next.js (TypeScript)
**After (Agentic Engineering):**
todoapp/
├── .claude/
│ ├── agents/
│ ├── skills/
│ ├── commands/
│ ├── hooks/
│ ├── rules/
│ └── settings.json
├── backend/CLAUDE.md
├── frontend/CLAUDE.md
├── .mcp.json
└── CLAUDE.md
## The Journey Arc
### Part 0: Introduction (Slides 1–4, no weight)
Title slide, TodoApp before/after, "What is Vibe Coding?", Journey Map TOC.
### Part 1: Prerequisites (Slides 5–9, no weight)
Installing, authentication, first session. No weight — logistics only.
### Part 2: Better Prompting (Slides 10–17, Level: Low)
Good vs Bad Prompts, `@files` context, `/compact`, Plan Mode.
Why Low: Improves individual interactions but no lasting project knowledge.
### Part 3: Project Memory (Slides 18–24, Level: Medium)
CLAUDE.md + `/init`, what to include, Rules (path-scoped `.claude/rules/`).
Why Medium: Claude remembers across sessions but workflows aren't automated yet.
### Part 4: Structured Workflows (Slides 25–28, Level: Medium)
Task Lists, Model Selection (Opus/Sonnet/Haiku).
Why still Medium: Builds on project memory systematically.
### Part 5: Domain Knowledge (Slides 29–33, Level: High)
What Are Skills, Creating Skills, Skill Frontmatter & Invocation, `context: fork`.
Why High: One skill definition improves every future interaction in its domain.
### Part 6: Agentic Engineering (Slides 34–46, Level: High)
What Are Agents, Frontend/Backend Engineer Agents, Commands & Orchestration (Command → Agent → Skills), Hooks & MCP.
Why High: This is the architectural pinnacle taught in this presentation.
### Appendix (Slides 47+, no weight)
Reference material — all commands, settings, configuration options.
## Editing Guidelines
1. **Where does this concept sit on the journey?** Prompting → Low. Agent memory scopes → High.
2. **What's the before/after?** Use the TodoApp to show vibe coding vs agentic outcome.
3. **Does it build on what came before?** Skills assume CLAUDE.md + Rules. Agents assume Skills. Commands assume Agents.
4. **Use the TodoApp.** Show actual `routes/todos.py`, `Sidebar.tsx`, `CLAUDE.md` content.
## Learnings from Previous Executions
- Hook-event references drifted across files. Treat `16 hook events` as canonical.
- Do not use shorthand agent names (`frontend-eng`). Keep identifiers exactly aligned with agent definitions.
- Never hardcode `.weight-badge` or `.level-badge` in slide HTML; badges are runtime-injected by JS.
- The journey bar was refactored from percentage-based (`data-weight`) to 4-level (`data-level`) system.
- The main presentation caps at **High** level. Do not assign `data-level="pro"` to any slide.
- Current-level indicator uses `Current = <strong>Level</strong>` via JS innerHTML (not hardcoded labels).