> ## Documentation Index
> Fetch the complete documentation index at: https://felimet-hub.jmcores.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Code Agent：AI 素養基礎內訓

> 為實驗室夥伴製作的 AI 素養基礎內訓與培養。把設定當成可控的工程介面，建立 LLM 與 Agent 運作的心智模型、隱私與供應鏈風險意識，以及獨立評估工具好壞的判斷力。

export const ArchFlow = ({nodes = [], lang = "zh"}) => {
  const t = lang === "en" ? {
    flow: "Data flow",
    hint: "Click any stage to see what it does",
    stage: "Stage"
  } : {
    flow: "資料流",
    hint: "點任一階段看它做什麼",
    stage: "階段"
  };
  const safe = Array.isArray(nodes) ? nodes : [];
  const [active, setActive] = useState(0);
  if (safe.length === 0) return null;
  const idx = Math.min(active, safe.length - 1);
  const current = safe[idx];
  const css = `
  .af-root{--af-bg:#FAF8F3;--af-surface:rgba(191,117,81,0.06);--af-surface2:rgba(0,0,0,0.025);--af-border:rgba(0,0,0,0.09);--af-text:#2b2722;--af-dim:#6f6a62;--af-faint:#8a8378;--af-rail:rgba(0,0,0,0.12);--af-accent:#bf7551;border:1px solid var(--af-border);border-radius:14px;background:var(--af-bg);color:var(--af-text);overflow:hidden;}
  .dark .af-root{--af-bg:#1b1a18;--af-surface:rgba(207,138,104,0.09);--af-surface2:rgba(255,255,255,0.03);--af-border:rgba(255,255,255,0.08);--af-text:#e7e3da;--af-dim:#a8a299;--af-faint:#8a8378;--af-rail:rgba(255,255,255,0.13);--af-accent:#cf8a68;}
  .af-head{padding:13px 18px 11px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;border-bottom:1px solid var(--af-border);}
  .af-head-ic{color:var(--af-accent);flex-shrink:0;}
  .af-head-t{font-size:12px;font-weight:700;letter-spacing:.6px;color:var(--af-dim);text-transform:uppercase;}
  .af-head-h{font-size:12px;color:var(--af-faint);}
  .af-grid{display:flex;gap:0;align-items:stretch;}
  .af-list{flex:1 1 0;min-width:0;padding:12px 12px 16px;}
  .af-node{display:flex;align-items:stretch;gap:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer;padding:0;color:inherit;font:inherit;-webkit-tap-highlight-color:transparent;}
  .af-railcol{width:22px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;}
  .af-dot{width:9px;height:9px;border-radius:50%;margin-top:14px;background:var(--af-faint);opacity:.5;flex-shrink:0;transition:background .15s,box-shadow .15s,opacity .15s;}
  .af-line{width:2px;flex:1 1 0;background:var(--af-rail);min-height:10px;}
  .af-body{flex:1 1 0;min-width:0;padding:9px 12px;margin:2px 0;border-radius:9px;border:1px solid transparent;transition:background .15s,border-color .15s;}
  .af-node:hover .af-body{background:var(--af-surface2);}
  .af-node-on .af-body{background:var(--af-surface);border-color:rgba(191,117,81,.30);}
  .af-node-on .af-dot{background:var(--af-accent);opacity:1;box-shadow:0 0 0 4px rgba(191,117,81,.15);}
  .af-label{font-size:14.5px;font-weight:550;line-height:1.45;}
  .af-node-on .af-label{color:var(--af-accent);}
  .af-detail{width:300px;flex-shrink:0;border-left:1px solid var(--af-border);padding:16px 18px;background:var(--af-surface2);}
  .af-detail-k{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--af-accent);margin-bottom:7px;}
  .af-detail-l{font-size:16px;font-weight:600;margin-bottom:9px;line-height:1.35;}
  .af-detail-d{font-size:13.5px;line-height:1.65;color:var(--af-dim);}
  @media (max-width:640px){.af-grid{flex-direction:column;}.af-detail{width:auto;border-left:none;border-top:1px solid var(--af-border);}}
  `;
  return <div className="af-root">
      <style>{css}</style>
      <div className="af-head">
        <svg className="af-head-ic" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="8" height="8" x="3" y="3" rx="2" /><path d="M7 11v4a2 2 0 0 0 2 2h4" /><rect width="8" height="8" x="13" y="13" rx="2" /></svg>
        <span className="af-head-t">{t.flow}</span>
        <span className="af-head-h">{t.hint}</span>
      </div>
      <div className="af-grid">
        <div className="af-list">
          {safe.map((n, i) => <button key={i} type="button" className={"af-node" + (i === idx ? " af-node-on" : "")} onClick={() => setActive(i)} onMouseEnter={() => setActive(i)}>
              <div className="af-railcol">
                <div className="af-dot" />
                {i < safe.length - 1 && <div className="af-line" />}
              </div>
              <div className="af-body">
                <div className="af-label">{n.label}</div>
              </div>
            </button>)}
        </div>
        <div className="af-detail">
          <div className="af-detail-k">{t.stage} {idx + 1} / {safe.length}</div>
          <div className="af-detail-l">{current.label}</div>
          <div className="af-detail-d">{current.detail}</div>
        </div>
      </div>
    </div>;
};

