What is popular-web-designs?

A catalogue of 54 recognizable website design systems, including Stripe, Linear, Vercel, Notion, and Apple, with HTML and CSS guidance. Each describes visual details such as colors, fonts, spacing, components, and responsive behavior.

Use it when a page should look like a specific named brand or design system. Pair it with a broader design process when the result needs careful visual decisions.

It removes the need to recreate a known brand's visual style from memory. The guidance gives the agent concrete values and patterns to apply to a page.

popular-web-designs — Skill for Claude Code and Codex by yc-software

About the project

QM is a shared work environment for coding agents that gives each employee and conversation an isolated workspace while allowing collaboration in Slack and on the web. Startups use it to run agents for individuals, teams, and company operations, with selectable harnesses and models. The catalogue entries extend QM with skills, instructions, and settings.

yc-software/qm · 14,643 stars · on GitHub · x.com

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add yc-software/qm --skill popular-web-designs

Clone the repo

git clone --depth 1 https://github.com/yc-software/qm

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/yc-software/qm/popular-web-designs.svg)](https://agentmods.dev/skills/yc-software/qm/popular-web-designs)

Your own site

<a href="https://agentmods.dev/skills/yc-software/qm/popular-web-designs"><img src="https://agentmods.dev/badge/skills/yc-software/qm/popular-web-designs.svg" alt="Measured on agentmods" height="20"></a>

Per session 51 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 2,599 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 1 finding. A grade says what 26 rules found in the file — not that it is safe. Third-party audits

NVIDIA SkillSpector warn 7 Sept 2026

SkillSpector: 1 finding, up to medium

These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →

medium Agent Snooping · line 33
Skill enumerates or reads other installed skills. Access to other skills' SKILL.md files or the skills directory reveals prompt instructions, capabilities, and secrets that should be invisible to peer skills.

Fix: Remove all code or instructions that list or read other skills' files or directories. Skills should operate independently; cross-skill access is a privilege escalation.

How audits are shown

Origin 91% copy Near-identical to another mod in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00051	$0.02599
Opus 5	$0.00026	$0.01300
Sonnet 5	$0.00010	$0.00520
Haiku 4.5	$0.00005	$0.00260

Measured 8d ago against content hash c2d2ad857706, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-08, from the pricing page.

Security

Grade A, and why

popular-web-designs scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

Write the file with `write`, verify the result locally (`curl -fsS http://localhost:<port>`,

Origin

This is a copy

91% identical to popular-web-designs — 264 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

skills-seed/popular-web-designs/SKILL.md · 202 lines

How it starts

The opening of the file, as written. The whole thing — 202 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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 under skills/, when installed) instead of picking from this catalog.

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

Pick a design from the catalog below
Read it: read skills/popular-web-designs/templates/<site>.md
Use the design tokens and component specs when generating HTML
Build with write, then serve the result with the publish skill (skills/publish/SKILL.md)

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 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>

Read the full file on GitHub · 202 lines

Files

What ships with it

54 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

8d ago First seen · 202 lines · 51 tokens per session scan A c2d2ad857706

Subscribe to this mod's changes

popular-web-designs is a skill published in the GitHub repository yc-software/qm (14,643 stars, last pushed yesterday), licensed MIT. It adds 51 tokens to every session and 2,599 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). It is 91% identical to popular-web-designs, differing in 264 lines, and is treated as a copy.

CSS and styling Design and UX Frontend ai assistant harness qm

web-design

Penguin visual language for generated web pages and app UIs — GitHub-style simplicity with a single blue accent, light and pure-black dark themes, design tokens, component and chat-interface recipes, plus an opt-in warm paper editorial theme.

Prism-Shadow/penguin-harness · 51 tokens

spherse-create-agent-chat-theme

Use when creating or editing an agent-level Spherse chat window theme.css for custom chat backgrounds, headers, message bubbles, avatars, composer inputs, markdown blocks, or placeholder text.

mengrru/Spherse · 45 tokens

prototype

A clickable HTML and CSS mock-up for testing one main user journey before building the real software. It uses sample data and can contain one to three connected screens.

andrewcigan/vibe-dev-plugin · 62 tokens

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OWWZO/ai-agent · 40 tokens

design-system

A skill for defining an app's visual rules and implementing them with NativeWind and Tailwind, tools for styling interfaces with reusable settings. It covers colors, text styles, reusable component variants, and screen layouts.

seungmanchoi/react-native-fsd-agent-template · 103 tokens

design-taste-frontend-v1

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is design-taste-frontend (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

creativedswork/dscode · 61 tokens

popular-web-designs