Figma Code Connect Components
技能 活跃Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.
To streamline the design-to-code workflow by enabling efficient and accurate mapping of Figma components to their code counterparts, ensuring design-code consistency.
功能
- Identify unmapped Figma components
- Search codebase for matching code components
- Present mapping suggestions to the user
- Create Code Connect mappings via tool calls
- Handle different Figma URL and desktop selections
使用场景
- Connecting a specific Figma component (e.g., a button) to its code implementation
- Mapping multiple components within a Figma frame to code
- Creating new code components based on Figma designs
- Maintaining design-code synchronization through automated linking
非目标
- Writing directly to the Figma canvas using Plugin API scripts
- Generating full-page Figma designs from code or descriptions
- Implementing product code from Figma designs (beyond mapping)
Trust
- warning:Issues AttentionOpen issues (30) are significantly higher than closed issues (6) in the last 90 days, indicating slow response times or a backlog.
Versioning
- warning:Release ManagementThere is no explicit versioning declared in the frontmatter, `package.json`, or GitHub release tags, and install instructions reference `main`.
Install
- info:Installation instructionInstallation instructions are provided in the main README, but there are no specific copy-paste invocation examples for this skill itself within the skill's documentation.
安装
npx skills add openai/skills通过 npx 运行 Vercel skills CLI(skills.sh)— 需要本地安装 Node.js,以及至少一个兼容 skills 的智能体(Claude Code、Cursor、Codex 等)。前提是仓库遵循 agentskills.io 格式。
质量评分
类似扩展
Figma Code Connect
98创建和维护 Figma Code Connect 模板文件，将 Figma 组件映射到代码片段。当用户提及 Code Connect、Figma 组件映射、设计到代码的转换，或要求创建/更新 .figma.ts 或 .figma.js 文件时使用。
Generate Project Plan
98从 PRD 和代码库上下文生成 FigJam 项目计划板。交互式流程：研究 → 提出各部分 → 各部分深入研究 → 各部分内容 + 块形状建议 → 创建 FigJam → 骨架 → 填充 → 图表 → 收尾。每个内容块（部分、嵌套部分、介绍性标注、表格、多列文本、粘滞列、图表部分、元数据条）都有自己的子技能参考文件。在用户要求“在 FigJam 中创建项目计划”、“交互式项目计划”、“/generate-project-plan”或提供 PRD 并希望逐部分确认内容 + 渲染时使用。
Typescript Advanced Types
100Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.
Validate Plugin
100Validate a Claude Code plugin structure, frontmatter, and MCP tool references
Migrate Validate
100Validate pending migrations for foreign key consistency, rollback safety, and best practices
Lean Ctx
100AI 代理的上下文运行时 — 包含 59 个 MCP 工具、10 种读取模式、95+ 种 shell 模式、支持 18 种语言的 tree-sitter AST。将 LLM 上下文压缩高达 99%。用于读取文件、运行 shell 命令、搜索代码或探索目录。如果不存在，则自动安装。