前言¶
前端或全栈同学在接设计稿时，常见路径是：在 Figma 里量尺寸、导出切图，再手写 HTML/CSS 对齐视觉。过程重复、细节多，和「让模型按稿生成页面」之间往往还缺一层稳定流程——既要能读到 Figma 里的结构与资源，又要能对照参考图控制还原度。下面介绍 SkillHub 社区 Skill figma转高保真html，它把「Figma MCP 拉数据 + 参考截图 + 生成 HTML」写进 Agent 的工作流，在对话里用自然语言或链接即可触发。
这是什么¶
figma转高保真html（坐标 @user_24c316b5/figma-to-html，版本 1.0.0）是 SkillHub 上的社区 Skill，分类为 dev-programming，发布者为 user_24c316b5。官方说明中的定位是：将 Figma 设计稿转换为高保真 HTML 页面；通过 Figma MCP 获取设计数据与图片资源，并结合用户提供的参考截图，生成响应式 HTML 文件。页面标注 requires_api_key=false，表示 Skill 元数据未要求单独配置 API Key（实际使用 Figma MCP 时，仍须在你当前 Agent 环境中完成 Figma MCP 的接入与授权，以官方 MCP 文档为准）。
- SkillHub 展示页：https://www.skillhub.cn/skills/user_24c316b5/figma-to-html
- API 入口：https://api.skillhub.cn/user_24c316b5/figma-to-html
核心功能¶
依据 SkillHub 页面与已抓取资料，可核实的能力如下。
- 设计稿转页面：以 Figma 为数据源，输出高保真、可落地的 HTML（含响应式布局取向）。
- Figma MCP 集成：Skill 说明中明确依赖 Figma MCP 工具读取设计结构与图片资源，而不是仅根据文字描述臆造布局。
- 参考截图辅助：可结合你提供的参考截图，用于对齐视觉细节。
- 对话触发：当用户提到特定关键词、或给出 Figma 链接并要求生成 HTML 时，Agent 应按 Skill 指引启用该流程。
官方列出的触发表述包括：figma 转 html、figma 还原、figma to html、设计稿转页面、还原设计稿、figma 切图，以及提供 Figma 链接并要求生成 HTML 的场景。
安装与启用¶
Skill 基于通用 SKILL.md 格式。SkillHub 给出的安装方式是：让 AI 按统一安装文档操作，或本地用 skillhub CLI 安装到当前 Agent 的 skills 目录（装错目录会导致 Agent 识别不到，需重启或刷新后生效）。
方式一：提示词安装（官方页面推荐）¶
将下面提示发给已支持 Skill 的 AI 客户端（如 Cursor、Claude Code 等）：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_24c316b5/figma-to-html`。
Agent 会按文档检查 skillhub CLI，并把 Skill 安装到对应环境的 skills 目录。
方式二：CLI 安装¶
先确认是否已安装 SkillHub CLI：
command -v skillhub && skillhub --version
未安装时，可按 SkillHub 安装文档执行完整安装（示例为官方文档中的推荐命令）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
安装本 Skill 时，必须用 --dir 指向当前 Agent 的 skills 目录。文档中的常见路径示例：
| 客户端 | skills 目录（示例） |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下的 .agents/skills/ |
安装命令形式如下（将 <skills 目录> 替换为上表对应路径）：
skillhub install @user_24c316b5/figma-to-html --dir <skills 目录>
也可先搜索再安装：
skillhub search figma-to-html
skillhub install @user_24c316b5/figma-to-html --dir <skills 目录>
安装完成后，按你所用客户端的要求重启或刷新 Agent，使新 Skill 被加载。
Figma MCP¶
本 Skill 的工作流依赖 Figma MCP 拉取设计稿与资源。请在 Cursor 或其他客户端中先配置并启用 Figma MCP（连接方式以 Figma MCP 官方说明为准）；未配置时，Skill 中描述的「获取设计数据和图片资源」步骤无法执行。
典型用法¶
下面步骤可在对话中复现，与官方简介一致。
- 确认已安装
@user_24c316b5/figma-to-html，且 Agent 已加载该 Skill。 - 确认 Figma MCP 可用，并对目标文件具备访问权限。
- 在对话中提供 Figma 设计链接，并说明要生成 HTML；或使用官方列出的触发语，例如：
请用 figma 转 html：这是设计稿链接 https://www.figma.com/design/……，生成响应式 HTML 页面。
- 若有视觉对齐需求，附上 参考截图（整页或关键模块），并说明需要优先还原的区域（间距、字体、颜色等）。
- 让 Agent 按 Skill 流程：通过 Figma MCP 读取结构与资源 → 生成 HTML 文件 → 你在本地打开预览，按需迭代修改。
生成物一般为可直接保存的 HTML（及 Skill 执行过程中引用的资源路径）；具体文件名与目录以当次 Agent 输出为准。
适用场景与注意¶
适合谁
- 需要把 Figma 稿快速落成可预览 HTML 的前端、全栈或独立开发者。
- 已在使用 Cursor 等支持 Skills + MCP 的环境，愿意用对话驱动还原而非纯手搓静态页。
限制与注意
- 高保真程度受 Figma 稿复杂度、MCP 可读范围以及你是否提供参考截图影响；复杂交互或组件库级设计可能需要多轮迭代。
- Skill 描述侧重 HTML 页面 产出，是否包含完整 CSS 框架、是否拆分组件，取决于当次对话与 Agent 实现，不宜默认等同于生产级组件库代码。
- SkillHub 统计（以已抓取资料为准）：评分 100000，下载 4139，安装 124；数据会随平台更新变化，以 SkillHub 页面为准。
- 设计稿涉及版权与团队规范时，请仅在有权使用的文件上调用 Figma 链接与 MCP。
结尾¶
figma转高保真html 把「Figma MCP 取数 + 参考图对齐 + 生成响应式 HTML」固化成 Agent Skill，适合在已有 Figma 链接、希望减少重复切图与量稿时间的场景。安装与优先源说明见 SkillHub 安装文档；Skill 详情与安装提示见 SkillHub 展示页。
