Workshop · 2026.04.08

Claude Code
实战工作坊

从零构建数据看板 · 1 小时 · 全程实操

Shawn Wu

Agenda

今天要做什么

01
环境准备
安装 Claude Code
+ 三个插件
02
从零到一
读数据
→ 生成看板
03
迭代优化
筛选 → 图表
→ 动画 → AI
04
进阶功能
登录 · 权限
· 暗黑模式
05
插件深度
20 个设计
命令详解
06
自由发挥
挑战你自己
的创意
01
Chapter 01

环境准备
工具安装

环境检查 + 基本操作

先确认三个前置条件

1
Node.js
node -v
≥ v18
装 Claude Code 需要
2
Git
git --version
≥ v2.x
装插件需要
3
Claude Code
claude --version
如果没装：
npm i -g @anthropic-ai/claude-code
操作说明
claude启动对话（首次会弹浏览器登录）
弹出 Allow? → 按 y允许创建/修改文件，正常操作
输入 /查看所有可用技能
Ctrl+C退出
Install

安装三个插件

claude plugin install superpowers@anthropics/claude-plugins-official claude plugin install frontend-design@anthropics/claude-plugins-official claude plugin install impeccable@pbakaus/impeccable

安装完成后输入 / 验证 → 能看到 /polish、/audit、/brainstorming 就成功了

Plugin System

三个插件各做什么

Superpowers
工程工作流
/brainstorming 头脑风暴
/writing-plans 计划制定
/systematic-debugging 调试
Frontend Design
设计规范
生成页面时自动遵循
排版、配色、间距等
专业标准
Impeccable
设计增强 × 20 命令
/audit 诊断 → /polish 修复
/typeset 排版 · /arrange 布局
/animate 动效 · /delight 惊喜
02
Chapter 02

从零到一
15 分钟

Step 1

下载数据

从群里的云盘链接下载 data/ 文件夹，放到你的工作目录。

先用 Excel 打开 CSV 看看数据长啥样。

5 个文件
  • coffee-data.json — 全量数据（AI 读这个）
  • cities-summary.csv — 6 城市核心指标
  • cities-monthly.csv — 月度消费量
  • cities-monthly-2023.csv — 去年同期
  • categories.csv — 品类偏好
Step 2 · 复制粘贴到 Claude Code

第一个 Prompt

当前目录下有一个 data 文件夹，里面是全国咖啡消费趋势的数据文件。 请先读取 data/coffee-data.json 了解数据结构， 然后基于这些真实数据创建一个 HTML 数据看板页面。 要求： - 单个 HTML 文件，使用 Chart.js - 数据从 JSON 文件中读取，不要硬编码假数据 - 顶部放 4 个数据统计卡片（年消费量、市场规模、门店数、杯均价格） - 下方放一个折线图（月度趋势）和一个柱状图（城市排名） - 风格要现代简约，浅色背景，圆角卡片

关键：先读数据 → 再生成页面 → 这是真实工作流

Step 3 · 打开浏览器验证

检查三个点

✓
页面能看到？
浏览器中能打开 HTML 文件
✓
图表正常渲染？
折线图和柱状图都显示了
✓
卡片有数字？
统计卡片显示了真实数据

每个人的结果都不一样——这是正常的

03
Chapter 03

迭代优化
20 分钟

迭代 1 · 5 min

城市筛选联动

加一个城市筛选下拉框，放在页面顶部右侧。 选择不同城市后，所有图表和数据卡片要联动更新。

教学点：一句话描述"联动"，AI 自动实现多图表同步刷新

迭代 2 · 5 min

环形图 + 可排序表格

再加两个组件： 1. 一个环形图，显示咖啡品类偏好分布（拿铁、美式、卡布奇诺、摩卡、冷萃、其他） 2. 一个数据明细表格，显示每个城市的消费量、市场规模、门店数、杯均价、同比增速 表格要支持点击表头排序

教学点：一次提多个需求，AI 批量处理。描述越具体，结果越精准

迭代 3 · 5 min

动画 + 插件精修

1
加动画
数据卡片数字从 0 到目标值的计数动画 所有卡片和图表从下往上入场动画 卡片 hover 时轻微上浮
2
诊断
/audit
自动出检查报告
不改代码，只看问题
3
一键修复
/polish
间距 · 配色 · 动画曲线
对比度 · 交互状态

先诊断 → 再修复 → 不盲目优化

Impeccable

20 个设计命令速览

