装通Claude Code造首个数据看板

本教程面向零基础读者，从安装 Claude Code、完成首次认证，到理解它的"对话循环"与权限机制，最终用一句自然语言指令驱动它生成一个纯标准库的 CSV 数据看板生成器——读 CSV、自动识别数值列、产出可在浏览器打开的自包含 HTML 看板（内联 SVG 柱状图 + 汇总卡片 + 明细表）。学完你将掌握安装、认证、CLAUDE.md 项目记忆、斜杠命令与最小可运行项目，适合从未写过命令行工具的入门者。

前置条件

正文

第 1 步：安装 Claude Code

Anthropic 官方推荐用原生安装器（native installer），它会在后台自动更新，省去手动升级的麻烦。

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

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

也可以用包管理器：mac 的 brew install claude-code、Windows 的 winget install Anthropic.ClaudeCode；或走 npm：

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

预期结果：打印一串版本号，例如 1.x.x，说明可执行文件已在 PATH 中。

第 2 步：首次登录与认证

首次启动会让你选界面风格（颜色/字体），随后进入登录。Claude Code 支持三种身份：

现象	原因与解决
`command not found: claude`	安装后没重开终端，PATH 未刷新；重开一个终端窗口，或 `source ~/.zshrc` / `source ~/.bashrc`
npm 报 `engine` 不兼容	Node 版本低于 18，升级 Node 后重装
公司网络下载失败	换 npm 镜像或给 curl 设代理 `https_proxy=... curl ...`

预期结果：登录成功后，终端出现输入框，光标闪烁，可以开始打字对话。

第 3 步：理解"对话循环"与权限

Claude Code 不是一次问答，而是一个代理循环（agentic loop）：你给目标 → 它读文件/想方案 → 调工具（读写文件、跑命令）→ 看结果 → 继续推进，直到完成或停下来征求你同意。

关键是权限：默认情况下，它要改文件、跑命令前都会弹出确认，你可以逐条 y 同意、n 拒绝。这让零基础用户也始终握有控制权。

命令	作用
`/help`	查看所有命令
`/clear`	清空当前对话上下文，重新开始
`/context`	看当前塞进了哪些文件/上下文
`/compact`	压缩历史，省 token、延长会话
`/model`	切换模型（如 Opus / Sonnet）
`/doctor`	自检环境与配置
`/permissions`	管理工具白名单/黑名单

claude --continue      # 继续上一次会话
claude -p "列出当前目录文件"   # 一次性模式，问完即退，适合脚本

第 4 步：建立项目与 CLAUDE.md

CLAUDE.md 是项目记忆：放在项目根目录，每次启动 Claude Code 会自动读它，等于一开始就把"这是个什么项目、用什么技术、怎么跑"告诉它。

mkdir csv-dashboard && cd csv-dashboard
claude

# CSV 数据看板项目

## 目标
用纯 Python 标准库把任意 CSV 转成自包含 HTML 看板（内联 SVG，无第三方依赖）。

## 约定
- 仅用标准库，禁止引入 pandas / matplotlib
- 输出文件名固定为 dashboard.html
- 代码注释用中文

## 运行
- 生成看板：`python3 dashboard.py <csv路径> [数值列名]`
- 验证方式：生成后用浏览器打开 dashboard.html 目检

如果想减少权限弹窗，再加一个项目级 .claude/settings.json（让它自动放行安全的运行命令）：

{
  "permissions": {
    "allow": ["Bash(python3 dashboard.py:*)", "Bash(python3 -c:*)", "Bash(ls:*)"],
    "deny": ["Bash(rm -rf:*)"]
  }
}

第 5 步：第一个项目——让 Claude Code 造数据看板

接下来你会看到完整的代理循环：它创建 dashboard.py、sales.csv → 弹权限让你确认 → 跑 python3 dashboard.py sales.csv → 看到 ✅ 已生成看板 → 用浏览器打开 dashboard.html 检查效果 → 如有瑕疵继续改。

预期结果：目录里多出 dashboard.py、sales.csv、dashboard.html，浏览器弹出一个带柱状图和统计卡片的页面。

实战案例：完整可运行示例

月份,销售额,订单数
1月,12500,120
2月,9800,98
3月,15600,150
4月,18200,175
5月,16400,158
6月,21300,205

#!/usr/bin/env python3
# CSV -> 自包含 HTML 数据看板（纯标准库，无第三方依赖）
import csv, sys, html, os, webbrowser

def to_num(s):
    s = (s or "").replace(",", "").replace("¥", "").replace("$", "").strip()
    try:
        return float(s)
    except ValueError:
        return None

def load_rows(path):
    with open(path, newline="", encoding="utf-8-sig") as f:
        return list(csv.DictReader(f))

def pick_numeric_col(rows, cols, hint=None):
    if hint:
        return hint
    for c in cols:                       # 自动猜：多数行能转成数字的列
        nums = [to_num(r.get(c)) for r in rows]
        if sum(1 for v in nums if v is not None) >= max(2, len(rows) * 0.6):
            return c
    return None

