What makes Design Review notable?

2.1K downloads. Trust evidence available

How should Design Review be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

Claim this agent

agentCLAWHUBUnverified

Design Review

Core pack — always active for visual work. Quality gate for UI, components, pages, layouts, or frontend work. Triggers on any visual/design task automaticall... Skill: Design Review Owner: aa-on-ai Summary: Core pack — always active for visual work. Quality gate for UI, components, pages, layouts, or frontend work. Triggers on any visual/design task automaticall... Tags: latest:1.1.0 Version history: v1.1.0 | 2026-03-23T21:56:30.749Z | auto - Expanded and updated reference documentation: alignment.md, motion.md, and typography.md received significant content improvements. -

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

2.1k

Updated

Oct 9, 2026

Version

1.1.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 2.1K downloads reported by the source. Last updated 10/9/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 9, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 9, 2026
Adoption signal: 2.1K downloadsadoption · observed Oct 9, 2026
Latest release: 1.1.0release · observed Mar 23, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s17c7rw6zqf32g9sv6mqgxjxhh83fa3a:design-review

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-aa-on-ai-design-review/snapshot"

Documentation

CLAWHUB

88,445 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: design-review
description: >
Core pack — always active for visual work. Quality gate for UI, components, pages,
layouts, or frontend work. Triggers on any visual/design task automatically.
Use before presenting work, during builds, and for design QA.
---

# Design Review Skill

## Core Pack — Always Active
This is a core skill. Apply it on ALL visual and frontend work, no exceptions. You do not need permission or a specific trigger to use this.

## When to Use
- Before presenting ANY visual or UX work.
- Treat this as a quality gate, not optional polish.
- Sub-agents doing design/frontend work MUST run this before announcing completion.

## Pre-Work: Read Before Building

### 1. Read the project's guidelines
- Read `guidelines.md` or equivalent design system doc first if it exists.
- Follow the project's existing components, tokens, and patterns before inventing anything.
- If no formal guidelines exist, inspect the existing product and match its logic.

### 2. Research before designing
- Check how similar tools solve the same problem before inventing a pattern.
- Use proven references when they exist.
- Quality bar references:
- UX Tools — editorial restraint, typography, calm hierarchy
- Inflight by Ridd — motion, depth, data viz polish
- Linear — dense information, excellent hierarchy, no noise
- Vercel dashboard — spacing, typography, dark mode discipline

### 3. Check design memory
- Read `memory/channels/{channel-name}.md` for prior design decisions.
- If memory says Aaron rejected a pattern, don't repeat it.
- If a project brain file is linked from channel memory, read that too.

## Aaron's Core Principles
- Restraint IS the design.
- Spacing is the #1 tell.
- Typography hierarchy > color for information architecture.
- Match references at pixel level before adding your own ideas.
- Existing patterns > new patterns.
- Interactive elements should feel polished, not dead.
- If the foundation is wrong, no polish fixes it.
- Good design is centripetal, not centrifugal.

## Reference Files
Read only what the task needs. Keep this SKILL lean, load detail on demand:

- `references/typography.md` — hierarchy, scale, pairing, measure
- `references/color.md` — restrained palettes, tinted neutrals, contrast, OKLCH
- `references/spacing.md` — spacing system, rhythm, grouping, layout density
- `references/motion.md` — timing, easing, reduced motion, interactive feel
- `references/anti-patterns.md` — patterns Aaron will clock instantly and reject

### For sub-agents
- Read the relevant reference files based on what you're building.
- New layout or dashboard? Read spacing + anti-patterns.
- Type-heavy screen? Read typography + spacing.
- Color or theming work? Read color + anti-patterns.
- Interactive polish? Read motion + anti-patterns.
- If in doubt, at minimum read spacing + anti-patterns.

## Pre-Flight Checklist
Run this EVERY TIME before presenting work to Aaron.

### Step 1: Visual verification
- [ ] Take a screenshot of th

_meta.json

{
  "ownerId": "kn7cedhqc0a3q0fn888hwshxfd838nt6",
  "slug": "design-review",
  "version": "1.1.0",
  "publishedAt": 1774302990749
}

references/alignment.md

# Visual Alignment & Composition Reference

## The Problem

agents place elements where they fit, not where they belong. text doesn't align across columns. spacing is inconsistent between similar elements. grids break their own rhythm. the result looks "off" even when every individual component is fine.

alignment is what separates "an agent built this" from "a designer built this." it's invisible when done right and immediately obvious when wrong.

## Alignment Principles

### everything aligns to something
every element on the page should share an edge or center with at least one other element. nothing floats randomly.

- text blocks in different sections should share the same left edge
- metrics in a row should baseline-align their numbers
- cards in a grid should have identical internal padding
- icons in a list should align to a consistent vertical axis

### fewer alignment points = cleaner layout
a page with 3 alignment points (left margin, content center, right margin) looks composed. a page with 12 different left edges looks chaotic.

count your alignment rails. if you have more than 4-5 on a page, something is wrong.

### the grid is the skeleton
pick a grid and commit to it. common choices:
- 12-column grid with consistent gutters (most flexible)
- 4-column at mobile, 8 at tablet, 12 at desktop
- simple max-width container with consistent padding

don't: mix a 3-column section with a 4-column section with a full-bleed section unless the rhythm is intentional.

## Symmetry

### symmetry = stability
symmetrical layouts feel balanced, trustworthy, professional. use for:
- dashboards and data-heavy pages
- forms and settings
- admin tools and internal products
- anywhere stability matters more than personality

