前言
最近发现一套很有意思的工作流——在 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 实现交互动画 **项目结构：**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 - 交互动画
设计稿关键参数
- 背景色:
#000000，卡片:#1C1C1E，分割线:#3A3A3C - 强调色:
#FA2D48（Apple Music 红） - 字体: Inter，文字主色:
#FFFFFF，次级:#8E8E93 - 圆角: 卡片 10-16px，头像 18px，专辑封面 8-12px
- 屏幕: 402 x 874 (iPhone 尺寸)
项目结构
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 # 模拟数据
交互功能
- 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 会按步骤逐个实现： 1. 项目初始化：用pnpm create vite 创建项目，安装依赖
2. 全局样式：配置 Tailwind，设置深色主题和颜色变量
3. 状态管理：用 React Context + useReducer 管理播放状态
4. 组件开发：按设计稿参数逐个构建 UI 组件
5. 交互打磨：Framer Motion 动画、进度条模拟、响应式适配
整个过程中，AI 会严格对照设计稿里的参数——颜色用设计稿里的色值，圆角用设计稿里的数值，间距也是。这就是 Pencil 的核心价值：设计参数和代码实现之间有了一条自动化的桥梁。
