用 mermaid 渲染的可视化关系图。颜色对应 8 大层级（中国色），实线为"组成/因果"关系，虚线为"边界/邻近"关系。
%%{init: {'flowchart': {'curve': 'basis', 'htmlLabels': true, 'nodeSpacing': 25, 'rankSpacing': 35, 'padding': 10}, 'themeVariables': {'fontSize': '12px'}}}%%
graph TB
subgraph L1Layer["L1 范式层"]
VC["Vibe Coding"]:::L1
AP["Agentic Programming"]:::L1
end
subgraph L2Layer["L2 方法论层"]
SDD["SDD"]:::L2
CE["Context Eng."]:::L2
IR["Iterative Refinement"]:::L2
end
subgraph L3Layer["L3 技术层"]
LLM["LLM"]:::L3
MCP["MCP"]:::L3
end
subgraph L4Layer["L4 工具层"]
CUR["Cursor"]:::L4
CC["Claude Code"]:::L4
end
subgraph L5Layer["L5 质量层"]
GR["Guardrails"]:::L5
YOLO["YOLO Mode"]:::L5
end
subgraph L6Layer["L6 风险层"]
VS["Vibe Slop"]:::L6
LT["Lethal Trifecta"]:::L6
end
VC -. "边界" .-> AP
VC --> IR
SDD --> IR
CE --> LLM
VC ==> CUR
VC ==> CC
GR -. "反义" .-> YOLO
VC -. "风险" .-> VS
VC -. "可触发" .-> LT
classDef L1 fill:#2B3A4F,stroke:#1a2535,color:#fff,stroke-width:1px
classDef L2 fill:#4F84FF,stroke:#2c5cb5,color:#fff,stroke-width:1px
classDef L3 fill:#00A86B,stroke:#00754a,color:#fff,stroke-width:1px
classDef L4 fill:#2E5D8C,stroke:#1a3a5f,color:#fff,stroke-width:1px
classDef L5 fill:#D4AF37,stroke:#a0841e,color:#fff,stroke-width:1px
classDef L6 fill:#F43E06,stroke:#b32c04,color:#fff,stroke-width:1px
style L1Layer fill:#F0EEE9,stroke:#AAA093,stroke-width:1px
style L2Layer fill:#F0EEE9,stroke:#AAA093,stroke-width:1px
style L3Layer fill:#F0EEE9,stroke:#AAA093,stroke-width:1px
style L4Layer fill:#F0EEE9,stroke:#AAA093,stroke-width:1px
style L5Layer fill:#F0EEE9,stroke:#AAA093,stroke-width:1px
style L6Layer fill:#F0EEE9,stroke:#AAA093,stroke-width:1px
Mermaid 图加载失败时显示此说明。完整关系见各词条详情页的"相关词条"。
Vibe Coding 与 Agentic Programming 是常被混淆的两个范式。Fowler 强调：前者"忘了代码存在"，后者"审查代码"。
频繁 Vibe Coding → Technical Debt 累积 → Vibe Slop → Vibe Coding Hangover。Guardrails 是阻断链。
"是否审查代码"是 Vibe vs Agentic 的决定点。"是否每次审批"是 YOLO vs Responsible 的决定点。
反向阻断：用 Guardrails + SDD + Mechanical Verification Pipeline 切断链路。