零基础装通 Claude Code 造网页点名器

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

irm https://claude.ai/install.ps1 | iex

# macOS 已装 Homebrew
brew install --cask claude-code
# Windows 已装 WinGet
winget install Anthropic.ClaudeCode

claude --version

claude

mkdir name-picker
cd name-picker

claude

帮我创建一个 CLAUDE.md，写明：本项目是一个网页点名器，技术栈只用单个 HTML 文件内嵌 CSS 和 JS，不引入任何外部依赖，代码注释用中文。

# 项目说明
- 名称：网页随机点名器
- 目标：单 HTML 文件，双击浏览器即可运行
- 技术约束：原生 HTML/CSS/JS，零依赖
- 风格：注释用中文，代码清晰可读

请帮我做一个网页版随机点名器，要求：
1. 单个 index.html 文件，双击就能在浏览器打开
2. 顶部有一个大显示区，显示当前滚动的名字
3. 一个"开始点名"按钮，点一下开始快速滚动名字，再点一下停止并定格在随机一人
4. 下方一个文本框，可以一行一个名字地编辑名单
5. 显示最近 5 次点名历史
6. 配色好看一点，紫色渐变背景，卡片式布局

帮我在默认浏览器里打开 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>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, "Microsoft YaHei", sans-serif;
    background: linear-gradient(135deg, #667eea, #764ba2);
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
  }
  .card {
    background: #fff; border-radius: 16px; padding: 40px;
    width: 90%; max-width: 480px; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
  }
  h1 { color: #333; margin-bottom: 24px; font-size: 24px; }
  /* 显示区：滚动时变灰，定格时高亮紫色 */
  #display {
    font-size: 48px; font-weight: bold; color: #764ba2;
    height: 80px; line-height: 80px; margin: 20px 0;
  }
  #display.rolling { color: #bbb; }
  button {
    background: #764ba2; color: #fff; border: none;
    padding: 14px 40px; font-size: 18px; border-radius: 30px;
    cursor: pointer; transition: background .2s;
  }
  button:hover { background: #5a3373; }
  button.small { background: #eee; color: #666; font-size: 13px; padding: 6px 14px; }
  textarea {
    width: 100%; height: 110px; margin-top: 20px;
    padding: 10px; border: 2px solid #eee; border-radius: 8px;
    font-size: 14px; resize: vertical;
  }
  .history { margin-top: 14px; font-size: 13px; color: #999; min-height: 20px; }
</style>
</head>
<body>
  <div class="card">
    <h1>🎯 随机点名器</h1>
    <!-- 名字显示区 -->
    <div id="display">准备就绪</div>
    <button id="pickBtn">开始点名</button>
    <!-- 名单编辑框 -->
    <textarea id="names" placeholder="一行一个名字，或用逗号分隔">张三
李四
王五
赵六
钱七</textarea>
    <div class="history" id="history"></div>
    <p style="margin-top:12px"><button class="small" id="clearBtn">清空历史</button></p>
  </div>
<script>
  // 获取页面元素
  const display   = document.getElementById('display');
  const btn       = document.getElementById('pickBtn');
  const namesArea = document.getElementById('names');
  const historyEl = document.getElementById('history');
  const clearBtn  = document.getElementById('clearBtn');
  let rolling = false, timer = null, history = [];

  // 解析名单：支持换行、中英文逗号
  function getNames() {
    return namesArea.value.split(/[\n,，]/).map(s => s.trim()).filter(Boolean);
  }

  // 按钮点击：滚动中则停止，停止中则开始
  btn.addEventListener('click', () => rolling ? stopRoll() : startRoll());

  function startRoll() {
    const names = getNames();
    if (names.length === 0) { alert('请先输入至少一个名字'); return; }
    rolling = true;
    btn.textContent = '停止';
    display.classList.add('rolling');
    // 每 80ms 随机刷新一个名字，营造滚动效果
    timer = setInterval(() => {
      display.textContent = names[Math.floor(Math.random() * names.length)];
    }, 80);
  }

  function stopRoll() {
    rolling = false;
    btn.textContent = '开始点名';
    clearInterval(timer);
    display.classList.remove('rolling');
    const chosen = display.textContent;
    history.unshift(chosen);
    historyEl.textContent = '本次：' + chosen + ' ｜ 最近：' + history.slice(0,5).join(' → ');
  }

  // 清空历史
  clearBtn.addEventListener('click', () => {
    history = [];
    historyEl.textContent = '';
  });
</script>
</body>
</html>

flowchart TD
    A[打开终端] --> B[执行安装命令]
    B --> C[claude 首次启动]
    C --> D[浏览器登录授权]
    D --> E[建项目目录并 cd 进入]
    E --> F[创建 CLAUDE.md 固化偏好]
    F --> G[用大白话描述需求]
    G --> H{Claude 提出修改方案}
    H -->|审核并批准| I[文件写入磁盘]
    I --> J[浏览器预览效果]
    J --> K{满意?}
    K -->|否| G
    K -->|是| L[继续迭代加功能]
    L --> G