类别命令做什么
设置/teach-impeccable定义风格偏好
诊断/audit出检查报告
/critiqueUX 评审
修复/polish最终精修
/normalize对齐设计系统
/typeset修字体排版
/arrange修布局节奏
类别命令做什么
增强/animate加动效
/colorize加色彩
/delight加惊喜感
/bolder变大胆
/quieter变柔和
简化/distill精炼
/clarify优化文案
迭代 4 · 5 min · 最 wow 的一步

AI 数据分析师

在页面右侧加一个固定的侧边栏，做成 AI 数据分析师的对话界面： - 顶部显示"AI 数据分析师"头像和名称 - 中间是聊天消息区域 - 底部有输入框和发送按钮 - AI 的回复要能读取页面上的实际数据来回答问题 - 加几个快捷问题按钮：整体趋势、增长最快、风险预警

AI 能理解"读取页面数据"这种抽象需求

04
Chapter 04

进阶功能
产品级体验

Dark Mode

暗黑模式

  • CSS 变量 [data-theme="dark"] 覆盖
  • 右上角 sun/moon 切换按钮
  • localStorage 记住偏好
  • Chart.js 颜色跟随适配
给页面加暗黑模式切换按钮 用 CSS 变量做颜色覆盖 深色背景用 #0f1117 localStorage 记住偏好 图表也要适配
Login Page

模拟登录页

  • 左侧品牌区 + 右侧表单
  • 邮箱、密码输入框
  • 三个快捷账号一键填充
  • localStorage 保存登录状态
三个角色
张明 · 管理员
全部权限
李雪 · 分析师
看不到收入数据
访客
只能看全国汇总
Permissions

角色权限矩阵

功能管理员分析师访客
查看所有城市✓✓✗ 仅汇总
收入列可见隐藏隐藏
城市筛选启用启用禁用
AI 回答范围全部无收入相关仅汇总
设置面板·用户管理可见不可见不可见
Settings

设置面板

用户信息
头像、姓名、角色、登录时间
外观
深色模式开关
通知
数据更新 · 异常预警 · 周报推送
管理员专属
用户管理列表 · 权限矩阵

齿轮图标 → 右侧滑出 → 退出登录回到登录页

05
Chapter 05

插件深度
解析

Superpowers · 工程工作流

从想法到交付

1
/brainstorming
不确定怎么做？
发散多种方案
2
/writing-plans
功能比较大？
先拆解成步骤
3
对话开发
正常对话
+ /frontend-design
4
/debugging
遇到 bug？
系统化排查
5
/code-review
做完了
审查代码质量
Impeccable · 设计精修链路

从诊断到精修

0
/teach-impeccable
定义风格偏好
只需做一次
1
/audit
出诊断报告
不改代码
2
/normalize
对齐设计系统
间距 · 颜色 · 字号
3
/typeset + /arrange
修字体排版
修布局节奏
4
/polish
最终精修
出货前最后一步
When to Use

技能使用时机

阶段技能来源
项目启动/teach-impeccableImpeccable
不确定怎么做/brainstormingSuperpowers
开始写代码/frontend-designFrontend Design
遇到 bug/systematic-debuggingSuperpowers
功能做完/audit → /polishImpeccable
确认质量/requesting-code-reviewSuperpowers
06
Chapter 06

自由发挥
10 分钟

Challenges

挑战清单

入门级

  • 换数据主题（新能源汽车？奶茶？）
  • 换图标（用 Lucide 图标库）
  • /audit 看看你的页面能打几分

进阶级

  • 加雷达图对比城市
  • /typeset + /arrange + /delight
  • 加暗黑模式切换

挑战级

  • 加模拟登录页（左右分栏）
  • 做角色权限（管理员/分析师/访客）
  • 让 AI 按角色限制回答
  • 加设置面板（齿轮图标滑出）
Takeaway

核心收获

01
Prompt 即编程
描述越清晰，结果越好
02
迭代是方法论
MVP → 交互 → 动画 → AI → 登录 → 权限
03
插件是倍增器
/audit → /polish 把 70 分变 90 分
04
完整产品原型
登录 · 权限 · 暗黑 · AI · 设置，全部对话生成
Bonus

One More Thing

你现在看到的这套幻灯片
也是用 Claude Code 生成的。

使用 /frontend-slides skill · 全程对话 · 零手写 CSS

Thank You

Shawn Wu · 2026

Claude Code 不只是写代码的工具。
它是你把想法变成产品的最短路径。

现在就开始。