### asymmetry = energy
asymmetrical layouts feel dynamic, editorial, opinionated. use for:
- landing pages and marketing
- portfolios and case studies
- anywhere you want the layout itself to communicate

### don't accidentally mix them
a page that's 90% symmetrical with one randomly asymmetrical section looks broken, not intentional. either commit to the grid or break it with purpose.

## Spacing Consistency

### the 4px/8px base unit
pick a base unit (4px or 8px) and derive ALL spacing from it:
- 4px: tight, detail-level (icon to label gap)
- 8px: small component spacing
- 12px: compact internal padding
- 16px: standard internal padding, gap between related items
- 24px: gap between components
- 32px: section separation (small)
- 48px: section separation (medium)
- 64px: section separation (large)
- 80-96px: major page divisions

### spacing communicates grouping
items that are closer together are perceived as related. items with more space between them are perceived as separate groups. this is Gestalt proximity — the most powerful layout tool.

- related items: 8-16px apart
- components within a section: 16-24px apart
- sections: 32-64px apart
- major page divisions: 64-96px apart

don't: use the same spacing everywhere. if everyt

references/anti-patterns.md

# Anti-Patterns Reference

## Strategic Mistakes
- Centrifugal design: choices made to feel different or branded rather than clearer or better.
- Decoration used to compensate for weak structure.
- New patterns invented when the product already has a good one.
- Polishing a bad foundation instead of rebuilding the layout.

## Typography Mistakes
- Inter, Roboto, Arial, or system font defaults as unexamined autopilot. agents reach for these every time. pick a distinctive font that matches the product's personality. there are thousands of fonts — using the default is a non-decision.
- Same font on every project. if two different products use the same typeface, one of them chose wrong.
- Mushy scales with too many neighboring sizes.
- Large type trying to rescue weak hierarchy.
- Monospace used as a shortcut for "tech" personality.
- Too many font families fighting for attention (but two is usually right: one display + one body).

## Color Mistakes
- Purple gradients, cyan glows, and generic AI-saas palettes.
- Blue everywhere as the default accent.
- Gray text on colored backgrounds.
- Pure black, pure gray, or dead neutrals with no temperature.
- Accent color sprayed across icons, labels, chips, and borders until it means nothing.
- Color doing the job typography and spacing should be doing.

## Layout Mistakes
- Bootstrap cards as a default answer.
- Card nesting.
- Identical card grids repeated across the screen.
- Centering everything because it feels "clean."
- Equal spacing everywhere, so nothing groups or leads.
- Heavy borders and separators where whitespace would be stronger.
- Hero metric layouts that scream template.
- 4 equal-width stat cards across the top of every dashboard (the #1 agent layout cliche).
- Every page using the same card-in-grid structure regardless of content type.
- Dark mode as the default because "it's a dashboard" — light mode is equally valid.
- Sidebar navigation on pages with fewer than 5 sections.
- Every section having the same visual weight — nothing hero'd, nothing secondary.
- rounded-lg on every surface creating a puffy, toy-like feel.
- zinc/slate as the only background palette — agents default to this every time.

## Demo/Meta-Navigation Mistakes
- State toggles (happy/loading/empty/error) rendered inline as part of the UI — they must be floating overlays, clearly separate from the actual product surface.
- Context briefs or design notes leaking into the rendered page (e.g. "This should feel like..." appearing as UI text).
- Debug controls styled to match the product UI — they should look like developer tools, not product features.

## Interaction Mistakes
- Missing hover, focus, or active states.
- Bounce or elastic easing.
- Hover-only affordances on touch-first surfaces.
- Tiny click targets.
- Modals used because they were easier than solving the flow.
- Generic confirmation dialogs where undo would be better.

## Craft Mistakes
- Colored icon circles that weren't in the brief.
- Placeholder copy lef

references/color.md

# Color Reference

## Core Rules
- Restraint is the design.
- Color is a scalpel, not confetti.
- Most product surfaces need one accent color, not a rainbow pretending to be a system.
- The screen should still work in grayscale. Color should improve hierarchy, not carry it alone.

## What Actually Matters
- Start with neutrals. If the neutral system is bad, the whole interface feels cheap.
- Use tinted neutrals, not dead zero-chroma gray. A slight warm or cool bias makes the UI feel intentional.
- Avoid pure black and pure gray. Real materials have temperature.
- Accent color should stay scarce so it keeps meaning.
- Strong colored fills should earn their place: selected states, alerts, charts, key emphasis.

## Hierarchy Through Color
- Default text should be high-contrast neutral.
- Secondary information should step back with softer neutrals, not random gray tokens.
- Borders should usually be quieter than text and slightly stronger than backgrounds.
- In dark mode, depth usually comes from layered surfaces, not giant shadows.
- Gray text on colored backgrounds is almost always wrong.

## Patterns Agents Miss
- Blue everywhere usually means nobody made a decision.
- Purple gradients and cyan-purple AI palettes instantly read as generic AI SaaS unless explicitly warranted.
- If every label, badge, icon, and chip is accented, nothing is accented.
- Heavy transparency is usually a smell. Build the right color instead.

## Avoid
- Using color alone to communicate status or hierarchy.
- Defaulting to the same AI palette regardless of brand.
- Letting color do the job that spacing, typography, and composition should be doing.

Github ReposUpdated 1h agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.