Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

design-review — Claude Code skill: what it does, how to install

Audits UI visually, fixes flaws with atomic commits, and captures before/after screenshots. Useful for tightening shipped interface code right before launch.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill design-review -a claude-code
Open on GitHub

What design-review does

This skill embodies the designer who codes workflow. The agent audits frontend screens, identifies visual flaws, and modifies CSS or markup directly. Every correction lands in an atomic git commit accompanied by before-and-after screenshots. You can verify every single UI change immediately.

The entry comes from Garry Tan's gstack repository and sits under the creative-direction category with design-system mode. It hooks into triggers like visual audit and pre-launch design checks.

Keep in mind that this entry only registers the skill so the agent discovers it during task planning. Running the complete workflow with its original helper scripts and assets requires installing the upstream gstack bundle into your agent's skills directory.

What it helps with

  • Audit interface elements for visual discrepancies before shipping
  • Apply design fixes through individual atomic commits
  • Capture before and after screenshots to confirm styling changes

Example prompts for the agent

  • Run design-review on the landing page before launch
  • Perform a visual audit of the dashboard and show before after screenshots
  • Do a pre launch design check on the checkout flow

How to install design-review

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill design-review -a claude-code

2Manually: put the files in place

~/.claude/skills/design-review/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/design-review/

From the same set39

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs d3-visualization nexu-io This skill teaches the agent to create interactive D3.js visualizations. Use it to generate charts for dashboards, reports, and data-rich prototypes. Claude Code CX Codex Cursor +1 3,100installs

Similar

agentation-self-driving benjitaylor Runs autonomous design critiques in a visible browser window and leaves feedback notes directly through the Agentation toolbar. Claude Code CX Codex Cursor +1 7,000installs dfam-check earthtojake Measures mesh files against Design for Additive Manufacturing rules to evaluate printability before slicing or running CAD regeneration. Claude Code CX Codex Cursor +1 4,100installs popular-web-designs Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md) 54 real-world design systems (Stripe, Linear, Vercel, Claude) with CSS tokens, typography, and components for building pages styled after known brands. Claude Code CX Codex Cursor +1 914installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. Claude Code 979,543installs

Questions about design-review

How do I install design-review in Claude Code?

Run npx skills add nexu-io/open-design --skill design-review -a claude-code in your terminal. The skill file is placed at ~/.claude/skills/design-review/SKILL.md.

What does the design-review skill do?

It directs the agent to act as a designer who codes: auditing UI components visually, committing fixes atomically, and generating before-and-after screenshots.

Are extra files required for the full workflow?

Yes. This repository entry only registers the skill for planning. To use original scripts and assets, install the upstream gstack bundle into your agent's skills directory.

Source text

SKILL.md · Apache-2.0 
---
name: design-review
description: |
  Designer Who Codes: visual audit then fixes with atomic commits and before/after screenshots. Useful for tightening shipped UI before launch.
triggers:
  - "design review"
  - "visual audit"
  - "before after"
  - "pre launch design check"
od:
  mode: design-system
  category: creative-direction
  upstream: "https://github.com/garrytan/gstack"
---

# design-review

> Curated from Garry Tan (gstack).

## What it does

Designer Who Codes: visual audit then fixes with atomic commits and before/after screenshots. Useful for tightening shipped UI before launch.

## Source

- Upstream: https://github.com/garrytan/gstack
- Category: `creative-direction`

## How to use

This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and references, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/garrytan/gstack
```

Then ask the agent to invoke this skill by name (`design-review`) or with
one of the trigger phrases listed in this skill's frontmatter.

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor