What makes Graphic Designer notable?

1K downloads. Trust evidence available

How should Graphic Designer 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.

agentCLAWHUBUnverified

Graphic Designer

Expert visual design guidance for UI and UX of GUI apps and websites. Use when asked to design, critique, or improve interface visuals, color palettes, typog... Skill: Graphic Designer Owner: jhauga Summary: Expert visual design guidance for UI and UX of GUI apps and websites. Use when asked to design, critique, or improve interface visuals, color palettes, typog... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-19T04:38:00.234Z | user - Initial release of the graphic-designer skill for expert visual design guidance in UI and UX for GUI apps and websites. - Provides ac

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.0k

Updated

Oct 11, 2026

Version

1.0.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1K downloads reported by the source. Last updated 10/11/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 11, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 11, 2026
Adoption signal: 1K downloadsadoption · observed Oct 11, 2026
Latest release: 1.0.0release · observed May 19, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s17ch25466qc0g2bcymk2dr8zx83pfny:graphic-designer

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-jhauga-graphic-designer/snapshot"

Run-check

$0.02 USD

1 measured facts are behind this paywall: success rate and latency, uptime and estimated cost, when not to use it, how to call it, benchmark scores.

Agents pay $0.02 in USDC. A card payment is $0.50, the smallest a card allows.

Documentation

CLAWHUB

31,306 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: graphic-designer
description: 'Expert visual design guidance for UI and UX of GUI apps and websites. Use when asked to design, critique, or improve interface visuals, color palettes, typography, layout grids, design tokens, component states, micro-interactions, or accessibility of screens. Covers visual hierarchy, Gestalt principles, Laws of UX (Fitts, Hick, aesthetic-usability), the 60-30-10 color rule, bento grids, glassmorphism, dopamine palettes, WCAG contrast, motion easing, and 2026 trends like tactile maximalism and adaptive UI.'
---

# Graphic Designer

Apply professional UI/UX visual design judgment to mockups, components, screens, and full interfaces. Translate vague aesthetic requests ("make it pop", "looks dated", "feels cluttered") into concrete, defensible design decisions grounded in perception research and current platform conventions.

## When to Use This Skill

- Designing or reviewing screens, components, landing pages, dashboards, or mobile app UI
- Picking color palettes, type scales, spacing, or grid systems
- Defining design tokens or component variants for a design system
- Improving visual hierarchy, scannability, or conversion on an existing layout
- Adding or auditing micro-interactions, state transitions, and motion
- Making a UI accessible (WCAG contrast, neurodivergent-friendly patterns, dynamic type)
- Modernizing a "flat 2018" interface against current 2026 expectations

## Core Decision Framework

Every visual decision should answer three questions in order:

1. **Where does the eye land first?** — primary action must win the contrast/size/position battle. Run a 5-second squint test; if the CTA disappears at 30% opacity, hierarchy is broken.
2. **What does the user need to perceive as related?** — apply Gestalt proximity and similarity *before* adding borders, dividers, or boxes. Whitespace groups more cleanly than lines.
3. **What can be hidden until needed?** — progressive disclosure beats density. Every visible element pays rent in cognitive load.

## Visual System Defaults

Use these as starting points, then deviate with reason:

| System | Default | Notes |
|---|---|---|
| Color ratio | **60-30-10** (dominant / secondary / accent) | Accent is reserved for primary CTAs and critical state |
| Type scale | 1.250 (major third) or 1.333 (perfect fourth) | Tighter scales feel editorial; wider scales feel marketing |
| Base unit | 4px or 8px spacing grid | Every padding/margin is a multiple — no `padding: 13px` |
| Body text | 16px minimum on web, 17pt on iOS, 14sp on Android | Below 16px on web fails most accessibility audits |
| Line length | 45–75 characters | Long-form prose; UI labels can be shorter |
| Line height | 1.4–1.6 for body, 1.1–1.25 for display | Tight headings, generous body |
| Corner radius | One scale (e.g., 4 / 8 / 16 / full) | Mixing arbitrary radii ages a UI fast |
| Elevation | 3–5 shadow tiers max | Use them semantically (resting / raised / overlay / modal) |

## Color & Contrast

_meta.json

{
  "ownerId": "kn71kvdba3t2jfkk6nbgnytg0s81617g",
  "slug": "graphic-designer",
  "version": "1.0.0",
  "publishedAt": 1779165480234
}

references/accessibility.md

# Accessibility Checklist (WCAG 2.2 AA, Practical)

A pragmatic pass. Automated audits catch ~30% of issues; the rest needs manual review.

## Color & Contrast

- Body text against background: **≥ 4.5:1**.
- Large text (≥ 18pt or 14pt bold / ~24px or 19px bold): **≥ 3:1**.
- UI components and graphical objects (icons, form borders, focus rings): **≥ 3:1** against adjacent colors.
- **Test glass/blur surfaces against the worst-case content** that can scroll behind. Bright photos defeat dark text on glass even when the glass blur is heavy.
- Never encode information by color alone — pair with text, icon, or pattern.

## Text & Type

- Minimum body size: 16px on web, 17pt iOS, 14sp Android.
- Support OS dynamic type up to **200% zoom** with no clipping, horizontal scroll, or overlap.
- Line height ≥ 1.5 for body prose. Paragraph spacing ≥ 1.5× line height. Letter spacing ≥ 0.12× and word spacing ≥ 0.16× must remain visually acceptable when user-adjusted.
- No text in images for content. SVG with text or live HTML, always.

## Interactive Elements

- Hit target minimums: **24×24 CSS px** (WCAG 2.2 AA), with sufficient surrounding space. Practical floors: **44×44 pt** iOS, **48×48 dp** Android.
- **Focus indicator** must be visible against every background it crosses. A 2px brand-colored ring on a brand-colored section is invisible — add offset and contrasting outline.
- All hover states have a focus equivalent. All click handlers work via Enter/Space (or arrow keys, where appropriate).
- Drag-only interactions must have a non-drag fallback (WCAG 2.2 SC 2.5.7).
- Don't trap focus except in modals; always provide an escape (Esc key + close button + clicking the scrim).

## Forms

- Every input has a visible label. Placeholder is not a label.
- Errors are programmatically associated with their field (`aria-describedby`) and explain how to fix, not just what went wrong.
- Required fields marked with both text and a symbol; never asterisk-only.
- Autocomplete attributes on common fields (name, email, address, payment).
- Don't validate on blur of the first field before the user has finished typing the rest.

## Motion & Animation

- Respect `prefers-reduced-motion: reduce`. Replace motion with opacity fades or no transition; do not remove feedback entirely.
- No flashing content above 3Hz (seizure risk).
- Auto-playing motion longer than 5 seconds must be pausable.
- Parallax and scroll-jacking are accessibility hazards; provide an off switch or skip them.

## Structure & Semantics

- Heading hierarchy is meaningful and sequential (`h1` once, then `h2`, then `h3`; no skipping for size).
- Landmarks (`<header>`, `<main>`, `<nav>`, `<footer>`, `<aside>`) make screen reader navigation possible.
- Lists are real lists (`<ul>`, `<ol>`), not styled divs.
- Tables for tabular data, with `<th>` and `scope`. Not for layout.
- Icons that convey meaning need an accessible name (`aria-label` or visually-hidden text). Decorative icons get `aria-hidden="true"`.

## Cog

references/design-systems.md

# Design Systems & Tokens

How to structure a scalable visual system that survives growth, theming, and hand-off.

## Token Tiers

Tokens are referenced in three layers. Each layer references the one below it; no layer skips.

| Tier | Example | Who consumes it |
|---|---|---|
| **Primitive** (raw values) | `color-blue-500: #2563EB`, `space-4: 16px` | Only semantic tokens — never components directly |
| **Semantic** (intent) | `color-action-primary`, `color-text-default`, `space-stack-md` | Component tokens; sometimes app code |
| **Component** (scoped) | `button-primary-bg`, `input-border-focus` | The component implementation |

**Why**: rebranding swaps primitives; restyling swaps semantic mappings; component-specific tweaks never leak into the global palette.

## Token Categories Worth Defining

Beyond color and type, every mature system tokenizes:

- **Spacing scale** — usually 4px or 8px base, exponential or linear (e.g., 4, 8, 12, 16, 24, 32, 48, 64).
- **Radius scale** — `none / sm / md / lg / full`. Four to five steps is plenty.
- **Elevation / shadow** — semantic tiers: `resting / raised / overlay / modal / popover`. Define both shadow and z-index per tier.
- **Motion** — duration (`fast / base / slow`), easing (`standard / decelerate / accelerate / emphasized`).
- **Type** — family, weight, size, line-height, letter-spacing, optical-size axis if variable.
- **Border width** — `hairline / thin / thick`. Three values.
- **Opacity** — `disabled`, `subtle`, `overlay-scrim`.

## Component Variants

Use design-tool variants (Figma component properties, Storybook args) to express the matrix:

- **Hierarchy**: primary / secondary / tertiary / ghost / destructive
- **Size**: sm / md / lg (sometimes xs / xl)
- **State**: rest / hover / pressed / focus-visible / disabled / loading
- **Optional decorations**: leading icon, trailing icon, caret, badge
- **Width**: hugging / filling

A button component without focus-visible and loading variants is incomplete.

## Cross-Platform Drift

Same design token, different rendering rules:

- **iOS**: respects Dynamic Type by default — type sizes must be relative, not fixed.
- **Android**: Material's elevation system maps shadow + tonal overlay; pure shadow tokens may need a tonal companion.
- **Web**: rem-based type scaling for user font-size preferences; px is acceptable for spacing and borders.
- **Email**: most tokens are inert. Inline styles, table layouts, web-safe stacks.

## Hand-off Without Drift

- Single source of truth. Either design tool exports → code (Tokens Studio, Style Dictionary, Figma Variables → JSON) or code is the source and the design tool subscribes.
- Never copy hex values from design into code by hand for production work — that is how drift starts.
- Diff token changes in PRs; a token rename is a breaking change.
- Visual regression testing (Chromatic, Percy, Playwright snapshot) catches token-level regressions that unit tests miss.

## When to Build a Design System

- **One product,

references/principles.md

# Visual Principles Reference

Foundational principles applied in UI/UX graphic design. Use as a checklist when reviewing or producing a screen.

## Visual Hierarchy

The order in which the eye discovers elements. Controlled by, in roughly descending power:

1. **Position** — top-left in LTR cultures wins by default; optical center (slightly above true center) for hero focal points.
2. **Size** — larger elements dominate, but only if surrounded by enough whitespace to register as singular.
3. **Contrast** — luminance contrast against background outranks hue contrast.
4. **Color saturation** — one saturated element among desaturated peers will win every time.
5. **Weight** — bold type, thick strokes.
6. **Whitespace isolation** — an element with breathing room beats a larger element in a crowd.

**Test**: blur or squint at the design. The intended primary element should still dominate.

## Gestalt Principles (Applied)

- **Proximity** — items close together are read as a group. Prefer spacing over borders to group form fields, list items, or related metadata.
- **Similarity** — items sharing color, shape, size, or type are read as the same kind. Use to reinforce category without labels.
- **Continuity** — the eye follows lines and curves. Align elements along implicit lines to create scan paths.
- **Closure** — the mind completes shapes. You can imply a card with three corners or a divider with whitespace alone.
- **Figure/ground** — the foreground/background relationship must be unambiguous. Glassmorphism violates this when contrast is too low.
- **Common region** — a shared container (card, panel) overrides proximity. Use sparingly; cards-within-cards becomes Russian-doll UI.

## Laws of UX (Applied)

- **Fitts's Law** — target acquisition time scales with distance and inversely with target size. Make primary actions large and place them near where attention already is (corners on desktop, thumb zones on mobile).
- **Hick's Law** — decision time scales with number/complexity of choices. Use progressive disclosure, sensible defaults, and grouping to reduce visible options.
- **Miller's Law** — humans hold ~7 (±2) items in working memory; chunk longer lists into groups of 3–5.
- **Aesthetic-Usability Effect** — attractive interfaces are *perceived* as more usable. Useful for first impressions; do not let it substitute for real usability testing.
- **Jakob's Law** — users spend most of their time on other products and expect yours to work the same. Deviate from platform conventions only with clear payoff.
- **Doherty Threshold** — productivity climbs when system response is under ~400ms. Optimistic UI, skeletons, and immediate feedback hide latency.
- **Peak-End Rule** — users remember the peak emotional moment and the ending. Invest disproportionately in onboarding peaks, success states, and clean exit/empty states.
- **Serial Position Effect** — first and last items in a list are remembered best. Put important nav items at the ends.
- **Zeigarnik

Github ReposUpdated 2d 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.