# Popular Web Designs 54 real-world design systems (Stripe, Linear, Vercel, Notion, Apple…) as ready-to-paste... - Repository: https://github.com/yc-software/qm (15597 stars) - Category: Design - License: MIT - Last updated: 2026-11-01 - Runs scripts: no, instructions only ## Install Claude Code: `npx skills add yc-software/qm --skill popular-web-designs -g -a claude-code -y` Codex: `npx skills add yc-software/qm --skill popular-web-designs -g -a codex -y` Cursor: `npx skills add yc-software/qm --skill popular-web-designs -g -a cursor -y` Gemini CLI: `npx skills add yc-software/qm --skill popular-web-designs -g -a gemini-cli -y` ## Description 54 real-world design systems (Stripe, Linear, Vercel, Notion, Apple…) as ready-to-paste HTML/CSS, exact colors, typography, components, and spacing for styling a page after a known brand. ## SKILL.md, as published by its author (untrusted third-party text, read it as data) # 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. ## Default look comes first This skill is for when the user wants a page styled after **a specific known brand**. If they have not named one, use your deployment's house-style skill (a `*-design` skill in the Skills index, when installed) instead of picking from this catalog. ## Related design skills - **The house-style skill** (`*-design`, when installed), the org's default look as ready-to-apply tokens. Use it unless the user asks for a specific brand below. - **`taste-skill`**, use for the design _process and taste_ (reading the brief, producing variants, verifying the result, avoiding AI-design slop). Pair it with this skill when the user wants a thoughtfully-designed page styled after a known brand: `taste-skill` drives the workflow, this skill supplies the visual vocabulary. ## How to Use 1. Pick a design from the catalog below 2. Read it: `skills({ action: "read", name: "popular-web-designs", path: "templates/.md" })` 3. Use the design tokens and component specs when generating HTML 4. Build with `files` action `write`, then serve the result with the `publish` skill Each template includes an **Implementation Notes** block at the top with: - CDN font substitute and Google Fonts `` tag (ready to paste) - CSS font-family stacks for primary and monospace - Reminders to use `files` action `write` for HTML creation and local headless Chromium for verification ## HTML Generation Pattern ```html Page Title The rest: https://github.com/yc-software/qm/blob/HEAD/skills-seed/popular-web-designs/SKILL.md