frame

仓库创建 2026年1月7日最近提交 2 天前SkillHot 收录 21 天前

▸ 精选理由

方便把设计元数据标准化导出供下游实现使用。

▸ 风险提示

需调用 Figma/MCP 服务、可能要求 API 凭证与外部访问权限

这个 Skill 做什么

从 Figma（经 MCP 服务）提取组件、布局与样式的结构化设计上下文。

通过 MCP Server 从 Figma 抽取组件层级、布局、样式与变量，生成结构化的设计上下文和 token 映射，另可截图做视觉参考。做 Figma 到代码的桥接、管理 Code Connect 或提取设计系统规则时用，能把视觉规范变成可读可用的数据给实现团队。支持导出颜色/间距/排版等 W3C 风格的 tokens。

▸ 展开 SKILL.md 英文原文

Extracting and structuring design context from Figma via MCP Server for downstream implementation agents. Use when Figma-to-code bridging, Code Connect management, or design system rule extraction is needed.

开发编程Figma 提取设计令牌组件上下文通用

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/simota/agent-skills/main/frame/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/simota/agent-skills/main/frame/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

<!--
CAPABILITIES_SUMMARY:
- design_context_extraction: Extract component hierarchy, layout, styles, and props from Figma frames via MCP get_design_context
- variable_extraction: Export Figma Variables (colors, spacing, typography) as structured token maps aligned with W3C DTCG format
- screenshot_capture: Capture visual references via get_screenshot to supplement structural data
- metadata_retrieval: Retrieve file metadata (pages, frames, component sets) for extraction planning via get_metadata
- code_connect_management: Audit, create, sync, and maintain Code Connect mappings between Figma components and codebase
- design_system_rules: Derive and package design system conventions from Figma

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有