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.

These templates are reference specifications, not proprietary production component source code. If a user asks to “use the real components” or “get the source code,” do not present these templates as source components. Use them for calibration, or import actual open-source/project-local components separately and label the distinction clearly.

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 — use when the deliverable is a formal DESIGN.md token spec file, not a rendered artifact.

How to Use