design-critique

design-critique is a skill for Claude Code from TencentCloud/Octop. It costs 60 tokens per session (917 once invoked), scanned A, a copy of design-critique, MIT.

A structured review of a visual design for usability, hierarchy, and consistency. It can work from a Figma link, screenshot, file, or detailed description.

In plain words
What is it for?
Use it to assess first impressions, navigation, interactive elements, visual emphasis, whitespace, typography, and unnecessary steps at any design stage.
Why use it?
Design problems are easier and cheaper to fix before implementation, but informal feedback can miss important areas. This review checks how clearly people can understand and use the screen.

Skill for Claude Code

Written for Claude Code: argument-hint in frontmatter. Also seen: positional $N argument.

Needs its repository: it reads a path above its own folder, which exists only inside the repository. The line is If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md)..

Good fit Use it to assess first impressions, navigation, interactive elements, visual emphasis, whitespace, typography, and unnecessary steps at any design stage.

Compare 6 skills from other repositories ↓
About the project

Octop is a self-hosted, multi-user AI assistant that runs multiple specialized agents and connects them to chat interfaces, tools, and external services. It is for individuals, families, and teams who want a locally operated assistant with shared experts and persistent capabilities. Catalogue add-ons extend its agent and assistant workflows.

TencentCloud/Octop · 9,540 stars · on GitHub · octop.cloud

Install

Getting it into your agent

It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.

Clone the repo
git clone --depth 1 https://github.com/TencentCloud/Octop
agentmods
npx agentmods add skills/tencentcloud/octop/design-critique

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for design-critique

README.md
[![agentmods](https://agentmods.dev/badge/skills/tencentcloud/octop/design-critique/github.svg)](https://agentmods.dev/skills/tencentcloud/octop/design-critique)
Your own site
<a href="https://agentmods.dev/skills/tencentcloud/octop/design-critique"><img src="https://agentmods.dev/badge/skills/tencentcloud/octop/design-critique/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for design-critique

Your own site · 80×15
<a href="https://agentmods.dev/skills/tencentcloud/octop/design-critique"><img src="https://agentmods.dev/badge/skills/tencentcloud/octop/design-critique.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 60 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 917 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin 100% copy Near-identical to another mod in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00060 $0.00917
Opus 5.5 $0.00024 $0.00367
Sonnet 5.5 $0.00012 $0.00183
Haiku 4.5 $0.00006 $0.00092

Measured today against content hash 3a4f260eb9f6, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

design-critique scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured today.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

100% identical to design-critique — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

src/octop/infra/agents/experts/library/design/skills/design-critique/SKILL.md · 119 lines

How it starts

The opening of the file, as written. The whole thing — 119 lines — stays where its author put it; the contents beside it link to each section on GitHub.

/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]

Read the full file on GitHub · 119 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. today First seen · 119 lines · 60 tokens per session scan A 3a4f260eb9f6

Subscribe to this mod's changes

design-critique is a skill published in the GitHub repository TencentCloud/Octop (9,540 stars, last pushed yesterday), licensed MIT. It adds 60 tokens to every session and 917 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 100% identical to design-critique, differing in 0 lines, and is treated as a copy.

Related

Other skills, from other repositories

sage-review

Deep, platform-neutral code review for PRs and CRs in ONE thorough single pass — design reasoning (Problem Worth Solving & Solution Fit) as one dimension alongside the 9 code-level dimensions, with chain-of-consequences, self-critique, and draft-only comments. The single app-owned source of truth.

kirodotdev/KiroCrew · 68 tokens

design-critique

Run a heuristic evaluation of a UI design (image, HTML, Figma, URL, or flow) the way an experienced designer would. Evaluates 4 categories (Visual & hierarchy, Usability & interaction, Accessibility, Content) using recognized frameworks, NN/g 0-4 severity, and evaluability-aware prioritization that never judges what…

kirodotdev/KiroCrew · 131 tokens

dashboard-template

Kiro Crew repo only: load this when a task will author or change a dashboard page. A page never ships alone: the same PR carries its TypedDict contract, its provider, and a parity test that the two agree. Scaffold all four from one field list; read numbers from an existing fold, never type them.

kirodotdev/KiroCrew · 68 tokens

theme-pack-authoring

Build, validate, and install Kiro Crew theme packs -- pack anatomy, the 56-variable palette, role-tagged fonts, the overrides.css allowlist (what installs vs what actually renders), and the install-verify cycle. Use when the user wants to create or edit a theme pack.

kirodotdev/KiroCrew · 64 tokens

image-authoring

Author images and diagrams as code — SVG, Pillow, Excalidraw, mermaid. Load when asked to draw, illustrate, or make an image, icon, logo, poster, or diagram.

kirodotdev/KiroCrew · 45 tokens

a2ui

Make a reply easier to read and act on with rich blocks inside ordinary Markdown — a choice the user picks from, a form that collects several answers, a procedure as steps with warnings in place, a callout, a Mermaid diagram, a weather card, a live clock or countdown, and a dashboard of gauges for a system snapshot, a…

Prism-Shadow/penguin-harness · 173 tokens