export const LearnerPrimer = ({items = [], lang = "zh"}) => {
  const t = lang === "en" ? {
    title: "Before this unit, be honest with yourself",
    sub: "If you can't answer these, that gap is exactly what this unit closes."
  } : {
    title: "讀這個單元前，先誠實面對",
    sub: "這幾題答不出來，正是這個單元要替你補的洞。"
  };
  const css = `
  .lp-root{--lp-bg:#FAF7F1;--lp-surface:rgba(191,117,81,0.05);--lp-border:rgba(0,0,0,0.09);--lp-edge:rgba(191,117,81,0.42);--lp-text:#2b2722;--lp-dim:#6f6a62;--lp-accent:#bf7551;border:1px solid var(--lp-border);border-left:3px solid var(--lp-edge);border-radius:13px;background:var(--lp-bg);color:var(--lp-text);overflow:hidden;margin:1.25rem 0;}
  .dark .lp-root{--lp-bg:#1b1a18;--lp-surface:rgba(207,138,104,0.07);--lp-border:rgba(255,255,255,0.08);--lp-edge:rgba(207,138,104,0.5);--lp-text:#e7e3da;--lp-dim:#a8a299;--lp-accent:#cf8a68;}
  .lp-head{display:flex;align-items:center;gap:9px;padding:13px 18px 11px;border-bottom:1px solid var(--lp-border);background:var(--lp-surface);}
  .lp-ic{color:var(--lp-accent);flex-shrink:0;}
  .lp-htx{display:flex;flex-direction:column;gap:1px;min-width:0;}
  .lp-title{font-size:14px;font-weight:650;line-height:1.3;letter-spacing:.01em;}
  .lp-sub{font-size:12px;color:var(--lp-dim);line-height:1.4;}
  .lp-list{list-style:none;margin:0;padding:10px 18px 14px;display:flex;flex-direction:column;gap:0;}
  .lp-item{display:flex;align-items:baseline;gap:11px;padding:7px 0;font-size:14px;line-height:1.6;border-top:1px solid var(--lp-border);}
  .lp-item:first-child{border-top:none;}
  .lp-mark{flex-shrink:0;color:var(--lp-accent);font-size:13px;font-weight:700;line-height:1.55;font-variant-numeric:tabular-nums;opacity:.85;}
  .lp-q{flex:1 1 0;min-width:0;color:var(--lp-text);}
  @media (max-width:620px){.lp-head{padding:12px 14px 10px;}.lp-list{padding:8px 14px 12px;}}
  `;
  return <div className="lp-root">
      <style>{css}</style>
      <div className="lp-head">
        <svg className="lp-ic" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /></svg>
        <span className="lp-htx">
          <span className="lp-title">{t.title}</span>
          <span className="lp-sub">{t.sub}</span>
        </span>
      </div>
      <ul className="lp-list">
        {items.map((q, i) => <li className="lp-item" key={i}>
            <span className="lp-mark">{String(i + 1).padStart(2, "0")}</span>
            <span className="lp-q">{q}</span>
          </li>)}
      </ul>
    </div>;
};

這是**為實驗室夥伴製作的 AI 素養基礎內訓與培養**。對象是已經在作業、開發與研究裡用 AI（Vibe Coding）、但還沒系統性理解設定與機制的工程背景夥伴。目標不是教你「怎麼把工具叫出來」，而是讓你**正確地**使用它：理解運作模型、把設定當成可控的工程介面，並建立獨立判斷工具好壞的能力。

<LearnerPrimer
  lang="zh"
  items={[
"買了 AI 卻不會用：你的時間到底花去哪了？",
"不是 AI 沒效，是你根本沒搞懂自己在幹嘛。",
"工具都買了還在土法煉鋼，問題真的不在工具。",
"你真的需要 AI，還是只是在用它安慰自己？",
"當 AI 發展到一定程度，人很難從零理解它，所以要與時俱進。",
]}
/>

