Skip to content
cccskills
FreePublished on GitHub

design-critique

Review a Figma design, screenshot, or written description for usability, visual hierarchy, consistency, and accessibility. Receive specific findings, explanations, and prioritized improvements, with feedback tailored to the design stage and intended users.

OriginalShow the original description

Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish.

Works withFigma
See how to install

Good for

  • Reviewing an early screen design
  • Checking navigation and onboarding usability
  • Finding inconsistent colors, spacing, and typography
  • Prioritizing accessibility improvements before final polish

Files included (1)

  • SKILL.md3.8 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

/design-critique

If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.

Get structured design feedback across multiple dimensions.

Usage

/design-critique $ARGUMENTS

Review the design: @$1

If a Figma URL is provided, pull the design from Figma. If a file is referenced, read it. Otherwise, ask the user to describe or share their design.

What I Need From You

  • The design: Figma URL, screenshot, or detailed description
  • Context: What is this? Who is it for? What stage (exploration, refinement, final)?
  • Focus (optional): "Focus on mobile" or "Focus on the onboarding flow"

Critique Framework

1. First Impression (2 seconds)

  • What draws the eye first? Is that correct?
  • What's the emotional reaction?
  • Is the purpose immediately clear?

2. Usability

  • Can the user accomplish their goal?
  • Is the navigation intuitive?
  • Are interactive elements obvious?
  • Are there unnecessary steps?

3. Visual Hierarchy

  • Is there a clear reading order?
  • Are the right elements emphasized?
  • Is whitespace used effectively?
  • Is typography creating the right hierarchy?

4. Consistency

  • Does it follow the design system?
  • Are spacing, colors, and typography consistent?
  • Do similar elements behave similarly?

5. Accessibility

  • Color contrast ratios
  • Touch target sizes
  • Text readability
  • Alternative text for images

How to Give Feedback

  • Be specific: "The CTA competes with the navigation" not "the layout is confusing"
  • Explain why: Connect feedback to design principles or user needs
  • Suggest alternatives: Don't just identify problems, propose solutions
  • Acknowledge what works: Good feedback includes positive observations
  • Match the stage: Early exploration gets different feedback than final polish

Output

## Design Critique: [Design Name]

### Overall Impression
[1-2 sentence first reaction — what works, what's the biggest opportunity]

### Usability
| Finding | Severity | Recommendation |
|---------|----------|----------------|
| [Issue] | 🔴 Critical / 🟡 Moderate / 🟢 Minor | [Fix] |

### Visual Hierarchy
- **What draws the eye first**: [Element] — [Is this correct?]
- **Reading flow**: [How does the eye move through the layout?]
- **Emphasis**: [Are the right things emphasized?]

### Consistency
| Element | Issue | Recommendation |
|---------|-------|----------------|
| [Typography/spacing/color] | [Inconsistency] | [Fix] |

### Accessibility
- **Color contrast**: [Pass/fail for key text]
- **Touch targets**: [Adequate size?]
- **Text readability**: [Font size, line height]

### What Works Well
- [Positive observation 1]
- [Positive observation 2]

### Priority Recommendations
1. **[Most impactful change]** — [Why and how]
2. **[Second priority]** — [Why and how]
3. **[Third priority]** — [Why and how]

If Connectors Available

If ~~design tool is connected:

  • Pull the design directly from Figma and inspect components, tokens, and layers
  • Compare against the existing design system for consistency

If ~~user feedback is connected:

  • Cross-reference design decisions with recent user feedback and support tickets

Tips

  1. Share the context — "This is a checkout flow for a B2B SaaS" helps me give relevant feedback.
  2. Specify your stage — Early exploration gets different feedback than final polish.
  3. Ask me to focus — "Just look at the navigation" gives you more depth on one area.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Review a design or web page against WCAG 2.1 AA, an accessibility standard. Organize findings on contrast, keyboard access, forms, and screen reader behavior, with severity levels and practical recommendations for fixes.

  • Review accessibility before design handoff
  • Check text and interface color contrast
  • Review keyboard navigation and focus behavior
TencentCloud/Octop9.9KUpdated Oct 18, 2026

akshare-data

FreeSummary

Retrieve financial data for Chinese markets and selected global markets using akshare-cli. Find stock prices, fund values, exchange rates, economic indicators, and financial news, then extract recent records or save results in common file formats.

  • Retrieve historical prices for Chinese, Hong Kong, or US stocks
  • Check fund and ETF net asset values
  • Look up exchange rates and economic indicators
TencentCloud/Octop9.9KUpdated Oct 18, 2026

architecture

FreeSummary

Compare technology options, review a system design, or plan a new component from requirements and constraints. The skill organizes the reasoning into an architecture decision record, a document covering alternatives, trade-offs, consequences, and next steps.

  • Compare technologies before choosing one
  • Document the reasoning behind a design decision
  • Review a proposed system design
TencentCloud/Octop9.9KUpdated Oct 18, 2026

bo-process-doc

FreeSummary

Turn existing or proposed business processes into reusable standard operating procedures. Organize steps, roles, conditions, and known exceptions while marking missing details, producing clear handover documents without inventing approvals or responsibilities.

  • Turning workflow notes into a standard operating procedure
  • Preparing process documentation for a handover
  • Clarifying assignment, execution, and review responsibilities
TencentCloud/Octop9.9KUpdated Oct 18, 2026

Analyze waiting, rework, and handoff waste in business processes using the facts provided. It proposes concrete improvements and, when verification is needed, defines measurement formulas and the minimum records required to assess specific issues.

  • Reviewing waiting and rework in an existing workflow
  • Requesting a fixed number of concrete improvement suggestions
  • Defining records to distinguish processing time from waiting
TencentCloud/Octop9.9KUpdated Oct 18, 2026

Assess operational risks in processes, projects, or suppliers using provided evidence. Separate observed facts from possible consequences, propose practical responses, and prepare concise summaries or risk registers without treating unknown controls as confirmed gaps.

  • Assess risks in business processes
  • Review operational risks in projects or suppliers
  • Prepare a risk register
TencentCloud/Octop9.9KUpdated Oct 18, 2026

See all skills by TencentCloud

Report a problem with this skill