Claude Code 入门篇：零基础装通并造首个网页看板

node -v
npm -v

npm config set registry https://registry.npmmirror.com

# macOS / Linux
curl -fsSL https://claude.ai/install.sh | bash

# Windows (PowerShell)
irm https://claude.ai/install.ps1 | iex

npm install -g @anthropic-ai/claude-code

claude

# macOS / Linux
export ANTHROPIC_API_KEY="sk-ant-xxxx"

# Windows PowerShell
$env:ANTHROPIC_API_KEY="sk-ant-xxxx"

/help          查看所有命令
/init          让 Claude 扫描项目并生成 CLAUDE.md
/model         切换模型（Sonnet / Opus / Haiku）
/config        打开设置面板
/cost          查看本次会话 token 花费
/clear         清空当前上下文重新开始
/compact       压缩上下文（对话太长时用）

mkdir ~/kanban-board && cd ~/kanban-board
claude

/init

{
  "permissions": {
    "allow": ["Bash(open:*)", "Bash(ls:*)", "Read(*)"]
  }
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的看板</title>
<style>
  * { box-sizing: border-box; font-family: system-ui, sans-serif; }
  body { margin: 0; background: #f4f5f7; color: #172b4d; padding: 24px; }
  h1 { text-align: center; }
  .toolbar { display: flex; gap: 8px; max-width: 720px; margin: 0 auto 24px; }
  .toolbar input { flex: 1; padding: 10px 12px; border: 1px solid #dfe1e6; border-radius: 8px; font-size: 15px; }
  .toolbar button { padding: 10px 20px; border: none; background: #0052cc; color: #fff; border-radius: 8px; cursor: pointer; font-size: 15px; }
  .board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 960px; margin: 0 auto; }
  .column { background: #ebecf0; border-radius: 12px; padding: 12px; min-height: 200px; }
  .column h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .5px; margin: 4px 0 12px; }
  .card { background: #fff; border-radius: 8px; padding: 12px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
  .card .text { margin-bottom: 10px; font-size: 15px; }
  .card .actions { display: flex; gap: 8px; }
  .card button { font-size: 12px; border: 1px solid #dfe1e6; background: #f4f5f7; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
  .card button.del { color: #de350b; }
</style>
</head>
<body>
  <h1>📋 我的待办看板</h1>
  <div class="toolbar">
    <input id="taskInput" placeholder="输入新任务，回车添加…" />
    <button onclick="addTask()">添加</button>
  </div>
  <div class="board">
    <div class="column"><h2>待办</h2><div id="col-0"></div></div>
    <div class="column"><h2>进行中</h2><div id="col-1"></div></div>
    <div class="column"><h2>已完成</h2><div id="col-2"></div></div>
  </div>

<script>
const STAGES = ['待办', '进行中', '已完成'];
let tasks = JSON.parse(localStorage.getItem('kanban') || '[]');

function save() { localStorage.setItem('kanban', JSON.stringify(tasks)); }

function addTask() {
  const input = document.getElementById('taskInput');
  const text = input.value.trim();
  if (!text) return;
  tasks.push({ id: Date.now(), text, stage: 0 });
  input.value = '';
  save(); render();
}

function move(id) {
  const t = tasks.find(x => x.id === id);
  if (t && t.stage < 2) { t.stage++; save(); render(); }
}

function del(id) {
  tasks = tasks.filter(x => x.id !== id);
  save(); render();
}

function render() {
  STAGES.forEach((_, i) => document.getElementById('col-' + i).innerHTML = '');
  tasks.forEach(t => {
    const card = document.createElement('div');
    card.className = 'card';
    card.innerHTML = `<div class="text">${t.text}</div>
      <div class="actions">
        ${t.stage < 2 ? `<button onclick="move(${t.id})">右移 →</button>` : ''}
        <button class="del" onclick="del(${t.id})">删除</button>
      </div>`;
    document.getElementById('col-' + t.stage).appendChild(card);
  });
}

document.getElementById('taskInput').addEventListener('keydown', e => { if (e.key === 'Enter') addTask(); });
render();
</script>
</body>
</html>

flowchart TD
    A[确认 Node.js 环境] --> B{选择安装方式}
    B -->|原生安装器| C1[curl/irm 一键安装]
    B -->|npm| C2[npm i -g @anthropic-ai/claude-code]
    C1 --> D[运行 claude]
    C2 --> D
    D --> E[认证: 账号登录 或 API Key]
    E --> F[进入交互式 REPL]
    F --> G[新建项目目录 cd 进去]
    G --> H[/init 生成 CLAUDE.md 记忆]
    H --> I[Shift+Tab 选权限模式]
    I --> J[自然语言描述需求]
    J --> K[Claude 规划并写代码]
    K --> L{你确认放行?}
    L -->|y| M[生成 index.html]
    L -->|n| K
    M --> N[浏览器打开预览]
    N --> O{满意?}
    O -->|否, 提新需求| J
    O -->|是| P[交付成果 + /cost 看花费]