L1 AI Design Review
PaperMoonuu/Design-workflow-skills
L1 × AI 设计评审：对已完成的单页、局部 UI 设计稿进行小型迭代评审，识别影响面、状态遗漏、文案与一致性风险，并给出 P0/P1/P2 建议和验收清单。用户提供 Figma 链接、截图、前后设计稿或可评审原型，并要求设计走查、风险评审或开发前 UI 检查时使用；不用于设计前方案预检、完整多页面流程或 L2 开发交付。
Critique and review Figma designs to ensure alignment with Chromium codebase components, tokens, and structure.
Install Figma Design Review
$ npx skills add nwjs/chromium.src --skill figma-design-review -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install nwjs/chromium.src figma-design-review --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/nwjs/chromium.src.git skills-src && mkdir -p .claude/skills && cp -r skills-src/agents/projects/chrome-design-system/skills/figma-design-review .claude/skills/figma-design-review && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "figma-design-review" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/figma-design-review into .claude/skills/figma-design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-design-review", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/figma-design-reviewType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add nwjs/chromium.src --skill figma-design-review -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install nwjs/chromium.src figma-design-review --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nwjs/chromium.src.git skills-src && mkdir -p .agents/skills && cp -r skills-src/agents/projects/chrome-design-system/skills/figma-design-review .agents/skills/figma-design-review && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "figma-design-review" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/figma-design-review into .agents/skills/figma-design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-design-review", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add nwjs/chromium.src --skill figma-design-review -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install nwjs/chromium.src figma-design-review --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nwjs/chromium.src.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/agents/projects/chrome-design-system/skills/figma-design-review .cursor/skills/figma-design-review && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "figma-design-review" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/figma-design-review into .cursor/skills/figma-design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-design-review", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/nwjs/chromium.src.git --path agents/projects/chrome-design-system/skills/figma-design-review--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add nwjs/chromium.src --skill figma-design-review -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install nwjs/chromium.src figma-design-review --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nwjs/chromium.src.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/agents/projects/chrome-design-system/skills/figma-design-review .gemini/skills/figma-design-review && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "figma-design-review" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/figma-design-review into .gemini/skills/figma-design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-design-review", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install nwjs/chromium.src figma-design-reviewInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add nwjs/chromium.src --skill figma-design-review -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/nwjs/chromium.src.git skills-src && mkdir -p .github/skills && cp -r skills-src/agents/projects/chrome-design-system/skills/figma-design-review .github/skills/figma-design-review && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "figma-design-review" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/figma-design-review into .github/skills/figma-design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-design-review", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add nwjs/chromium.src --skill figma-design-review -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install nwjs/chromium.src figma-design-review --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nwjs/chromium.src.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/agents/projects/chrome-design-system/skills/figma-design-review .opencode/skills/figma-design-review && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "figma-design-review" agent skill from https://github.com/nwjs/chromium.src/tree/main/agents/projects/chrome-design-system/skills/figma-design-review into .opencode/skills/figma-design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-design-review", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
figma-design-review- GitHub stars
- 160
- Token cost
- ~1.5k tokens
- SKILL.md length
- 750 words
- Files
- 3
- Skills in repo
- 64
- Repo updated
- First seen
- Licence
- BSD-3-Clause
At a glance
Critique and review Figma designs to ensure alignment with Chromium codebase components, tokens, and structure.
- Works in 5 steps: Fetch the Design Context → Identify and Read Component Specifications → Analyze and Compare → …
- The user asks to critique
- SKILL.md covers Prerequisites and Review Workflow
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Figma Design Review is an agent skill from nwjs/chromium.src. Critique and review Figma designs to ensure alignment with Chromium codebase components, tokens, and structure. Use when the user asks to critique, review, or audit a design, check alignment with code, or compare a Figma node against component specifications or coding standards.
Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `README.md`).
It sits in Media & Creative, covering Design review and critique and Code quality. It works with Figma. The repository describes itself as: Chromium codebase with NW.js modifications. Based on https://chromium.googlesource.com/chromium/src.git. The licence is BSD-3-Clause.
When your agent uses it
- The user asks to critique
- Check alignment with code
- Compare a Figma node against component specifications
- Coding standards
Example prompts
- “/figma-design-review”
Workflow steps
5 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 7b52561. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Figma Design Review loads about 1.5k tokens when it runs. Until then it costs about 75 tokens; SKILL.md has 750 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from nwjs/chromium.src at commit 7b52561, republished under its BSD-3-Clause licence (© nwjs). 750 words, ~1,458 tokens.
Download SKILL.mdSave it as
.claude/skills/figma-design-review/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- figma-design-review
- description
- Critique and review Figma designs to ensure alignment with Chromium codebase components, tokens, and structure. Use when the user asks to critique, review, or audit a design, check alignment with code, or compare a Figma node against component specifications or coding standards.
- metadata.author
- Chrome Design System Team
Figma Design Review
This skill provides a structured workflow for reviewing a Figma design (node or page) and critiquing its alignment with the existing codebase component specifications. It helps bridge the gap between design and implementation by identifying hardcoded values, raw icon usages instead of proper components, and structural mismatches.
Prerequisites
- Figma MCP Server: Must be active and configured in the workspace context to fetch designs and metadata.
- Chromium Repository: This skill should be executed from inside the root
directory of the Chromium repository source code (
//src/).
Review Workflow
When asked to review a Figma design for code alignment, follow these steps sequentially:
1. Fetch the Design Context
Use the get_design_context tool on the provided Figma URL or node ID.
- Pay close attention to the generated React/Tailwind code output as it represents the node's structure.
- Look for generic
<div>wrappers versus named components. - Check for hardcoded
classNamevalues versus design tokens (e.g.,var(--desktop/sys/surface)). - Note any raw image/mask constructions.
2. Identify and Read Component Specifications
Identify the main UI components used in the design (e.g., Buttons, Dialogs, Radio Buttons, Text Fields).
- Look up Chorme Design System component specs using the
chrome-componentsskill. - Read the identified
_Spec.mdfiles usingread_fileto understand how the components are implemented in the target codebase (WebUI and C++ Views). - Crucial Component Mapping Rule:
- The design context from Figma may output complex nested
divs, SVGs, or image masks (imgMask,imgIcon) instead of clean component tags. This happens when Figma Code Connect is missing, causing the API to decompile the visual layers of a component. - Do not assume these are "raw custom-drawn shapes" if the component
instance name, data name, or ID in the design context (e.g.
data-name="RadioButtons",data-name=".base.Buttons") matches an official component defined in the spec files. - Cross-reference the Figma component name/ID with Section 1 of the
component's
_Spec.mdfile to identify the true target components (e.g.,<cr-radio-button>for WebUI,views::RadioButtonfor C++). - Don't report this in the feedback, and don't advise on the use of Figma Code Connect.
- The design context from Figma may output complex nested
- Crucial Information to Extract from Specs:
- Standard tokens used for colors, spacing, outlines, and fonts.
- Handling of interactive states (hover, focus, disabled).
- Use of specific variant classes (e.g.,
.action-button,.tonal-button). - Architectural constraints (e.g., C++ handles shadows natively).
Show full SKILL.md (381 more words)Show less
3. Analyze and Compare
Cross-reference the Figma structure (from Step 1) with the code specifications (from Step 2). Look for:
- Raw Elements vs. System Components
- Audit: Is the design using raw, custom-drawn frames to define a UI element when an official component should be used instead? (Ensure you distinguish between actual custom-drawn shapes and a decompiled library component due to missing Code Connect, as detailed in Step 2).
- Resolution: Map custom-drawn elements to the correct system components. For decompiled library components, advise to ignore the visual HTML structure and implement the official code component mapped in the spec.
- Token Usage
- Audit: Are static hex codes, spacing, and radius values being used instead of defined tokens? Are tokens aligning with what the code specs dictate?
- Resolution: Call out any uses of static values. Recommend Figma variables that could be used instead that semantically map to variables in code. Reference the Chrome Design System token mapping.
- Manual Overrides
- Audit: Is the design applying custom styling when the codebase handles that at the component level?
- Resolution: Advise to avoid custom styling if it's already handled at the component level.
- Variant Usage
- Audit: Are the correct variants being mapped accurately according to their design intent and usage guidelines?
- Resolution: Advise how variants map to what's in code.
- Structure Alignment
- Audit: Is the Figma frame adding content inside components that can map to slots in the code implementation?
- Resolution: Map these to standard slots supported by the parent component.
For example, for
<cr-dialog>, slot custom footers intoslot="footer".
4. Provide Critique and Advice
Structure your final output clearly for the user. For each identified issue, provide:
- Critique: Describe what is currently happening in the Figma design and why it is inconsistent or problematic.
- Advice for Alignment: Provide actionable advice separated by:
- Figma: What the designer should change in the Figma file.
- Code Impact: How this aligns (or misaligns) with the target frameworks
(e.g., WebUI /
<cr-button>or C++ Views /views::RadioButton).
Important Output Note: Always prioritize actionable advice that brings the Figma structure closer to the code structure. Explicitly state when a Figma component should be swapped, or when a manual style overrides should be ignored by engineers.
5. Save the output
Save the output in a directory out/<ComponentName>_Audit.md in the same
directory as this skill.
© nwjs, BSD-3-Clause. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files in agents/projects/chrome-design-system/skills/figma-design-review of nwjs/chromium.src.
- SKILL.md
- .gitignore
- README.md
Open the folder on GitHubat commit 7b52561
Compare with similar skills
Figma Design Review next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Figma Design Review this skillnwjs/chromium.src | 160 | — | ~1.5k | Automated safety check: Pass | BSD-3-Clause | |
| L1 AI Design ReviewPaperMoonuu/Design-workflow-skills | 316 | — | ~492 | Automated safety check: Pass | None | |
| Design Critiquemohitagw15856/pm-claude-skills | 1.4k | — | ~1.5k | Automated safety check: Pass | MIT | |
| Figma Design Critique Pmmohitagw15856/pm-claude-skills | 1.4k | — | ~1.1k | Automated safety check: Pass | MIT | |
| UX Audit WalkthroughAIPexStudio/AIPex | 1.3k | — | ~1.9k | Automated safety check: Pass | MIT | |
| Cds Design To Codecoinbase/cds | 506 | — | ~4.9k | Automated safety check: Pass | Apache-2.0 |
Similar skills
Design Critique
mohitagw15856/pm-claude-skills
Give structured, constructive feedback on any design using UX frameworks.
Figma Design Critique Pm
mohitagw15856/pm-claude-skills
Runs a PM-perspective design critique focused on product outcomes and user goals, not aesthetics.
UX Audit Walkthrough
AIPexStudio/AIPex
Walks a Figma prototype or live webpage screen by screen and scores it against four minimalist usability principles.
Cds Design To Code
coinbase/cds
Turn Figma designs into CDS React (cds-web) or React Native (cds-mobile) code.
Cleanup
simstudioai/sim
Run all code quality skills — effects, memo, callbacks, state, React Query, emcn design review, url-state, comments, and test-audit — analyzing in parallel, then applying fixes sequentially
More from nwjs/chromium.src
All 64 skills in this repoAnalyzing SQL Traces
nwjs/chromium.src
Extracts raw trace data from Perfetto traces, runs arbitrary SQL queries for custom follow-up analysis, and applies expert cognitive principles (Tiered Flow Analysis, Semantic Mismatch, Redundancy)…
Chrome Performance Optimizer
nwjs/chromium.src
Autonomous multi-agent performance optimization loop for Chromium and V8.
Automated Tracing
nwjs/chromium.src
Automated Tracing & Performance Telemetry in Chromium using Perfetto and Telemetry benchmarks.
Chrome Releases
nwjs/chromium.src
Queries Chrome commit, version, release, and milestone metadata.
Chromium Docs
nwjs/chromium.src
Search and reference Chromium documentation from the local docs index, including design docs, APIs, and development guides.
Gn Deps Debugging
nwjs/chromium.src
Diagnose Chromium GN dependency and include-visibility failures, including BUILD.gn deps/publicdeps, DEPS include rules, private headers, and circular dependencies.
Related
Works with
Questions about Figma Design Review
What does Figma Design Review do?
Critique and review Figma designs to ensure alignment with Chromium codebase components, tokens, and structure. src. Critique and review Figma designs to ensure alignment with Chromium codebase components, tokens, and structure.
When should I use Figma Design Review?
Figma Design Review fits situations like: the user asks to critique; check alignment with code; compare a Figma node against component specifications; coding standards.
How do I install Figma Design Review in Claude Code?
Run `npx skills add nwjs/chromium.src --skill figma-design-review -a claude-code`. Or copy the skill folder (agents/projects/chrome-design-system/skills/figma-design-review in nwjs/chromium.src) into .claude/skills/figma-design-review in your project. Claude Code loads it when a task matches its description.
How do I install Figma Design Review in Codex?
Run `npx skills add nwjs/chromium.src --skill figma-design-review -a codex`. Or copy the skill folder (agents/projects/chrome-design-system/skills/figma-design-review in nwjs/chromium.src) into .agents/skills/figma-design-review in your project. Codex loads it when a task matches its description.
Can I use Figma Design Review in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add nwjs/chromium.src --skill figma-design-review -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/figma-design-review, .gemini/skills/figma-design-review, .github/skills/figma-design-review and .opencode/skills/figma-design-review in your project.
What does Figma Design Review need to run?
SKILL.md names no scripts, command-line tools or credentials: Figma Design Review is instructions for the agent only.
Does Figma Design Review access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Figma Design Review safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Figma Design Review use?
Figma Design Review is published under the BSD-3-Clause licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Figma Design Review use?
About 1.5k tokens (SKILL.md is roughly 5.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Figma Design Review?
Skills that share tags, products or a category with Figma Design Review: L1 AI Design Review (PaperMoonuu/Design-workflow-skills, 316 stars), Design Critique (mohitagw15856/pm-claude-skills, 1.4k stars), Figma Design Critique Pm (mohitagw15856/pm-claude-skills, 1.4k stars) and UX Audit Walkthrough (AIPexStudio/AIPex, 1.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Figma Design Review?
nwjs (a GitHub organization) maintains it in nwjs/chromium.src, which has 160 GitHub stars. The repository holds 64 skills in this directory. The repository was last updated on October 10, 2026.
Source: nwjs/chromium.src on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.