我用 AI 画了个设计稿，然后让它自己写成了代码

从设计到代码，全程没打开 Figma，没手写一行 CSS。这篇文章带你体验 Pencil + Claude 的"设计即开发"工作流。

前言

最近折腾了一套让我直呼离谱的工作流------在 Cursor 里装一个叫 Pencil 的插件，用自然语言让 AI 在画布上画设计稿，画完之后再让 AI 直接把设计稿翻译成可运行的 React 代码。

整个过程下来，Figma 没开、CSS 没手写、设计参数也不用自己量。我拿 Apple Music 的界面做了个实验，效果还真挺像那么回事。

今天就把这套流程分享给大家。

Pencil 是什么？

简单说，Pencil 是一个运行在 Cursor / VS Code 里的 MCP 设计插件。它不是传统的拖拽式设计工具，而是通过 AI 对话来驱动设计------你用文字描述你想要的界面，AI 就在编辑器左侧的画布上帮你画出来。

关键是，它画出来的不是一张截图，而是带有完整设计参数的结构化数据：颜色值、圆角、间距、字体大小，全都有。这意味着后续写代码的时候，AI 可以直接读取这些参数，不用你再人肉对照。

安装方式

在 Cursor 或 VS Code 的插件市场搜索 Pencil，一键安装就行。装完之后编辑器侧边栏会多出一个画布面板，这就是你的"AI 设计台"。

Claude 4.6：代码生成的大脑

这套工作流的另一个核心角色是 Claude 4.6。它不仅能理解 Pencil 画布上的设计稿结构，还能根据设计参数生成完整的项目代码------从项目初始化、目录结构规划，到每一个组件的实现，再到交互动画的细节。

说白了，Pencil 负责"画"，Claude 负责"写"，你负责"指挥"。

实战：从零复刻 Apple Music 界面

接下来进入正题，我会还原整个操作过程。

第一步：让 AI 画设计稿

打开 Cursor，确保 Pencil 插件已启用，然后在对话框里输入一句提示词：

复制代码

在左侧当前画布，使用 pencil mcp 设计 apple music 的界面

就这么一句话，AI 就开始在画布上构建 Apple Music 的移动端界面了。几十秒后，你会看到设计完成的提示：

然后一个相当完整的设计稿出现在左侧面板：深色背景、红色强调色、专辑卡片、底部播放器、标签导航......核心元素基本都有。

AI 还会自动提取出关键设计参数：

参数	值
背景色	`#000000`
卡片色	`#1C1C1E`
强调色	`#FA2D48`（Apple Music 红）
文字主色	`#FFFFFF`
文字次级	`#8E8E93`
卡片圆角	10-16px
屏幕尺寸	402 x 874（iPhone）

这些参数不用你自己去量，AI 全都帮你整理好了。

第二步：生成代码实现计划

设计稿确认没问题后，下一步就是让 AI 制定代码实现方案。AI 会根据设计稿自动规划出以下内容：

技术选型：

Vite 做构建工具（快就完了）
React 18 + TypeScript 前端框架
Tailwind CSS 4 处理样式
Lucide React 提供图标
Framer Motion 实现交互动画

项目结构：

bash 复制代码

src/
  components/
    StatusBar.tsx        # iOS 状态栏
    Header.tsx           # 标题 + 头像
    FeaturedCard.tsx     # 精选专辑大图卡片
    AlbumCard.tsx        # 专辑卡片组件
    HorizontalScroll.tsx # 横向滚动容器
    MiniPlayer.tsx       # 底部迷你播放器
    TabBar.tsx           # 底部标签导航
  context/
    PlayerContext.tsx    # 播放状态管理
  data/
    mockData.ts          # 模拟数据

交互功能清单：

Mini Player：播放/暂停、下一首、进度条动画
Tab Bar：5 个标签页切换，选中高亮
横向滚动：Recently Played 和 Top Picks 支持滑动
毛玻璃效果：Mini Player 和 Tab Bar 使用 backdrop-filter

看到这套方案的时候我是挺惊讶的------组件拆分很合理，交互细节也考虑到了，甚至连 backdrop-filter 毛玻璃效果都安排上了。

以下是 AI 生成的完整代码实现计划：
点击展开完整实现计划

Apple Music 交互式 React 应用

技术栈

Vite - 构建工具
React 18 + TypeScript - 前端框架
Tailwind CSS 4 - 样式
Lucide React - 图标库（与设计稿一致）
Framer Motion - 交互动画

设计稿关键参数（来自 Pencil 画布）

背景色: #000000，卡片: #1C1C1E，分割线: #3A3A3C
强调色: #FA2D48（Apple Music 红）
字体: Inter，文字主色: #FFFFFF，次级: #8E8E93
圆角: 卡片 10-16px，头像 18px，专辑封面 8-12px
屏幕: 402 x 874 (iPhone 尺寸)

项目结构

