初学者（入门）技能

操作

操作	描述	示例
`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，由管道停止钩子在阶段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="zh-CN">
<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（快速样式）

// 常用类
<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 分支
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 中提问

文档