What does this skill do, and when should you use it?
This skill creates or updates full Figma pages, screens, and views from source code or a description. It first analyzes the screen structure, then discovers and reuses published components, variables, and styles from the design system. Sections are assembled incrementally and checked with screenshots for clipping, overlap, placeholders, and incorrect variants. It requires a connected Figma MCP server and must be used alongside the figma-use skill.
Reads relevant source files or a screen description and identifies major sections and UI components; discovers components, variables, text styles, and effect styles through search_design_system or existing screens; uses use_figma to create a page wrapper, import design-system resources, and assemble component instances section by section; overrides component text properties; validates sections and the full screen with get_screenshot; and uses get_metadata plus targeted edits when updating an existing screen.
- A frontend developer needs to translate an existing web page into a Figma screen using the published design system.
- A designer needs to update an existing Figma screen so it matches the current code.
- A product team needs to build a landing page, pricing page, or content page in Figma from a written description.
- A design-system user needs new screens to remain linked to approved components, variables, spacing, radii, and styles.
How do you install this skill?
- Before execution, explicitly confirm the target Figma file, mutation scope, and whether deletion of temporary generate_figma_design output is authorized.
- The await-in-forEach example should be corrected or verified, and the skill should add post-failure state checks, reversible update strategies, and cleanup guidance.
- Core functionality depends on Figma MCP, the target file, and a published design system; verify reachability, permissions, and library completeness first.
- License, versioning, changelog, and maintenance responsibility are not clearly documented in the supplied material.
- Local filesystem
- MCP Server
Figma MCP serverfigma-use skill
In Codex, run $skill-installer figma-generate-design to install the curated skill, then restart Codex. The SKILL.md also requires loading figma-use, but the supplied material does not document a separate installation command for it.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/openai/skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/.curated/figma-generate-design" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Connect a Figma MCP server and provide a Figma file URL or file key, target-file context, and the screen's source code or description. Example triggers include build this landing page in Figma, create in Figma from code, and update the Figma screen to match code. Load figma-use before use_figma calls; the skill then builds sections incrementally and validates each section with screenshots.
What are this skill's strengths and limitations?
- Reuses design-system components, variables, and styles instead of relying on hardcoded colors and spacing.
- Supports both new screen creation and updates to existing Figma screens.
- Uses incremental section construction and screenshot validation to catch common layout and text problems.
- Keeps component instances linked to their source components for future updates.
- Requires a connected Figma MCP server.
- The target file needs a published design system or access to a team library.
- Users must provide target Figma context plus source code or a screen description.
- The supplied material provides no test suite, platform-validation results, or LICENSE.txt contents for this individual skill.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Figma Design System Screen Builder this page ✓ OpenAI · Official | 46 · Use with care | ★ 28k | 4mo ago | — |
| Figma Design System Builder ✓ OpenAI · Official | 49 · Use with care | ★ 28k | 4mo ago | — |
| UI/UX Consultation Guide | 56 · Use with care | ★ 113 | 1mo ago | Apache-2.0 |
| AnyDesign | 58 · Recommended | ★ 219 | 1mo ago | MIT |
| Figma Plugin API Operator ✓ OpenAI · Official | 47 · Use with care | ★ 28k | 4mo ago | — |
How did FollowSkills review this skill?
The skill clearly scopes usage, requires loading figma-use, requires the skillNames parameter, and describes atomic failed scripts; however, use_figma performs external creation, update, and deletion actions in Figma without a complete account of data flows, sensitive-data handling, confirmation boundaries, rollback, or least-privilege controls. The MCP dependency and official provenance are identifiable, so partial trust is warranted, but external side effects, limited recovery, and unknown licensing require deductions.
The workflow, design-system discovery strategy, incremental construction, screenshot validation, and error-recovery guidance are fairly specific. Static evidence contains no executable tests or CI coverage, depends on figma-use and Figma MCP availability, and includes a visible runnability issue: one variable-inspection example uses await inside a normal forEach callback. The score is therefore conservative and below the static ceiling.
Triggers, scope boundaries, non-fit cases, prerequisites, and the special web-app workflow are clearly described. However, the skill depends on a published design system, a target Figma file, and Figma MCP; it does not document Chinese-language support and provides no evidence that the core service is reachable from mainland-China networks. Environment-fit uncertainty causes a deduction.
SKILL.md has useful progressive structure covering boundaries, prerequisites, workflow, references, best practices, and recovery. agents/openai.yaml documents presentation metadata and the MCP dependency, while maintainers.yml provides a maintenance marker. Licensing is unknown, and there is no clear version, changelog, named maintenance responsibility, or update path; important rules also depend on external figma-use references.
The objective is clear and the proposed process could produce a Figma page from code or a description while preserving design-system instances and enabling visual review. Static review includes no representative outputs, execution records, or third-party verification. Results depend heavily on the availability and quality of matching components, variables, styles, and MCP access, so likely manual correction and static uncertainty justify a conservative score.
The source provides detailed procedures, code patterns, and recovery expectations, making some claims auditable. It contains no skill-specific test suite, CI coverage, committed outputs, or independent reproduction evidence, and the behavior of external figma-use and MCP services is not corroborated by the supplied material. Evidence strength is therefore limited.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →