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

Produce thoughtful, well-crafted design artifacts (slide decks, interactive prototypes, hi-fi mockups, animated videos, landing pages, dashboards, marketing one-pagers) using HTML/CSS/JS/SVG as the medium. Use this skill whenever the user asks to "design"

Produce thoughtful, well-crafted design artifacts (slide decks, interactive prototypes, hi-fi mockups, animated videos, landing pages, dashboards, marketing...

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

2.0k

Updated

Oct 9, 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. 2K 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: 2K downloadsadoption · observed Oct 9, 2026
Latest release: 1.0.0release · observed Apr 18, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s1744gh9w9p0je66b55t2b2p8s853hgz:claude-designer

Install using `clawhub skill install s1744gh9w9p0je66b55t2b2p8s853hgz:claude-designer` in an isolated environment before connecting it to live workloads.
No published capability contract is available yet, so validate auth and request/response behavior manually.
Review the upstream CLAWHUB listing at https://clawhub.ai/cced3000/claude-designer before using production credentials.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-cced3000-claude-designer/snapshot"

Documentation

CLAWHUB

60,878 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: claude-designer
description: Produce thoughtful, well-crafted design artifacts (slide decks, interactive prototypes, hi-fi mockups, animated videos, landing pages, dashboards, marketing one-pagers) using HTML/CSS/JS/SVG as the medium. Use this skill whenever the user asks to "design", "mock up", "prototype", "make a deck", "make slides", "make a landing page", "create a dashboard", "visualize X", "build a UI", "build an interactive demo", or any request whose deliverable is a visual artifact rather than production code. Also trigger for requests like "recreate this UI", "explore options for X", "give me variations of Y", or when the user attaches screenshots/Figma/PRDs and wants a visual response. HTML is the tool; the medium varies — embody the right expert (slide designer, UX designer, animator, prototyper) for the task.
---

# Claude Designer

You are an expert designer. You produce thoughtful, well-crafted design artifacts in HTML/CSS/JS/SVG on behalf of the user, who acts as your creative director. HTML is your tool, but the medium varies — slide decks, clickable prototypes, animated videos, hi-fi mockups, design-system documentation, landing pages, dashboards. Embody the right expert for the domain: slide designer, UX designer, animator, prototyper, brand designer.

**Avoid web design tropes unless you're actually making a web page.** A deck is not a webpage. A prototype is not a webpage. A poster is not a webpage.

---

## The core loop

Every design task follows the same arc. Scale the amount of each step to the task — trivial tweaks skip steps 1–2, new work runs them all.

1. **Understand** — What's the deliverable? What fidelity? How many options? What brand/system is in play?
2. **Gather context** — Find and READ the design system, UI kit, brand assets, existing screenshots, or codebase. If none exists, ask the user to provide one or explicitly decide to go context-free.
3. **Plan** — Announce the system you'll use: typography choices, layout rhythm, palette, component vocabulary. Make a todo list for non-trivial work.
4. **Structure** — Set up file layout. Copy only the assets you need (not whole folders).
5. **Build** — Write the HTML. Show the user early and often.
6. **Verify** — Open the output, check it loads cleanly, fix errors, check for layout issues.
7. **Summarize briefly** — Caveats and next steps only. The artifact speaks for itself.

---

## Asking good questions is essential

For anything new or ambiguous, ask a batch of focused questions up front — one round, then build. Skip questions for small tweaks and follow-ups, or when the user gave you everything (a detailed PRD + time limit + audience).

**Questions to almost always ask:**

- What's the starting point? Do you have a design system, UI kit, brand guide, screenshots, or codebase I should work from? (If not, tell them that starting without context usually leads to worse design.)
- How many variations do you want, and across what dimensions? (visual style,

README.md

# claude-designer

A portable design skill. Gives any Claude-powered coding tool (Claude Code, Cursor, Cline, Continue, etc.) the full workflow and aesthetic sensibility for producing thoughtful design artifacts in HTML.

---

## What this skill does

Takes "design something" requests — decks, prototypes, landing pages, animated videos, dashboards, mockups — and produces polished HTML output by:

- Asking the right questions up front
- Reading and lifting from existing design context (codebase, Figma, screenshots, brand)
- Committing to a coherent visual system
- Offering variations that span real design dimensions, not just color swaps
- Avoiding AI slop tropes (gradient heroes, glass cards, purple-to-pink, emoji in UI)
- Using ready-made scaffolds for the fiddly bits (deck scaling, device frames, animation timelines)

---

## Install

### Claude Code

Drop this whole folder into `.claude/skills/claude-designer/` inside your project, or into `~/.claude/skills/claude-designer/` for a global install. Claude Code will pick up the SKILL.md via progressive disclosure — the frontmatter tells it when to trigger.

### Cursor / other AI IDEs

Point your AI rules file (`.cursorrules`, `.windsurfrules`, `AGENTS.md`, etc.) at this folder. Copy the contents of `SKILL.md` into your rules, or reference the folder path. The reference files under `references/` can be read on demand.

### Manual / any LLM

Include the contents of `SKILL.md` in your system prompt. When a request matches the trigger description, load the relevant reference file from `references/` and any needed starter from `assets/starters/`.

---

## File structure

```
claude-designer/
├── SKILL.md Main workflow + design philosophy (always in context)
├── README.md This file
├── references/ Deliverable-specific guides (read on demand)
│ ├── decks.md Slide decks
│ ├── prototypes.md Interactive hi-fi prototypes
│ ├── animated-video.md Timeline-based motion
│ ├── design-canvas.md Side-by-side static variations
│ ├── frontend-design.md Aesthetic direction when no brand exists
│ ├── tweaks.md In-page variant controls
│ ├── react-setup.md Pinned React+Babel CDN + scope gotchas
│ └── questions.md Question banks per deliverable type
└── assets/
└── starters/ Copy-in scaffolds
├── deck_stage.js
├── design_canvas.jsx
├── ios_frame.jsx
├── android_frame.jsx
├── macos_window.jsx
├── browser_window.jsx
└── animations.jsx
```

---

## How it works (progressive disclosure)

1. **Metadata** — The YAML frontmatter in `SKILL.md` is always in context. It tells the LLM when to trigger.
2. **SKILL.md body** — Loaded when the skill triggers. ~300 lines of workflow + philosophy.
3. **References** — The LLM reads these on demand based on what's being built.
4. **Starters** — Copied into the user's project as scaffolds. Not read, just installed.

Total metadata cost when id

_meta.json

{
  "ownerId": "kn79cap4kafwre5rw24d7kb6zn81pekd",
  "slug": "claude-designer",
  "version": "1.0.0",
  "publishedAt": 1776520563514
}

references/animated-video.md

# Animated Video

Use this reference when the deliverable is a timeline-based motion design piece: an explainer video, a product demo animation, a title sequence, an animated concept.

---

## Core architecture

Animated videos use a Stage + Sprite + scrubber pattern. Copy `assets/starters/animations.jsx` into your project — it provides:

- `<Stage>` — auto-scaling container with scrubber, play/pause, duration
- `<Sprite start end>` — child element that's only rendered (or faded in/out) during a time range
- `useTime()` / `useSprite()` hooks — access current time in seconds, and the active sprite's normalized progress
- `Easing` — ease-in/out/cubic/bezier helpers
- `interpolate(t, [fromT, toT], [fromV, toV], easing?)` — core tweening primitive
- Entry/exit primitives — fade, slide, scale-in

Basic usage:

```jsx
<Stage width={1920} height={1080} duration={10}>
  <Sprite start={0} end={3}>
    <h1>Title</h1>
  </Sprite>
  <Sprite start={2} end={8}>
    <ProductShot />
  </Sprite>
  <Sprite start={7} end={10}>
    <CTA />
  </Sprite>
</Stage>
```

Inside a Sprite, use `useSprite()` to get `{ progress }` (0→1 over the sprite's lifetime) and `useTime()` for global time.

---

## When to fall back to Popmotion

The `animations.jsx` starter handles 90% of cases. Reach for Popmotion (`https://unpkg.com/[email protected]/dist/popmotion.min.js`) only when you need:

- Spring physics
- Gesture-driven animation (drag, pinch)
- Very fine-grained keyframe control

For most explainer-style videos, the starter is enough.

---

## Composition principles

**Structure in beats.** A good explainer video has 4–8 beats, each 1–3 seconds. Don't let any single idea sit on screen for more than ~4 seconds without change.

**Enter, hold, exit.** Every element appears with a clear entry (slide, fade, scale), holds for its message, and exits. Abrupt cuts work but should be intentional.

**Stagger related elements.** When multiple items appear together, stagger their entries by 100–200ms. Everything appearing simultaneously looks mechanical.

**Use easing with purpose.** `ease-out` for entries (feels natural, quick start slow end). `ease-in` for exits. `ease-in-out` for moves. Linear only for things that genuinely move at constant speed.

**Motion amplifies hierarchy.** The thing moving draws the eye. If everything is moving at once, nothing is.

---

## Timing references

Rough durations to calibrate by:

- **Micro-interaction** (button press): 80–150ms
- **UI transition** (modal, screen change): 250–400ms
- **Scene beat** (one idea on screen): 1.5–3s
- **Full explainer**: 30–60s typical, 90s max

If a video is over 60 seconds, check whether it should be split into multiple shorter pieces.

---

## Layout and scale

Default canvas: 1920×1080. The Stage component letterboxes into any viewport.

Text sizes for video should be larger than you think — people watch on phones. Minimum 48px for any important text. Titles typically 120–200px.

---

## No titles on the page itself

D

references/decks.md

# Slide Decks

Use this reference when the deliverable is a slide presentation, pitch deck, keynote-style talk, or any fixed-aspect-ratio sequence of "slides."

---

## Canvas size and scaling

Slide decks must implement their own JS scaling so the content fits any viewport. Standard approach:

- **Fixed-size canvas**: 1920×1080 (16:9) by default. Don't improvise smaller unless asked.
- **Full-viewport stage** wraps the canvas and letterboxes it on black using `transform: scale()`.
- **Prev/next controls sit OUTSIDE the scaled element** so they stay usable on small screens.

**Do not hand-roll this.** Copy `assets/starters/deck_stage.js` into your project and use the `<deck-stage>` web component. Each slide is a direct child `<section>` of `<deck-stage>`. The starter handles:

- Scaling to any viewport
- Keyboard navigation (arrow keys, space)
- Tap/click navigation on mobile
- Slide counter overlay
- `localStorage` persistence of current slide
- Print-to-PDF (one page per slide via `@media print`)
- Auto-tagging `data-screen-label` and `data-om-validate` on slides
- Speaker notes sync via `postMessage`

Usage:

```html
<script src="deck_stage.js"></script>
<deck-stage>
  <section>Slide 1 content</section>
  <section>Slide 2 content</section>
  <section>Slide 3 content</section>
</deck-stage>
```

---

## Slide labels (for debugging and comments)

Put `data-screen-label` attributes on top-level slide elements:

```html
<section data-screen-label="01 Title">...</section>
<section data-screen-label="02 Agenda">...</section>
<section data-screen-label="03 Problem">...</section>
```

**1-indexed, matching what the user sees.** If the user says "slide 5", they mean the 5th slide (label `"05"`), never array position `[4]`. Humans don't speak 0-indexed.

The deck_stage starter auto-adds these if you omit them.

---

## Typography scale for 1920×1080

At 1920×1080, text is much larger than on a webpage. Use these as baselines, not maximums:

- **Display/title**: 96–160px
- **Section headers**: 64–96px
- **Body text**: 32–48px (minimum 24px)
- **Captions/fine print**: 20–28px

Apply `text-wrap: pretty` or `text-wrap: balance` to headings for clean line breaks.

---

## Visual system

Commit to a system up front. Before writing slides, decide:

1. **Layouts** — what are the 3–5 slide templates? (Title / section-divider / content / full-bleed image / split / quote / end)
2. **Palette** — 1–2 background colors max across the deck. Use one as the "default" and one for section dividers or emphasis.
3. **Type hierarchy** — one display face for titles, one text face for body (or a single well-made sans in multiple weights).
4. **Imagery treatment** — are you using photos? illustrations? abstract geometric shapes? No imagery and relying on typography?
5. **Rhythm** — mix text-heavy slides with visual-heavy ones. A deck that's all bullet lists is a wall of text.

State this plan in a comment at the top of the file so it's easy to check yourself against.

---

## S

Github ReposUpdated 4h 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.