Design

design — one keyless front door for design

Design work is scattered and often locked behind paid image backends. This plugin is the single, brand-agnostic entry: /design reads the intent, picks a mode, and renders the result on the offline HTML/SVG substrate (the artifacts engine — self-contained, inline CSS/SVG, no CDN, no keys). It ships in the default distribution, so a fresh install has it.

The bet that makes this cover the scenario space: most design jobs have a better answer in editable vector/HTML than in a generated raster. A landing page, a prototype, a diagram, an infographic, a deck, an OG card, a logo, an icon set, a poster — all render crisp and editable with zero keys. True raster (a photo, an illustration, a painterly cover) is a smaller, clearly-scoped layer that degrades gracefully when no backend is configured, never a hard failure.

Load design-core first

Every mode reads design-core.md before producing anything: visual hierarchy and rhythm, accessibility (WCAG AA contrast, colorblind-safe palettes), the brand-probe cascade, browsing for live current inspiration instead of frozen examples, the anti-tells catalog (the tells that make a design look AI-generated), precise non-marketing copy, the graceful-raster rule, and mandatory render/screenshot/critique verification. That shared core is what keeps quality consistent across every mode and every user.

Routing — pick the mode from the intent

When the intent is vague ("make me something nice"), ask one clarifying question about the job, then route. Never guess between two very different modes silently.

The modes

Each mode file lives beside this one. Read design-core first, then the mode:

• interface.md — screens, pages, components; redesign from a screenshot.
• prototype.md — clickable multi-screen HTML flows.
• system.md — design systems, tokens, DESIGN.md, brand definition.
• diagram.md — architecture/flow/sequence/ER via diagram-conventions.md notation.
• dataviz.md — infographics, charts, data-stories, dashboards.
• deck.md — slide decks (HTML-first, PPTX when asked).
• asset.md — OG cards, logos, icons, posters (vector-first); raster with graceful degradation.
• motion.md — CSS/HTML motion and micro-interactions.
• critique.md — audit an existing screen, site, or app: deterministic checks via scripts/check-contrast.ts (WCAG ratios computed, hex/rgb/oklch) and scripts/check-tells.ts (anti-tells, offline violations, color-only status), plus the screenshot critique; outputs ranked findings, a paste-ready fix brief, and standing design laws for the project's docs. Direct door: /design:critique <target>.
• anticipate.md — diagnose a dead-end flow and propose the continuation (before/after ASCII, no implementation).

Deliver it (reuse the artifacts transport)

Write the artifact self-contained. Pick its home once: if the repo has an .agents/ dir, "$ROOT/.agents/design/<slug>.html"; else /tmp/<slug>.html. Then render it, look at the screenshot, run the critique checklist, and open it in the user's DEFAULT browser on the machine they sit at (resolve the online device from the Host and Fleet context) — the browser they actually use, which needs no fleet browser profile: open <path> (macOS) / xdg-open <path> locally, or scp it over and agents ssh <host> 'open /tmp/<slug>.html' when remote. agents browser is the agent's own automation profile for the headless screenshot above, not how you show the user; only reach for agents browser navigate --url file://<path> when a profile is configured and you re-render the SAME file repeatedly (it reuses one tab instead of a fresh tab per open). For a shareable asset, also drop a PDF/PNG in ~/Downloads. See artifacts/SKILL.md for the full delivery and PDF steps; do not re-derive them.

Portability (why this works for any user)

• Ships default. This plugin lives in the system repo (the npm defaults), beside artifacts, not in .agents-extras and not in a personal repo.
• Keyless core. The HTML/SVG substrate needs no API key and works offline. That covers interface, prototype, system, diagram, dataviz, deck, critique, and vector assets.
• Raster degrades. True raster uses a backend if one exists, otherwise emits a spec + editable placeholder + enable-steps and exits successfully (design-core §8).
• Brand is optional. Unbranded output is tasteful by default; brand plugins layer on top by calling /design.