F2C-PTD工具将需求快速转换为代码实践

F2C的PTDTC（prompt to design to code）体系可以让用户免费通过自然语言的形式将需求快速转换为Figma设计，再通过工具将生成的Figma设计稿转换成高还原度代码。

接下来逐步介绍实现的过程，以下内容和文档均参考：f2c.yy.com/

前期准备

支持MCP的Agent

需要一个支持mcp调用的agent，包括但不限于IDE、插件等，例如：VSCode、Trae、Cursor、Comate。本文以AugmentCode为例。

Figma空设计稿

准备一个空的Figma设计稿，需要有编辑权限，方便工具写入设计稿元素。推荐使用Web端的Figma。

F2C的Chrome插件

提前下载好F2C的配套chrome浏览器插件，截止写稿前的版本为v2.2.0。安装后刷新之前准备好的Figma空文件，看到下图所示即为安装成功。

需求转设计稿部分

步骤一：安装和配置F2C的PTD MCP工具

这个MCP能让用户通过自然语言的方式对话Figma，让AI分析你的需求并转换为Figma生成步骤生成设计稿。

安装

推荐全局安装 F2C PTD 的 MCP：

bash 复制代码

pnpm i -g @f2c/ptd

配置

请参考以下配置：

json 复制代码

// 如果不使用设计组件库，可删除 `your_figma_personal_token` 配置。若需使用组件库，则需要配置。token的获取参考：https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens
{
  "F2C-PTD": {
    "command": "npx",
    "args": [
      "-y",
      "@f2c/ptd",
      "--server=f2c-ptd.yy.com",
      "--figma-api-key=your_figma_personal_token"
    ],
    "env": {
      "personalToken": "your_figma_personal_token"
    }
  }
}

当你安装和配置完毕之后，可以看到MCP是可使用状态并列举出可以使用的tool。

步骤二：加入频道开启自然语言对话

链接频道

在Web Figma中打开前期准备中准备好的Chrome插件，切换到 Design Tab，并点击连接。

点击后的状态如下图，我们可以看到插件出现了一个频道ID，点击即可复制ID。

切换至Agent中，开启对话，输入如下内容（频道自己替换为自己的）：

复制代码

加入频道channel_1757923859807_288

加入频道成功可以看到下图所示：

开始对话生成

这里将prompt放在这里仅供参考，值得注意的是可以Rule或者其它形式更好的约束AI生成，这部分内容可以是你具体的需求，参考内容放置在文章最后。

shadcn/ui 风格中后台 Dashboard 视觉设计规范请设计一个遵循 shadcn/ui 设计语言的中后台仪表盘，其核心是极简、现代、专业且高度一致的视觉体验。

整体氛围与美学基调：营造一种干净、宁静、专业的氛围。避免过度设计和视觉噪音。质感：追求"数字玻璃"般的通透感。大量运用留白，元素之间有充足的呼吸空间。细节：注重微小的视觉细节，如统一的圆角半径（柔和但不过分）、精细的 1px 边框（使用中性或浅灰色）、以及恰到好处的细微阴影（仅用于轻微的层叠感，避免厚重投影）。

色彩体系主色调：以纯净的白色或极浅的灰白色作为背景基底。文字和主要线条采用深灰色或接近黑色的深色（非纯黑），确保阅读舒适。辅助与强调：使用一个低饱和度的单一主色（如蓝紫色或青蓝色）作为唯一的强调色，仅用于关键按钮、选中状态和核心数据图表，起到画龙点睛的作用。状态颜色（成功-绿色、警告-黄色、危险-红色）应清晰可辨，但饱和度不宜过高，保持整体调性的和谐。中性色：广泛使用不同深浅的灰色来区分内容层级，例如用浅灰色表示边框、分隔线和次要信息，形成丰富的层次感而不显杂乱。

布局与结构经典双栏：采用左侧垂直导航栏 + 右侧主内容区的布局。导航栏：窄而简洁，图标与文字结合，选中项通过左侧一条细长的彩色高亮条和微妙的背景色变化来标识，避免使用大面积填充。主内容区：所有信息模块都封装在卡片（Card）内。卡片具有统一的内边距、圆角和轻柔的边框，悬浮时有极其轻微的抬升感（由细微阴影体现）。响应式：在移动设备上，导航栏应能优雅地收起为汉堡菜单，主内容区的卡片自动调整为单列排列。

