Publisher: OpenAI · Editorial profile by AI Tools Ratings · Review method
Not runtime tested; source-document review only. No security certification.
What task is this skill designed for?
Implement one approved Figma frame using the website’s existing button, typography and spacing components.
What input and output should you expect?
Input: An exact Figma frame or node URL, the target repository, the intended state and the design-system components that should be reused.
Output: Expected, not independently tested: local implementation changes and a comparison against the supplied frame. This profile describes design retrieval and code implementation, not a promise to edit the original Figma file.
What does it need to run?
An accessible Figma MCP integration, permission to read the target design and a working application checkout. Connector setup and available tools depend on the current agent environment; the skill does not bundle account access.
Authored for Codex in the OpenAI skills repository. This directory has not independently installed or executed the skill.
How should you approach installation?
- Inspect the pinned source and Figma setup references.
- Connect Figma through the agent’s supported integration without sharing credentials in chat.
- Start with a read-only frame retrieval and a local test component before granting wider project scope.
Installation guide: discovery, dependencies and runtime checks
What files, accounts or data can it access?
Reads design metadata, screenshots, variables and assets through the connected Figma account and can write project files. Confirm that exported assets may be used in the target product.
What does the skill cost?
Skill source has no listed purchase price. Figma plan access, connector availability and agent usage are separate requirements.
What are its limits and alternatives?
A node link must identify the correct variant and state. Design metadata alone does not establish responsive behavior, keyboard handling or loading states. Generated React examples may require adaptation to a different framework.
Use a screenshot-only visual brief when no design metadata exists, accepting that measurements and tokens will be less certain. Choose this skill when an exact Figma node and an existing codebase are available.
What could you ask in a small trial?
Try this with a small sample:
Implement this frame in the existing application. Retrieve its design context and screenshot, reuse our current components, and flag missing responsive or interaction states before making assumptions.
How would you verify the result?
- Confirm the fetched frame and variant match the supplied link.
- Compare the implementation at the intended viewport and inspect component reuse.
- Test interaction and keyboard states separately from visual comparison.
Use a baseline and record acceptance evidence before treating a successful task as a reliable workflow.
Which source and license were checked?
Read the reviewed SKILL.md at its pinned commit · Complete reviewed folder
Repository and current publisher guidance
Checked:
Apache-2.0 — identified in skills/.curated/figma/LICENSE.txt at the reviewed commit. Third-party assets and dependencies may have separate terms. License evidence
Version details and review scope
Source: openai/skills/skills/.curated/figma
Reviewed commit: 49f948faa9258a0c61caceaf225e179651397431
SKILL.md SHA-256: 5b11f7c8d0ce4c047b401323e7b8fe6559bd3162a3397bf5248634a5444609d5
Source-document review. Source text and stated dependencies were inspected for this profile. Referenced code was not comprehensively audited, no runtime test was performed, and source files are not mirrored here.