## 這份內訓的主張

多數工程背景的使用者卡在一個落差：**「用了 AI」不等於「正確地用 AI」**。把對話框當成升級版搜尋引擎、把 Coding Agent 當成會通靈的自動完成，結果是輸出品質浮動、上下文失控、盲目信任產生的隱性錯誤，以及在團隊裡無法重現的個人化體驗。

立場是：**現代 AI 工具是可被設定、可被約束、可被自動化的工程系統，而設定本身就是槓桿（leverage）。** 同一個模型，在有無 `CLAUDE.md`、有無 Skill、有無 Hook、有無正確隱私設定之下，產出差異是數量級的。這份內訓把這層「設定與心智模型」攤開來講。

<Info>
  以 **Anthropic Claude 全家桶**（Claude.ai、Claude Cowork、Claude Code）為主軸深寫，其餘工具（OpenAI、Google、GitHub Copilot、Cursor）以對照方式呈現。工具設定細節查證截至 **2026-05**；凡快變動項目均標來源與截至日期。
</Info>

## 四個學習維度

<ArchFlow
  lang="zh"
  nodes={[
{ label: "Part I 基礎與進階認識", detail: "概念心智模型：建立 LLM 與 Agent 的運作直覺，以及 prompt / context / workflow / harness 四層工程的全貌。" },
{ label: "Part II 進階調適與設定", detail: "各工具實作（Claude 為主）：設定層級模型、settings.json、claude.json、四大機制總覽與跨工具對照。" },
{ label: "Part III 認知與思維", detail: "獨立評估能力：工具適配判斷、跳脫 star 數迷思、安全與供應鏈風險、個人 benchmark。這一維貫穿全程，每學一個設定都回來問一次「這對我真的有用嗎」。" },
{ label: "Part IV 客製化整合與自動化", detail: "生成專屬內容：.claude 目錄全覽、CLAUDE.md、rules、commands、Skill、Subagent、Hooks、Plugin、MCP、CLI 優先、Agent Teams。" },
{ label: "Part V Agentic 案例研究", detail: "OpenClaw / Hermes-Agent / NemoClaw 三套開源 agent 外殼解剖與路線比較。學到的會回頭修正 Part I 的心智模型，形成回饋。" },
]}
/>

維度之間不是線性的。Part III（認知與思維）其實貫穿全程：第一次讀建議照 I → II → III → IV，但實務上每學一個設定，都該回到 III 問一句「這對我真的有用嗎」。

## 怎麼讀：三條動線

不同夥伴的起點不同，提供三條閱讀路徑。

<Note>
  **路徑 A：依維度循序（預設，適合系統性學習）**

  01-1 → 01-2 → … → Part II → Part III → Part IV。完整建立心智模型，再動手設定。
</Note>

<Note>
  **路徑 B：依工具切入（適合「我只用某一個工具」）**

  先讀 02-1（層級模型）建立通用框架，再跳到 02-2（若用 Claude）或 02-6 對照表找到你的工具，接著補 03-3（安全隱私）與 04-2（寫規則檔）。
</Note>

<Note>
  **路徑 C：依痛點切入（適合已在用、想解決具體問題）**

  「產出不穩」→ 01-4 + 04-1；「不知道該不該裝某個 Skill」→ 03-1 + 03-2；「擔心資料外洩」→ 03-3 + 附錄 B；「想自動化重複流程」→ 04-4 + 04-6。
</Note>

## 內容地圖

<CardGroup cols={3}>
  <Card title="Part I 基礎認識" icon="brain" href="/code-agent/foundations/why-correct-usage">
    7 個單元：從「為什麼要正確使用」到 prompt / context / workflow / harness 四層工程與 2026 工具地景。
  </Card>

  <Card title="Part II 調適與設定" icon="settings" href="/code-agent/configuration/config-layer-model">
    6 個單元：設定層級模型、Claude 全家桶、settings.json、claude.json、四大機制總覽、跨工具對照。
  </Card>

  <Card title="Part III 認知與思維" icon="scale" href="/code-agent/judgment/fit-evaluation">
    4 個單元：工具適配判斷、跳脫 star 數迷思、安全與供應鏈風險、個人 benchmark。
  </Card>

  <Card title="Part IV 客製化與自動化" icon="wrench" href="/code-agent/customization/claude-directory-reference">
    12 個單元：.claude 目錄全覽開場，CLAUDE.md、rules、commands、Skill、Subagent、Hooks、Plugin、MCP、CLI 優先、Agent Teams 逐機制深入。
  </Card>

  <Card title="Part V 案例研究" icon="microscope" href="/code-agent/case-studies/openclaw">
    4 個單元：OpenClaw、Hermes-Agent、NemoClaw 三套開源 agent 外殼解剖與路線比較。
  </Card>

  <Card title="附錄" icon="paperclip" href="/code-agent/appendix/settings-cheatsheet">
    設定速查表、隱私安全 checklist、詞彙表、延伸資源。
  </Card>
