Agent skill · design visual · nousresearch
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
Why this skill is useful
Provides 54 complete design systems as HTML/CSS templates, enabling the AI to generate visually accurate web pages with specific brand styles.
What it needs
About 6k tokens when loaded. Last updated 2026-08-07. 226,679 stars on the source repository.
What this skill does
Popular Web Designs 54 real-world design systems ready for use when generating HTML/CSS. Each template captures a site's complete visual language: color palette, typography hierarchy, component styles, spacing system, shadows, responsive behavior, and practical agent prompts with exact CSS values. Related design skills claude-design — use for the design process and taste (scoping a brief, producing variants, verifying a local HTML artifact, avoiding AI-design slop). Pair it with this skill when the user wants a thoughtfully-designed page styled after a known brand: claude-design drives the workflow, this skill supplies the visual vocabulary. design-md (optional: hermes skills install official/creative/design-md) — use when the deliverable is a formal DESIGN.md token spec file, not a rendered artifact. How to Use 1. Pick a design from the catalog below 2. Load it: skillview(name="popular-web-designs", filepath="templates/<site>.md") 3. Use the design tokens and component specs when generating HTML 4. Pair with the generative-widgets skill to serve the result via cloudflared tunnel Each template includes a Hermes Implementation Notes block at the top with: CDN font substitute and Google Fonts <link> tag (ready to paste) CSS font-family stacks for primary and monospace Reminders to use writefile for HTML creation and browserexec (capturescreenshot()) for verification HTML Generation Pattern Write the file with writefile, serve with the generative-widgets workflow (cloudflared tunnel), and verify the result with browserexec: open the page, capturescreenshot(), and inspect the image to confirm visual accuracy. Font Substitution Reference Most sites use proprietary fonts unavailable via CDN. Each template maps to a Google Fonts substitute that preserves the design's character. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nousresearch/popular-web-designs