def bar_chart(labels, values, width=720, height=320, color="#4f46e5"):
    n, max_v = len(values), (max(values) if values else 1) or 1
    pad_l, pad_b, pad_t, pad_r = 48, 48, 24, 16
    cw, ch = width - pad_l - pad_r, height - pad_b - pad_t
    step = cw / max(n, 1); bw = step * 0.7
    p = [f'<svg viewBox="0 0 {width} {height}" class="chart">']
    p.append(f'<line x1="{pad_l}" y1="{pad_t+ch}" x2="{pad_l+cw}" y2="{pad_t+ch}" stroke="#cbd5e1"/>')
    for i, (lab, val) in enumerate(zip(labels, values)):
        h = (val / max_v) * ch
        x = pad_l + i * step + (step - bw) / 2
        y = pad_t + ch - h
        p.append(f'<rect x="{x:.1f}" y="{y:.1f}" width="{bw:.1f}" height="{h:.1f}" rx="4" fill="{color}"/>')
        p.append(f'<text x="{x+bw/2:.1f}" y="{y-6:.1f}" text-anchor="middle" class="v">{val:g}</text>')
        p.append(f'<text x="{x+bw/2:.1f}" y="{pad_t+ch+18:.1f}" text-anchor="middle" class="l">{html.escape(str(lab))}</text>')
    p.append("</svg>")
    return "".join(p)

def build_html(title, labels, values, c_label, c_value, rows):
    total, mx = sum(values), (max(values) if values else 0)
    avg = total / len(values) if values else 0
    cards = "".join(
        f'<div class="card"><div class="k">{k}</div><div class="v">{v}</div></div>'
        for k, v in [("记录数", str(len(rows))), ("合计", f"{total:,.2f}"),
                     ("平均", f"{avg:,.2f}"), ("峰值", f"{mx:,.2f}")]
    )
    body = "".join(
        f"<tr><td>{html.escape(str(r.get(c_label,'')))}</td><td>{html.escape(str(r.get(c_value,'')))}</td></tr>"
        for r in rows
    )
    return f"""<!doctype html><html lang="zh"><head><meta charset="utf-8">
<title>{html.escape(title)}</title><style>
*{{font-family:-apple-system,'Segoe UI',sans-serif}}
body{{margin:0;background:#f8fafc;color:#0f172a;padding:24px}}
h1{{font-size:22px;margin:0 0 16px}}
.cards{{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}}
.card{{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:14px 18px;min-width:120px}}
.card .k{{color:#64748b;font-size:12px}}.card .v{{font-size:22px;font-weight:700;margin-top:4px}}
.panel{{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px}}
.chart{{width:100%;height:auto}}.chart .v{{font-size:11px;fill:#475569}}.chart .l{{font-size:11px;fill:#64748b}}
table{{border-collapse:collapse;width:100%;margin-top:8px}}
th,td{{text-align:left;padding:8px 10px;border-bottom:1px solid #eef2f7;font-size:14px}}
th{{color:#64748b;font-weight:600}}
</style></head><body>
<h1>📊 {html.escape(title)}</h1>
<div class="cards">{cards}</div>
<div class="panel">{bar_chart(labels, values)}</div>
<div class="panel" style="margin-top:16px"><table><thead><tr><th>{html.escape(c_label)}</th><th>{html.escape(c_value)}</th></tr></thead><tbody>{body}</tbody></table></div>
</body></html>"""

def main():
    if len(sys.argv) < 2:
        print("用法: python3 dashboard.py <data.csv> [数值列名]"); sys.exit(1)
    path = sys.argv[1]
    hint = sys.argv[2] if len(sys.argv) > 2 else None
    rows = load_rows(path)
    if not rows:
        print("错误: CSV 为空或没有数据行"); sys.exit(1)
    cols = list(rows[0].keys())
    num_col = pick_numeric_col(rows, cols, hint)
    if not num_col:
        print(f"错误: 未找到数值列，列名: {cols}"); print("请手动指定: python3 dashboard.py data.csv 列名"); sys.exit(1)
    label_col = cols[0]
    labels = [r[label_col] for r in rows]
    values = [to_num(r[num_col]) or 0 for r in rows]
    out = os.path.join(os.path.dirname(os.path.abspath(path)) or ".", "dashboard.html")
    with open(out, "w", encoding="utf-8") as f:
        f.write(build_html(os.path.basename(path), labels, values, label_col, num_col, rows))
    print(f"✅ 已生成看板: {out}")
    print(f"   标签列: {label_col}  数值列: {num_col}  记录数: {len(rows)}")
    try:
        webbrowser.open("file://" + os.path.abspath(out))
    except Exception:
        pass

if __name__ == "__main__":
    main()

$ python3 dashboard.py sales.csv
✅ 已生成看板: /home/you/csv-dashboard/dashboard.html
   标签列: 月份  数值列: 销售额  记录数: 6

浏览器自动打开 dashboard.html：顶部四张卡片（记录数 6 / 合计 94,800.00 / 平均 15,800.00 / 峰值 21,300.00），下方紫色柱状图横跨 1–6 月，再下方是明细表。想看"订单数"趋势就加个参数：python3 dashboard.py sales.csv 订单数。

这套脚本零依赖、单文件，扔给同事也能直接跑——这正是 CLAUDE.md 里"只用标准库"约定带来的好处。

装通 Claude Code 造首个本地数据看板

概述

前置条件

正文

第 1 步：安装 Claude Code

第 2 步：首次登录与认证

第 3 步：理解"对话循环"与权限

第 4 步：建立项目与 CLAUDE.md

第 5 步：第一个项目——让 Claude Code 造数据看板

实战案例：完整可运行示例

工作流程图

延伸阅读

训练营适用性评估

参考来源

装通 Claude Code 造首个本地数据看板

概述

前置条件

正文

第 1 步：安装 Claude Code

第 2 步：首次登录与认证

第 3 步：理解"对话循环"与权限

第 4 步：建立项目与 CLAUDE.md

第 5 步：第一个项目——让 Claude Code 造数据看板

实战案例：完整可运行示例

工作流程图

延伸阅读

训练营适用性评估

参考来源

📎 本分类最新文章