← ClaudeAtlas

opendesignlisted

Generate polished single-file HTML design artifacts using the nexu-io/open-design catalog of production skills and brand-grade design systems. Use when the user asks to design, mock up, prototype, draft, build, or render a visual web artifact, chooses a brand/style direction, requests a deck/PPT, hero, section, component, marketing page, dashboard, email, doc page, or GitHub README/repo banner. Auto-opens the result for review. Produces editable HTML/CSS; use vd:marketing-design for AI-generated raster brand imagery.
vanducng/skills · ★ 0 · Web & Frontend · score 76
Install: claude install-skill vanducng/skills
# opendesign Compose a single self-contained HTML artifact from the upstream `nexu-io/open-design` catalog: pick the closest **skill** (workflow + seed template + section layouts), apply a **design system** (color tokens, typography, components), produce the artifact, open it in the browser. ## Scope **This skill handles:** static HTML/CSS/SVG artifacts (landings, marketing pages, dashboards, mobile screens, decks, posters, emails, e-guides, internal docs). **Does NOT handle:** live React/Vue apps or backend wiring (use `vd:webdesign` or `vd:fastreact`), AI-generated raster brand imagery (use `vd:marketing-design`), multimodal media (use `vd:omnimedia`), production release work (use `vd:ship`). **Special case — GitHub README / repo hero banner:** the catalog has no banner template (`search` returns social-cards that override the repo's brand). Skip the catalog and follow `references/github-readme-banner.md` — author/evolve a brand-locked `banner.html`, render to PNG at 2× via headless Chrome, and **verify the render (measure margins + view) before shipping**. ## Dependencies **Required:** `git`, `bash`, `grep`, `awk` (all preinstalled on macOS). Cache lives at `~/.cache/$USER-opendesign` (~few MB after first sync). Override with `OPENDESIGN_CACHE`; legacy `OPEN_DESIGN_CACHE` is still honored. **Access-guarded `.cache`?** Some harnesses block any command/path containing a literal `.cache` segment (scout-block hooks, sandbox denylists). Two clean workarounds — never sta