核心模块视觉描述概览指标卡：每张卡片展示一个核心数据。数值字体较大且加粗，位于卡片中央偏上。下方配以小型的趋势折线图或一个带箭头的小标签（绿色向上/红色向下）显示增长率，颜色使用主色或状态色。数据图表区：占据一张大卡片。图表本身设计简洁，坐标轴线条纤细，网格线若有则非常淡。图例清晰，颜色搭配协调，重点数据突出。活动列表：以极简表格形式呈现。行与行之间通过细微的 border-bottom 分隔，悬停某一行时背景色发生轻微变化。时间戳使用较小字号和浅灰色。快捷操作：使用无填充的"幽灵按钮"（Ghost Button）或带图标的文本链接，排列整齐，不喧宾夺主。

字体与排版字体选择：使用无衬线字体，确保在各种尺寸下都清晰易读。层级分明：标题、副标题、正文、说明文字之间有明确的字号和字重（bold, medium, normal）区分，引导用户的阅读视线。对齐与间距：严格对齐，无论是左对齐还是居中对齐，都保持精确。段落和模块间的垂直间距宽松，水平间距也恰到好处。最终目标：用户进入这个 Dashboard 时，首先感受到的是秩序、清晰和宁静。所有设计元素协同工作，让用户能快速、无干扰地获取信息，同时体会到一种低调而精致的现代美感。

移动端 Dashboard 页面元素细节 (shadcn/ui 风格)

设计一个专为移动设备优化的中后台 Dashboard，所有元素需适应小屏幕，确保信息清晰、操作便捷。

1. 整体布局与导航

主导航

：采用底部标签栏（Bottom Tab Bar）。

位置：固定在屏幕最底部。

样式：半透明或纯白背景，带有细微上边框 (border-t)。包含 3-5 个核心功能图标（如仪表盘、订单、用户、设置），配以简洁文字标签。

交互：选中的标签项使用主色调高亮图标和文字，提供明确反馈。

次级导航/筛选

：位于页面顶部，紧接状态栏下方。

样式：一个轻量级的横向滚动条或分段控件（Segmented Control）。

内容：用于切换视图（如"今日"、"本周"、"本月"）或数据类别（如"全部订单"、"待处理"、"已完成"）。选中项通过背景色填充或下划线标识。

主内容区 ：从顶部导航下方开始，一直延伸到标签栏上方，充分利用垂直空间。内容以单列流式布局排列。

2. 核心模块元素细节
概览指标卡 (KPI Cards)

布局：通常为全屏宽度的横幅或并排的两个小卡片（在稍大屏幕）。

视觉：卡片边界清晰，有统一的内边距。内部采用两行布局：

上行：指标名称（较小字号，浅灰色 text-muted-foreground）。

下行：数值（大号、加粗字体，深色前景），其后紧跟一个微小的趋势图标（↑↓）和变化百分比（绿色/红色）。

交互：卡片整体可点击，跳转到更详细的数据页。

数据图表 (Charts)

类型：优先使用高度压缩的图表，如微型折线图 (Sparkline) 或水平柱状图。

尺寸：宽度占满容器，高度适中（约 100-150px）。

简化：省略复杂的坐标轴标签和图例。仅显示核心趋势。必要时，可通过点击图表区域展开为全屏模态图进行详细分析。

配色：使用主色或状态色，保持简洁。
列表与表格 (Lists & Tables)
形式：将传统的表格转换为卡片式列表项 (Card List Items)。
每行结构：一个可点击的
xml 复制代码
<ListItem>
包含：

左区：一个小型图标或头像（代表用户、订单类型等）。

中区：主要信息（如订单ID、用户名）居左对齐，副信息（如时间、状态摘要）以小号浅色字体显示在主信息下方。

右区：辅助信息（如金额）或一个">"箭头图标，表示可进入详情页。

底部分隔线 ：每个列表项底部有一条非常细的浅灰色线 (border-b)，最后一项除外。
状态标识 ：关键状态（如"待支付"、"已发货"）使用小型 Badge 组件，颜色对应状态色，放置在列表项的右上角或信息区内。
快捷操作 (Quick Actions)

位置：常置于页面右下角的浮动操作按钮 (FAB - Floating Action Button)。

样式：一个圆形按钮，填充主色，中心是"+"号或其他相关图标。悬浮于内容之上，易于触及。

备选方案：也可作为一组小型的"幽灵按钮"（Ghost Buttons）水平排列在某个模块的上方。
3. 通用 UI 元素风格

字体：字号适中，确保在小屏幕上易读。避免过小的说明文字。

圆角：所有卡片、按钮、输入框保持统一的圆角大小（如 rounded-lg）。

阴影：移动端谨慎使用阴影。卡片可有极轻微的底部阴影以示层叠，但不应过于厚重。

图标：使用线条简洁、辨识度高的图标集。大小统一。

加载与空状态：设计优雅的加载骨架屏（Skeleton Screen）和空状态插画，提示用户当前无数据或正在加载。