📊 页面导航

    适用角色与上手难度

    角色推荐度上手难度
    📦 产品★★★★★★★☆☆☆
    🎨 设计★★★★★★★☆☆☆
    🛠️ 前端★★★★☆★★☆☆☆
    🧪 测试★★★☆☆★★★☆☆

    🎯 学习产出： 掌握用 Claude Code 做产品设计的完整流程，能独立完成从需求分析到设计还原的全链路工作

    🚀 AI 能力提升： 需求分析、原型生成、设计还原、设计系统

    设计实战

    预计阅读时间: 5 分钟

    产品经理出想法，Claude Code 出原型和代码——一个完整的、可验证的设计闭环。

    这个教程解决什么问题

    设计师和产品经理面对的问题不是"没有好点子"，而是想法到落地的链路太长：

    1. 写 PRD → 等设计师理解 → 出原型 → 评审修改
    2. 原型通过 → 等前端排期 → 开发 → 发现和原型不一样 → 改
    3. 组件库没人维护 → 每个页面样式不一致 → 用户说"不像一个产品"

    Claude Code 把这条链路压缩成一个人 + 一个终端能做的事——但不是替代人，是让每个人都能更快地验证想法。

    这个教程不是讲"Claude Code 自动生成代码"，而是讲如何用 Claude Code 做产品设计这件事本身。

    你会学到什么

    想法 → PRD → 可交互原型 → 设计走查 → 前端代码 → 设计系统
  │        │         │          │         │          │
  │   Chap 1    Chap 2    Chap 3   Chap 4   Chap 5    │
  │                                                     │
  └─────────── Claude Code 全程参与 ────────────────────┘
    章节内容产出
    从需求到原型PRD 撰写、需求澄清、生成可交互原型PRD 文档 + HTML 原型
    设计评审与走查设计一致性检查、交互逻辑验证、反馈收集设计评审报告
    从设计到代码Figma/Axure → Playwright 验证 → 前端实现可用的前端页面
    设计系统维护组件库管理、设计 Token、一致性保障设计规范文档

    前置知识

    • 会使用 Claude Code 基本功能（对话、文件操作）
    • 了解基本的前端概念（HTML/CSS/组件）
    • 有一个想做的产品想法（哪怕只是一个想法）

    如果你还不熟悉 Claude Code 基础，先看快速开始。

    实战项目：做一个"任务管理看板"

    这个教程不会抽象地讲方法——每一章都围绕同一个实际项目展开：一个简易的任务管理看板（TaskBoard）。

    TaskBoard 需求简述：
- 用户可以创建、拖拽、完成任务
- 四列看板：待办 → 进行中 → 待审核 → 已完成
- 每张卡片显示标题、负责人、截止日期、优先级标签

    跟着教程走完，你会有一个完整的产品——从 PRD 到可用的前端页面，所有产出都可以在浏览器里跑起来。

    教程序章

    <SectionList items={[ { title: '从需求到原型', description: '用 Claude Code 做需求分析和原型生成——从一句话想法到一个可交互的 HTML 页面', link: '/design/prd-to-prototype' }, { title: '设计评审与走查', description: '用 Claude Code 做设计一致性检查、交互逻辑验证、无障碍审计', link: '/design/design-review' }, { title: '从设计到代码', description: '从 Figma/Axure 到 Playwright 验证再到前端代码——设计还原的完整闭环', link: '/design/design-to-code' }, { title: '设计系统维护', description: '用 Claude Code 管理组件库、设计 Token 和多平台一致性', link: '/design/design-system' }, ]} />