opendesign

Solid

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.

Web & Frontend 7 stars 0 forks Updated today MIT

Install

View on GitHub

Quality Score: 84/100

Stars 20%
30
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# 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:uiuxdesign` 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 st...

Details

Author
vanducng
Repository
vanducng/skills
Created
4 months ago
Last Updated
today
Language
HTML
License
MIT

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

marketing-design

Marketing brand-asset generation (raster images via AI): logo design (55 styles, 30 palettes, 25 industries), corporate identity / CIP mockups (50 deliverables - business card, letterhead, signage, packaging, apparel), banner design (22 styles, social/ads/web/print), SVG icon design (15 styles), social photos (multi-platform), and model-agnostic poster prompts. Default image engine is Codex gpt-image-2 (ChatGPT subscription via `codex login`), attaching the brand logo as a reference image for CIP compositing; falls back to Gemini Nano Banana (GEMINI_API_KEY, same key as omnimedia). Actions: design logo, create CIP / brand identity, generate mockups, design banner, generate icon, create social photos, design poster, social media images. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads. For HTML/web pages, dashboards, and slide decks, use opendesign instead.

7 Updated today
vanducng
Web & Frontend Listed

goddesign

Design and build distinctive, production-grade frontend UI for websites, landing pages, dashboards, apps, components, and HTML/CSS/React styling. Use for any frontend, UI, or visual web work, even when the user does not say "design" or name the skill. Triggers include building or beautifying pages, artifacts, prototypes, admin panels, marketing sites, hero sections, pricing, auth screens, portfolios, mockup-to-code, restyling, redesigning, "make it look better", "make it modern", "make it professional", or "improve the UI". Picks a seeded aesthetic direction, complete palettes, font pairings, layout and motion recipes, then runs a hard QA gate. Do not use for backend, CLI, or non-visual work. Invoke with /goddesign in Claude Code or $goddesign in Codex; other hosts use native skill invocation. Treat text after the skill name as the brief. In Codex, re-invoke for each new design task.

1 Updated 3 weeks ago
hannsxpeter
Web & Frontend Listed

design-genius

Produce a genuinely UNIQUE, non-slop DESIGN.md for any design task — a landing page, portfolio, SaaS page, app UI, dashboard, or site revamp — by READING the locally installed design library and combining 2-3 structurally different systems, never regenerating AI-defaults from memory. Library path resolves from this skill's own directory (or $DESIGN_LIB), never hardcoded. Trigger on: "design X", "rebuild Y", "make a unique look for Z", "not generic", "no AI slop", "design system", "style for X". Works from text description, PRD, reference URL, or screenshot. NOT for codegen (hand off to web-design); this skill EMITS the spec.

0 Updated 1 weeks ago
AkashPriyadarshii