初學者（入門）技能

動作

動作	描述	範例
`init`	專案初始化（/init-starter 功能）	`/starter init my-portfolio`
`guide`	顯示開發指引	`/starter guide`
`help`	初學者協助	`/starter help`

init（專案初始化）

建立專案目錄結構（HTML/CSS/JS 或 Next.js）
產生 package.json（選擇 Next.js 時）
建立 CLAUDE.md（指定等級：Starter）
建立 docs/ 資料夾結構（供 PDCA 文件使用）
初始化管線儲存 — 在 lib/pdca/status.js 中執行 writeBkitMemory()，其會寫入 .bkit/state/memory.json（.bkit-memory.json 的遷移路徑）。此檔案儲存專案等級與 9 階段的 pipelineStatus，由管線 Stop 掛鉤在階段 5、6 和 9 讀取。注意：這不是 PDCA 階段的存放位置 — 那是 .bkit/state/pdca-status.json。

guide（開發指引）

分析當前專案狀態
建議適合 Starter 等級的下一步動作
專注於階段 1-3 的管線指引

help（初學者協助）

解釋 HTML/CSS/JS 基本概念
回答常見問題
提供範例程式碼

目標受眾

初次學習程式設計的人
想要建立簡單網站的人
需要作品集網站的人

技術棧

選項 A：純 HTML/CSS/JS（適合完全初學者）

HTML5        → 網頁結構
CSS3         → 樣式設計
JavaScript   → 動態功能（可選）

選項 B：Next.js（使用框架）

Next.js 14+  → 基於 React 的框架
Tailwind CSS → 實用 CSS
TypeScript   → 型別安全（可選）

語言層級指引（v1.3.0）

建議：僅使用 Tier 1 語言（Python、TypeScript、JavaScript）

Starter 等級專注於 AI 原生開發，並最大化 AI 工具支援。

層級	允許與否	原因
Tier 1	✅ 是	完整的 AI 支援，Vibe Coding 最佳化
Tier 2	⚠️ 有限制	請考慮使用 Dynamic 等級
Tier 3-4	❌ 否	請升級至 Dynamic/Enterprise

專案結構

選項 A：HTML/CSS/JS

project/
├── index.html          # 主頁面
├── about.html          # 關於頁面
├── css/
│   └── style.css       # 樣式表
├── js/
│   └── main.js         # JavaScript
├── images/             # 圖片檔案
├── docs/               # PDCA 文件
│   ├── 01-plan/
│   └── 02-design/
└── README.md

選項 B：Next.js

project/
├── src/
│   ├── app/
│   │   ├── layout.tsx      # 共用佈局
│   │   ├── page.tsx        # 主頁面
│   │   └── about/
│   │       └── page.tsx    # 關於頁面
│   └── components/         # 可複用元件
├── public/                 # 靜態檔案
├── docs/                   # PDCA 文件
├── package.json
├── tailwind.config.js
└── README.md

核心概念說明

HTML（網頁結構）

<!-- 基本結構 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的網站</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>頁首</header>
    <main>主要內容</main>
    <footer>頁尾</footer>
</body>
</html>

CSS（網頁樣式設計）

/* 基本樣式 */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

/* 置中對齊 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 響應式（行動裝置支援） */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
}

Next.js App Router（建立頁面）

// app/page.tsx - 主頁面
export default function Home() {
  return (
    <main className="container mx-auto p-4">
      <h1 className="text-3xl font-bold">
        歡迎！
      </h1>
    </main>
  );
}

// app/about/page.tsx - 關於頁面
// URL: /about
export default function About() {
  return (
    <div className="container mx-auto p-4">
      <h1>關於我</h1>
      <p>我是 ...</p>
    </div>
  );
}

Tailwind CSS（快速樣式設計）

// 常用 class
<div className="
  container    // 置中對齊
  mx-auto      // 自動左右外邊距
  p-4          // 內距 16px
  text-center  // 文字置中
  text-xl      // 大號文字
  font-bold    // 粗體文字
  bg-blue-500  // 藍色背景
  text-white   // 白色文字
  rounded-lg   // 圓角
  hover:bg-blue-600  // 滑鼠懸停時變色
">

部署方法

GitHub Pages（免費）

1. 建立 GitHub 儲存庫
2. 推送程式碼
3. Settings → Pages → Source: main branch
4. 透過 https://username.github.io/repo-name 存取

Vercel（建議用於 Next.js）

1. 在 vercel.com 註冊（GitHub 整合）
2. 「New Project」→ 選擇儲存庫
3. 點擊「Deploy」
4. URL 會自動產生

限制

❌ 登入/註冊（需要伺服器）
❌ 資料儲存（需要資料庫）
❌ 管理頁面（需要後端）
❌ 付款功能（需要後端）

何時升級

如果您需要以下功能，請升級至 Dynamic 等級：

→ 「我需要登入功能」
→ 「我想要儲存資料」
→ 「我需要管理頁面」
→ 「我希望使用者之間能互相溝通」

Starter 等級的 bkit 功能（v1.5.1）

輸出風格：bkit-learning（建議使用）

為獲得最佳學習體驗，請啟動學習輸出風格：

/output-style bkit-learning

此風格提供：

每個任務後的學習重點，說明您做了什麼以及為什麼
TODO(learner) 標記，鼓勵動手練習
針對初學者難度調整的概念說明

代理記憶（自動啟動）

bkit 代理會自動跨會話記住您的學習進度。無需任何設定 — 您的 starter-guide 代理使用 user 範圍記憶，因此學習上下文即使在不同的專案之間也能持續保留。

代理團隊

Starter 等級專案不提供代理團隊功能。升級至 Dynamic 等級後，您將解鎖 2 位隊友並行 PDCA 模式。

常見錯誤

錯誤	解決方案
圖片未顯示	檢查路徑（`./images/photo.jpg`）
CSS 未套用	檢查 link 標籤路徑
頁面導航無法運作	檢查 href 路徑（`./about.html`）
在行動裝置上顯示異常	檢查 `<meta name="viewport">` 標籤

ww-w-ai/bkit-claude-code

bkit-claude-code 是什麼？

在你喜歡的 AI 中提問

說明文件