菜单
Generic skill — spec, reference, api, build, tests. Portable layer only. Do not invoke when the host ships a binding skill. Do not use for updates to an existing component or token sync only.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
基于 SOC 职业分类
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/mckinsey/quantumblack-design-system --skill figma-to-react-code命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
Create or update a QBDS Figma Code Connect mapping as a template file (`code-connect/<name>.figma.ts`, MCP `figma` API, published via the Figma CLI). Use when adding a new mapping, wiring a Figma node URL, or mapping Figma component properties to a React component's API — including Figma-only props (show* booleans, slots) with no matching React prop. Triggers — "add a code connect", "create a Figma mapping", "map this component to Figma", "code connect for <component>", or a figma.com node URL alongside work in code-connect/.
End-to-end QBDS skill — spec through registry for a new component from Figma. Use when src/components/ui/<name>.tsx does not exist. Triggers — "add a new component", "create the <name> component", "build <name> from Figma", or a figma.com URL for a missing ui file. Do not use for updates (figma-parity), token sync (figma-token-sync), or Code Connect-only edits (code-connect).
Match Figma specs when implementing or reviewing QBDS UI — tokens, layout, all variants/states, Code Connect, demos, registry. Use when implementing, updating, or reviewing a QBDS component against a Figma URL/node or the library spec. Triggers — "implement this Figma component", "match the Figma spec", "figma parity", "build this component from Figma", or a figma.com URL alongside work in src/components/ui/, demos, registry.json, or code-connect/.
| name | figma-to-react-code |
| description | Generic skill — spec, reference, api, build, tests. Portable layer only. Do not invoke when the host ships a binding skill. Do not use for updates to an existing component or token sync only. |
| disable-model-invocation | true |
Turn a design-tool component set into a shippable React component. Run steps in order. Each step has one concern.
For updates to an existing component, use the host parity/review skill.
spec → reference → api → build → tests → {host exit gate}
| Step | Description | Doc |
|---|---|---|
spec | Fetch the component set; alignment table + variant × state matrix | spec.md |
reference | Library recipe, primitive docs, sibling | reference.md |
api | Prop table + part list — show before build | props.md + composition.md |
build | Implement the component file | build.md |
tests | Functional smoke + behaviour | tests.md |
Ask before continuing when: a design axis has no sensible React expression, sibling contradicts library naming, or a new token is needed.