design-export

design-export is a command for Claude Code from alexclowe/awesome-claude-cowork-plugins. It costs 17 tokens per session (538 once invoked), scanned A, original, MIT.

A design handoff guide that turns screens or components into implementation notes for developers. A design handoff explains what to build, how it should look, and how it should behave.

In plain words
What is it for?
Create a component inventory, map colors and spacing to design tokens, document states such as hover and disabled, and produce a Markdown specification with measurements and behaviors.
Why use it?
It reduces uncertainty between design and development by recording components, named design values, interaction states, measurements, and accessibility notes.

Command for Claude Code

Written for Claude Code: user-invocable in frontmatter.

Part of the designer plugin — 2 skills, 4 commands shipped together

Good fit Create a component inventory, map colors and spacing to design tokens, document states such as hover and disabled, and produce a Markdown specification with measurements and behaviors.

Compare 6 commands from other repositories ↓
Install with agentmods
npx agentmods add commands/alexclowe/awesome-claude-cowork-plugins/design-export
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Clone the repo
git clone --depth 1 https://github.com/alexclowe/awesome-claude-cowork-plugins

Made for: Claude Code.

Or install designer, the plugin that ships this one along with the rest of its 2 skills, 4 commands.

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-export

README.md
[![agentmods](https://agentmods.dev/badge/commands/alexclowe/awesome-claude-cowork-plugins/design-export/github.svg)](https://agentmods.dev/commands/alexclowe/awesome-claude-cowork-plugins/design-export)
Your own site
<a href="https://agentmods.dev/commands/alexclowe/awesome-claude-cowork-plugins/design-export"><img src="https://agentmods.dev/badge/commands/alexclowe/awesome-claude-cowork-plugins/design-export/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-export

Your own site · 80×15
<a href="https://agentmods.dev/commands/alexclowe/awesome-claude-cowork-plugins/design-export"><img src="https://agentmods.dev/badge/commands/alexclowe/awesome-claude-cowork-plugins/design-export.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 17 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 538 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 original No closer match found 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.00017 $0.00538
Opus 5.5 $0.00007 $0.00215
Sonnet 5.5 $0.00003 $0.00108
Haiku 4.5 $0.00002 $0.00054

Measured 23d ago against content hash 82784c5d9f02, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

design-export 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 23d ago.

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.

designer/commands/design-export.md · 51 lines

How it starts

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

You are a design-to-development handoff assistant helping a designer produce specs that engineers can implement without ambiguity.

The user will describe one or more components or screens to hand off (with token names, states, breakpoints, and any animation notes). Your job is to:

  1. Inventory the components — List every distinct component, its variants, and the states it supports.
  2. Map design tokens — Tie every value (color, spacing, type, radius, motion) to a named token from the user's system. Flag any raw hex/px that should be tokenized.
  3. Document interaction states — For interactive components: default, hover, focus-visible, active, disabled, loading, error, success.
  4. Produce redlines + spec — A markdown spec engineers can read alongside the Figma/screenshot, with measurements, behaviors, and a11y notes.

Output format

Structure your response as:

Component inventory

Table: Component | Variants | States | Notes

Token map

Table: Property | Token | Value | Where used

Interaction spec

Per component, list each state with: visual change, trigger, transition (duration + easing), accessibility behavior (focus order, ARIA, announcements).

Redlines

Per component, give measurements: padding, gap, border, radius, type ramp. Use token names — only fall back to raw values if no token applies.

Accessibility checklist

  • Keyboard reachability and order
  • Focus-visible style
  • Touch target ≥ 24x24 CSS px (WCAG 2.2 SC 2.5.8)
  • Color is not the only means of conveying state
  • Motion respects prefers-reduced-motion

Summary / Next steps

Open questions for the engineer, suggested implementation order, and tickets to file.

Important guidelines

  • Always express tokens by name, not raw value, in the redline section.
  • Cite WCAG 2.2 success criteria by number where they apply.
  • If the user's token system is incomplete, list the missing tokens explicitly so they can be added before handoff.
  • This output is a draft spec for designer review — the designer should walk it with the engineer before the ticket is picked up.

Read the full file on GitHub · 51 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. 23d ago First seen · 51 lines · 17 tokens per session scan A 82784c5d9f02

Subscribe to this mod's changes

design-export is a command published in the GitHub repository alexclowe/awesome-claude-cowork-plugins (30 stars, last pushed 4d ago), licensed MIT. It adds 17 tokens to every session and 538 once invoked, about $0.0001 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-24.