popular-web-designs

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/<site>.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 <link> 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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Title</title>

    <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet" />
    <style>
      :root {
        --color-bg: #ffffff;
        --color-text: #171717;
        --color-accent: #533afd;
      }

      body {
        font-family: "Inter", system-ui, sans-serif;
        color: var(--color-text);
        background: var(--color-bg);
      }
    </style>
  </head>
  <body></body>
</html>