Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From team-shinchan
Compares Figma URL or mockup image against implementation code to detect UI mismatches in colors, layout, typography, spacing, and component structure.
npx claudepluginhub seokan-jeong/team-shinchan --plugin team-shinchanHow this command is triggered — by the user, by Claude, or both
Slash command
/team-shinchan:design-reviewThe summary Claude sees in its command listing — used to decide when to auto-load this command
# Design Review Command Compare a design source against its implementation code to detect visual mismatches in colors, layout, typography, spacing, and component structure. Supports **Figma URLs** (via Figma MCP API for exact values) and **image files** (visual analysis). See `skills/design-review/SKILL.md` for full documentation. ## Usage ## Examples
/design-reviewReviews UI files or components interactively for design, usability, code quality, and performance issues. Configures via sequential questions on focus, context, and platform.
/design-reviewConducts structured design review of module, feature, or system: maps boundaries, evaluates principles/anti-patterns/scalability, outputs score, strengths, concerns, recommendations, Mermaid diagram.
/design-reviewReviews visual design quality—layout, typography, spacing, colour, consistency—for provided URL or detected dev/deployed app, producing severity-ranked issues report with fixes.
/design-reviewAudits designs for accessibility, usability, visual consistency, content, and motion via visual AI critique and code review. Accepts HTML files, Figma URLs, previews, or screenshots.
/design-reviewReviews and interactively edits design_doc.json: displays formatted overview, components, patterns, ADRs, and interfaces; supports modifications via prompts.
/design-reviewReviews design document by resolving open questions, finalizing tasks, and advancing status from Draft to Review or Accepted.
Share bugs, ideas, or general feedback.
Compare a design source against its implementation code to detect visual mismatches in colors, layout, typography, spacing, and component structure. Supports Figma URLs (via Figma MCP API for exact values) and image files (visual analysis).
See skills/design-review/SKILL.md for full documentation.
/team-shinchan:design-review [design source] [implementation path]
/team-shinchan:design-review "https://www.figma.com/design/abc123/MyApp?node-id=1-234" "./src/components/Login.tsx"
/team-shinchan:design-review "./mockup.png" "./src/components/Login.tsx"
/team-shinchan:design-review "./designs/homepage.png" "./src/pages/Home/"
/team-shinchan:design-review "https://www.figma.com/design/abc123/MyApp"