@nova-infra/f2c

Figma To Code CLI

nova-f2c 是一个 agent-first 的 Figma 转代码 CLI,强调高还原度输出,面向项目转换、 代码生成与设计稿检验场景。输入 Figma 链接后,可以直接生成预览 HTML、设计报告和结构化 hints, 安装后执行的命令就是 nova-f2c

nova-f2c / 快速开始
命令名 安装后直接执行 nova-f2c
安装来源 @nova-infra/f2c
输出 preview.htmldesign-report.htmlpage.hints.json
$ npm i -g @nova-infra/f2c $ nova-f2c --url <figma-url> --output ./f2c-output --emit-design-report # 生成预览 HTML、设计报告和结构化 hints。

聚焦把设计稿变成真正可用的结果。

这个官网只讲工具本身。你真正会用到的是安装方式、命令入口、生成结果,以及它在日常工作里的直接价值。

直接可执行

安装完成后直接运行 nova-f2c,不需要本地拼装额外的开发环境。

输入就是 Figma 链接

给定带 node-id 的 Figma 链接,即可生成预览 HTML,并按需附带截图和设计报告。

结果可直接查看

输出里包含 preview.htmldesign-report.htmlpage.hints.json,方便预览、评审和后续加工。


先装包,再直接执行 nova-f2c

当前 npm 包地址已经公开,最直接的入口就是 npm。官网保留的是你真正需要复制的命令,而不是实现细节。

npm
$ npm i -g @nova-infra/f2c $ nova-f2c --help
包名

@nova-infra/f2c

命令名

nova-f2c


从链接到结果,命令尽量保持简单。

下面是最常见的两种用法:先看帮助,再直接对一个设计节点输出预览和设计报告。

查看帮助

nova-f2c --help

生成预览

nova-f2c --url <figma-url> --output ./f2c-output

附带设计报告

nova-f2c --url <figma-url> --output ./f2c-output --emit-design-report

只下载截图

nova-f2c --url <figma-url> --output ./f2c-output --screenshot-only

常用命令
$ nova-f2c --help $ nova-f2c --url <figma-url> --output ./f2c-output $ nova-f2c --url <figma-url> --output ./f2c-output --emit-design-report $ nova-f2c --url <figma-url> --output ./f2c-output --screenshot-only

输出的东西是为了让你直接用,而不是只为了证明工具存在。

一次执行之后,你最常接触的就是预览、报告和结构化 JSON。这三类结果已经覆盖大多数查看、评审和后续处理场景。

preview.html

直接打开即可查看生成结果,是最直观的输出物。

design-report.html

带图层、问题、截图与高亮联动,适合设计评审与问题定位。

page.hints.json

结构化节点信息与提示,适合作为后续流程的输入。

把设计链接交给它,把结果交给你。

从 npm 安装,到执行 nova-f2c,官网只保留你真正会用到的内容。