Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →lord1egypt/popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
Passed 17 of 21 test cases with the skill, and 3 of 21 without it.
and 14 more in the full report
17 fixed3 passed either way4 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 17 test cases the skill fixed. Same model, same prompt, with and without the skill.
I want to create a clean publishing site with warm minimalism, serif headings, and soft surfaces. Which template file from the catalog should be loaded?
| Checked | Without skill | With skill |
|---|---|---|
| Loads templates/notion.md via skill_view | Missed | Passed |
The instructions your model reads when the skill loads.
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.
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.skill_view(name="popular-web-designs", file_path="templates/<site>.md")generative-widgets skill to serve the result via cloudflared tunnelEach template includes a Hermes Implementation Notes block at the top with:
<link> tag (ready to paste)write_file for HTML creation and browser_vision for verification<!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>
<!-- Paste the Google Fonts <link> from the template's Hermes notes -->
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
<style>
test cases passed, vs 3 / 21 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.