← ClaudeAtlas

designlisted

One keyless, offline-first front door for design. Routes a design intent to a mode and renders it as self-contained HTML/SVG (no CDN, no paid keys): UI screens and flows, clickable prototypes, design systems and tokens (including brand identity, BRAND.md), architecture/flow/ER diagrams, infographics and data-stories, slide decks, vector assets (OG cards, SVG logos, icon sets, posters), critique of an existing screen, and anticipating a flow's dead-ends. True raster (photo, illustration, painterly cover) is an optional layer that degrades to a spec plus an editable placeholder rather than hard-failing. Every mode loads design-core first (hierarchy, WCAG AA contrast, colorblind-safe palettes, brand-probe, the anti-tells catalog of what makes a design look AI-generated, precise non-marketing copy, render/screenshot/critique verification). Triggers on: design a screen/page/UI, mock up, prototype, design system, tokens, brand, BRAND.md, wireframe, diagram this, infographic, dataviz, slide deck, logo, OG image, soc
phnx-labs/.agents · ★ 0 · Web & Frontend · score 59
Install: claude install-skill phnx-labs/.agents
# 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 | The user asks for | Mode | Outp