</CardGroup>

### Part I：基礎與進階認識

* [01-1 為什麼要「正確地」使用 AI 工具](/code-agent/foundations/why-correct-usage)
* [01-2 LLM 與 Agent 的運作基礎](/code-agent/foundations/llm-agent-basics)
* [01-3 Prompt Engineering](/code-agent/foundations/prompt-engineering)
* [01-4 上下文工程](/code-agent/foundations/context-engineering)
* [01-5 Workflow Engineering](/code-agent/foundations/workflow-engineering)
* [01-6 Harness Engineering](/code-agent/foundations/harness-engineering)
* [01-7 2026 年 AI 工具地景](/code-agent/foundations/tool-landscape-2026)

### Part II：進階調適與設定

* [02-1 設定的層級模型](/code-agent/configuration/config-layer-model)
* [02-2 Anthropic Claude 設定：Chat、Cowork、Code](/code-agent/configuration/anthropic-claude-setup)
* [02-3 settings.json 與 settings.local.json](/code-agent/configuration/settings-json)
* [02-4 claude.json：它存了什麼、為什麼你該認得它](/code-agent/configuration/claude-json)
* [02-5 Skills / Hooks / Subagents / Plugins 機制總覽](/code-agent/configuration/skills-hooks-subagents-plugins)
* [02-6 其他工具設定對照](/code-agent/configuration/other-tools-comparison)

### Part III：認知與思維

* [03-1 如何判斷工具與 Skill 是否適合自己](/code-agent/judgment/fit-evaluation)
* [03-2 跳脫 star 數迷思的評估框架](/code-agent/judgment/beyond-github-stars)
* [03-3 安全、隱私與供應鏈風險](/code-agent/judgment/security-privacy-supply-chain)
* [03-4 建立個人 benchmark 與驗證習慣](/code-agent/judgment/personal-benchmark)

### Part IV：客製化、整合與自動化

* [04-0 .claude 目錄全覽](/code-agent/customization/claude-directory-reference)
* [04-1 CLAUDE.md 與記憶檔](/code-agent/customization/claude-md-memory)
* [04-2 rules：模組化規則檔](/code-agent/customization/rules)
* [04-3 Command（slash command）](/code-agent/customization/commands)
* [04-4 Skill：用途、格式、製作](/code-agent/customization/skills)
* [04-5 Subagent：用途、格式、製作](/code-agent/customization/subagents)
* [04-6 Hooks：是什麼、用途、各觸發點](/code-agent/customization/hooks)
* [04-7 Plugin 的正確使用](/code-agent/customization/plugins)
* [04-8 各家 AI 的內建工具與功能](/code-agent/customization/vendor-builtin-tools)
* [04-9 跨工具整合與 MCP](/code-agent/customization/mcp-integration)
* [04-10 CLI 優先：CLI 與 MCP 的差異](/code-agent/customization/cli-first-vs-mcp)
* [04-11 Agent Teams 與 Sub Agent](/code-agent/customization/team-vs-subagent)

### Part V：Agentic 系統案例研究

* [05-1 OpenClaw 解剖](/code-agent/case-studies/openclaw)
* [05-2 Hermes-Agent 解剖](/code-agent/case-studies/hermes-agent)
* [05-3 NemoClaw 解剖](/code-agent/case-studies/nemoclaw)
* [05-4 三條路線的差異、能力與該學的事](/code-agent/case-studies/three-approaches-comparison)

### 附錄

* [附錄 A：各工具設定速查表](/code-agent/appendix/settings-cheatsheet)
* [附錄 B：隱私與安全設定 checklist](/code-agent/appendix/privacy-security-checklist)
* [附錄 C：詞彙表](/code-agent/appendix/glossary)
* [附錄 D：延伸資源與社群清單](/code-agent/appendix/resources)

<Tip>
  不要一次讀完才動手。每讀完一個 Part II 的設定單元，立刻在你自己的工具上做一次，再回到 Part III 問「這對我真的有用嗎」。設定的價值，只有在你的真實工作流裡才驗證得出來。
</Tip>