bash 复制代码

netmusic-demo/
  src/
    components/
      StatusBar.tsx        # iOS 状态栏
      Header.tsx           # "Listen Now" 标题 + 头像
      FeaturedCard.tsx     # 精选专辑大图卡片
      AlbumCard.tsx        # 可复用的专辑卡片组件
      HorizontalScroll.tsx # 横向滚动列表容器
      MiniPlayer.tsx       # 底部迷你播放器（进度条+控制）
      TabBar.tsx           # 底部 5 标签导航
    context/
      PlayerContext.tsx    # 播放状态全局管理
    data/
      mockData.ts          # 模拟专辑/歌曲数据
    App.tsx
    main.tsx
    index.css              # Tailwind 入口 + 自定义样式
  index.html
  package.json
  tsconfig.json
  vite.config.ts
  tailwind.config.ts

交互功能

Mini Player: 播放/暂停切换、下一首按钮、进度条动画模拟
Tab Bar: 5 个标签页切换（Listen Now 高亮红色，其余灰色），带过渡动画
横向滚动: Recently Played 和 Top Picks 区域支持触摸/鼠标横向滑动
Featured Card: 点击展开效果
滚动体验: 内容区域原生滚动，Mini Player 和 Tab Bar 固定底部，backdrop-filter 毛玻璃效果

实施步骤

项目初始化 ：用 pnpm create vite 创建 React + TypeScript 项目，使用 pnpm 作为包管理器安装 tailwindcss、lucide-react、framer-motion 依赖。
全局样式与布局 ：在 index.css 中配置 Tailwind，设置全局深色背景、字体。App.tsx 搭建整体 flex 布局：固定状态栏/标题 + 可滚动内容区 + 固定迷你播放器 + 固定标签栏。
播放状态管理 ：PlayerContext.tsx 使用 React Context + useReducer 管理当前播放歌曲、播放/暂停状态、进度。所有播放相关组件通过 context 联动。
逐个实现组件：按设计稿中的层级顺序构建各组件，颜色、间距、圆角严格对照设计参数。
交互与动画：使用 Framer Motion 为标签切换、播放按钮、卡片点击添加平滑过渡动画。Mini Player 进度条用 CSS animation 或 requestAnimationFrame 模拟推进。

第三步：AI 开始写代码

方案确认后，AI 会按步骤逐个实现：

项目初始化 ：用 pnpm create vite 创建项目，安装依赖
全局样式：配置 Tailwind，设置深色主题和颜色变量
状态管理：用 React Context + useReducer 管理播放状态
组件开发：按设计稿参数逐个构建 UI 组件
交互打磨：Framer Motion 动画、进度条模拟、响应式适配

整个过程中，AI 会严格对照设计稿里的参数------颜色用设计稿里的色值，圆角用设计稿里的数值，间距也是。这就是 Pencil 的核心价值：设计参数和代码实现之间有了一条自动化的桥梁。

最终效果展示

经过以上几个步骤，一个可运行的 Apple Music 界面就出来了：

这套工作流适合谁？

说实话，这不是要取代专业设计师和开发者的协作流程。但在以下场景，它确实很好用：

个人项目快速出原型：有个想法想快速验证，不想花时间画设计稿再写代码
前端开发者做 Side Project：自己就是设计师 + 开发者，想提高效率
学习参考：想看看某个 App 的界面用代码怎么实现，AI 给你一个可运行的参考
Demo 演示：需要快速做一个高保真 Demo 给团队或客户看

一些使用心得

用下来有几个体会，分享给大家：

提示词要具体：别只说"设计一个音乐 App"，最好指定参考对象，比如"Apple Music 的界面"，这样 AI 的产出会更聚焦。
先看设计稿再写代码：别急着让 AI 直接写代码，先让它在 Pencil 画布上画出来，确认视觉方向没问题了再动手，避免反复返工。
分步骤执行：不要一口气让 AI 把所有事都做了，分步骤来------先设计、再规划、再实现，每一步都确认了再往下走，成品质量会高很多。
细节需要人工调整：AI 生成的代码能跑、能看，但像素级还原还是需要人工微调的。把它当作一个 80 分的起点，而不是 100 分的终点。

写在最后

从"我想要一个 Apple Music 的界面"到"一个可运行的 React 应用"，全程在一个编辑器里完成，没切换任何工具。这种体验确实让我看到了 AI 辅助开发的另一种可能。

Pencil + Claude 的组合，本质上是把"设计"和"开发"这两件事的边界模糊掉了。以前是设计师画稿、开发者还原，现在是 AI 画稿、AI 还原、人类把关。

工具在进化，工作流也在变。与其观望，不如自己上手试试。

项目完整源码已开源，欢迎 Star：GitHub - apple-music-clone

如果这篇文章对你有帮助，欢迎点个赞 👍 关注一下，后续会继续分享 AI 编程相关的实战内容。