starter

入门级（Starter）技能

操作

操作	描述	示例
init	项目初始化（/init-starter 功能）	/starter init my-portfolio
guide	显示开发指南	/starter guide
help	入门帮助	/starter help

init（项目初始化）

1. 创建项目目录结构（HTML/CSS/JS 或 Next.js）
2. 生成 package.json（选择 Next.js 时）
3. 创建 CLAUDE.md（指定级别：Starter）
4. 创建 docs/ 文件夹结构（用于 PDCA 文档）
5. 初始化 .bkit-memory.json

guide（开发指南）

• 分析当前项目状态
• 提供适合 Starter 级别的后续步骤建议
• 提供专注于 Phase 1-3 的 Pipeline 指南

help（入门帮助）

• 讲解 HTML/CSS/JS 基本概念
• 解答常见问题
• 提供示例代码

目标受众

• 首次学习编程的人
• 想要创建简单网站的人
• 需要作品集网站的人

技术栈

选项 A：纯 HTML/CSS/JS（适合完全初学者）

HTML5        → Web page structure
CSS3         → Styling
JavaScript   → Dynamic features (optional)

选项 B：Next.js（使用框架）

Next.js 14+  → React-based framework
Tailwind CSS → Utility CSS
TypeScript   → Type safety (optional)

语言层级指南（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          # Main page
├── about.html          # About page
├── css/
│   └── style.css       # Styles
├── js/
│   └── main.js         # JavaScript
├── images/             # Image files
├── docs/               # PDCA documents
│   ├── 01-plan/
│   └── 02-design/
└── README.md

选项 B：Next.js

project/
├── src/
│   ├── app/
│   │   ├── layout.tsx      # Common layout
│   │   ├── page.tsx        # Main page
│   │   └── about/
│   │       └── page.tsx    # About page
│   └── components/         # Reusable components
├── public/                 # Static files
├── docs/                   # PDCA documents
├── package.json
├── tailwind.config.js
└── README.md

核心概念说明

HTML（网页结构）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>Header</header>
    <main>Main content</main>
    <footer>Footer</footer>
</body>
</html>

CSS（网页样式）

/* Basic styles */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

/* Center alignment */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Responsive (mobile support) */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
}

Next.js App Router（创建页面）

// app/page.tsx - Main page
export default function Home() {
  return (
    <main className="container mx-auto p-4">
      <h1 className="text-3xl font-bold">
        Welcome!
      </h1>
    </main>
  );
}

// app/about/page.tsx - About page
// URL: /about
export default function About() {
  return (
    <div className="container mx-auto p-4">
      <h1>About</h1>
      <p>I am ...</p>
    </div>
  );
}

Tailwind CSS（快速设置样式）

// Frequently used classes
<div className="
  container    // Center alignment
  mx-auto      // Auto left/right margin
  p-4          // Padding 16px
  text-center  // Center text
  text-xl      // Large text
  font-bold    // Bold text
  bg-blue-500  // Blue background
  text-white   // White text
  rounded-lg   // Rounded corners
  hover:bg-blue-600  // Color change on hover
">

部署方式

GitHub Pages（免费）

1. Create GitHub repository
2. Push code
3. Settings → Pages → Source: main branch
4. Access at https://username.github.io/repo-name

Vercel（推荐用于 Next.js）

1. Sign up at vercel.com (GitHub integration)
2. "New Project" → Select repository
3. Click "Deploy"
4. URL automatically generated

限制

❌ Login/Registration (requires server)
❌ Data storage (requires database)
❌ Admin pages (requires backend)
❌ Payment features (requires backend)

何时升级

如果你需要以下功能，请升级到 Dynamic 级别：

→ "I need login functionality"
→ "I want to store data"
→ "I need an admin page"
→ "I want users to communicate with each other"

Starter 级别的 bkit 功能（v1.5.1）

输出风格：bkit-learning（推荐）

为了获得最佳学习体验，请启用学习型输出风格：

/output-style bkit-learning

该风格提供：

• 每项任务后提供学习要点，说明你做了什么以及原因
• 提供 TODO(learner) 标记，鼓励动手练习
• 根据初学者的理解难度调整概念讲解

Agent 记忆（自动启用）

bkit Agent 会自动记住你在不同会话中的学习进度。 无需设置——你的 starter-guide Agent 使用 user 范围的记忆， 因此学习上下文会在不同项目间持续保留。

Agent 团队

Starter 级别项目不支持 Agent Teams。 升级到 Dynamic 级别后，即可解锁双队友并行 PDCA 模式。

---

常见错误

错误	解决方法
图片不显示	检查路径（./images/photo.jpg）
CSS 未应用	检查 link 标签路径
页面导航无效	检查 href 路径（./about.html）
在移动设备上显示异常	检查 <meta name="viewport"> 标签