Claude Code 入门：从安装配置到造出首个交互式网页应用

# 方式 A：原生安装器（推荐零基础，无需 Node.js）
# macOS / Linux / WSL
curl -fsSL https://claude.ai/install.sh | bash

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

# 方式 B：npm 全局安装（已装 Node.js 的开发者最常用）
npm install -g @anthropic-ai/claude-code

# 方式 C：IDE 扩展（VS Code / JetBrains 插件市场搜索 "Claude Code"）

claude

flowchart TD
    A[运行 claude] --> B{选择认证方式}
    B -->|1. 浏览器登录| C[自动打开浏览器]
    C --> D[在 claude.ai 确认授权]
    D --> E[终端回显 Login successful]
    B -->|2. Anthropic API Key| F[粘贴 sk-ant- 开头密钥]
    F --> G[写入本地凭据]
    B -->|3. 企业 SSO| H[输入组织提供的登录链接]
    H --> E
    E --> I[进入交互式对话 REPL]

flowchart LR
    U["用户全局<br/>~/.claude/settings.json"] --> P["项目级<br/>.claude/settings.json"]
    P --> L["项目本地<br/>.claude/settings.local.json"]
    L -.覆盖优先级递增.-> U

# 让 claude 帮你打开配置编辑
claude config set --global preferredNotifPrompt false

{
  "permissions": {
    "allow": [
      "Bash(ls:*)",
      "Bash(cat:*)",
      "Bash(mkdir:*)",
      "Bash(node:*)",
      "Bash(open:*)"
    ]
  },
  "model": "default"
}

# 项目说明
本项目是一个番茄工作法计时器网页应用（单文件 HTML）。

## 技术栈
- 原生 HTML5 / CSS3 / JavaScript（无框架、无构建工具）
- 单文件 index.html，双击即可在浏览器打开

## 约定
- 所有 UI 文案使用中文
- 配色：主色 #FF6347（番茄红），背景 #FFF8F0
- 代码注释用中文，变量名用英文

mkdir ~/pomodoro && cd ~/pomodoro

claude

请在当前目录创建一个番茄工作法计时器的网页应用 index.html，要求：
1. 单文件，包含 HTML+CSS+JS，双击即可在浏览器打开
2. 顶部一个 25:00 的倒计时大字号显示
3. 三个按钮：开始、暂停、重置
4. 计时归零时弹窗提示"休息一下吧"
5. 下方记录今天完成的番茄数
6. 整体居中，番茄红主色，圆角卡片风格
请直接生成完整可运行的代码。

# macOS
open index.html
# Linux
xdg-open index.html
# Windows
start index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>番茄钟 · 专注计时器</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #FFF8F0;
      font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    }
    .card {
      background: #fff;
      border-radius: 24px;
      padding: 48px 56px;
      box-shadow: 0 12px 40px rgba(255, 99, 71, 0.18);
      text-align: center;
    }
    .title { color: #FF6347; font-size: 22px; margin-bottom: 24px; }
    .timer {
      font-size: 96px;
      font-weight: 700;
      color: #333;
      letter-spacing: 4px;
      margin-bottom: 32px;
      font-variant-numeric: tabular-nums;
    }
    .btns { display: flex; gap: 16px; justify-content: center; margin-bottom: 28px; }
    button {
      padding: 12px 28px;
      border: none;
      border-radius: 12px;
      font-size: 16px;
      cursor: pointer;
      transition: transform .15s, opacity .15s;
    }
    button:active { transform: scale(0.96); }
    .btn-start { background: #FF6347; color: #fff; }
    .btn-pause { background: #FFD180; color: #5d4037; }
    .btn-reset { background: #ECEFF1; color: #455A64; }
    .btn-start:disabled, .btn-pause:disabled { opacity: .4; cursor: not-allowed; }
    .count { color: #888; font-size: 15px; }
    .count b { color: #FF6347; font-size: 20px; }
  </style>
</head>
<body>
  <div class="card">
    <div class="title">🍅 番茄工作法计时器</div>
    <div class="timer" id="timer">25:00</div>
    <div class="btns">
      <button class="btn-start" id="start">开始</button>
      <button class="btn-pause" id="pause" disabled>暂停</button>
      <button class="btn-reset" id="reset">重置</button>
    </div>
    <div class="count">今天已完成 <b id="done">0</b> 个番茄</div>
  </div>

  <script>
    const TOTAL = 25 * 60;          // 番茄时长：25 分钟（秒）
    let remain = TOTAL;
    let intervalId = null;
    let done = 0;

    const timerEl = document.getElementById('timer');
    const doneEl  = document.getElementById('done');
    const startBtn = document.getElementById('start');
    const pauseBtn = document.getElementById('pause');
    const resetBtn = document.getElementById('reset');

    // 把秒数格式化成 mm:ss
    function fmt(sec) {
      const m = String(Math.floor(sec / 60)).padStart(2, '0');
      const s = String(sec % 60).padStart(2, '0');
      return `${m}:${s}`;
    }

    function render() { timerEl.textContent = fmt(remain); }

    function tick() {
      remain--;
      render();
      if (remain <= 0) {
        clearInterval(intervalId);
        intervalId = null;
        done++;
        doneEl.textContent = done;
        remain = TOTAL;
        render();
        startBtn.disabled = false;
        pauseBtn.disabled = true;
        alert('休息一下吧 🍵');
      }
    }

    startBtn.onclick = () => {
      if (intervalId) return;
      intervalId = setInterval(tick, 1000);
      startBtn.disabled = true;
      pauseBtn.disabled = false;
    };

    pauseBtn.onclick = () => {
      clearInterval(intervalId);
      intervalId = null;
      startBtn.disabled = false;
      pauseBtn.disabled = true;
    };

    resetBtn.onclick = () => {
      clearInterval(intervalId);
      intervalId = null;
      remain = TOTAL;
      render();
      startBtn.disabled = false;
      pauseBtn.disabled = true;
    };

    render();
  </script>
</body>
</html>

给番茄钟增加：
1. 工作 25 分钟和休息 5 分钟自动切换，循环往复
2. 顶部进度条显示当前番茄的剩余比例
3. 把"今天完成的番茄数"用 localStorage 持久化，刷新不丢

flowchart TD
    A[1. 安装 claude<br/>原生安装器/npm] --> B[2. 终端运行 claude<br/>完成认证]
    B --> C[3. 写 CLAUDE.md<br/>告诉 AI 项目约定]
    C --> D[4. 输入自然语言需求<br/>一句话建项目]
    D --> E[5. Claude 自动创建文件<br/>index.html]
    E --> F[6. 浏览器打开验收]
    F --> G{满意？}
    G -->|否| H[再用一句话提需求迭代]
    H --> F
    G -->|是| I[🎉 第一个 AI 辅助项目完成]