agentmods.dev

creative-popular-web-designs

creative-popular-web-designs is a skill for Claude Code, Codex from xiaohei-info/oh-my-multica. It costs 25 tokens per session (2,452 once invoked), scanned A, a copy of popular-web-designs, MIT.

A catalog of 54 real website design systems, provided as HTML/CSS guidance. Each one describes colors, fonts, components, spacing, shadows, responsive behavior, and implementation details.

In plain words
What is it for?
Use it to style generated HTML/CSS after familiar products such as Stripe, Linear, or Vercel, and to choose reusable design tokens and component patterns.
Why use it?
It gives a coding agent concrete visual rules to follow when creating a website, reducing guesswork about layout and styling.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one. Also seen: mentions OpenCode.

not rated 26repo +2 5d ago A scan 25 tokens copy · 98% MIT

Good fit Use it to style generated HTML/CSS after familiar products such as Stripe, Linear, or Vercel, and to choose reusable design tokens and component patterns.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/xiaohei-info/oh-my-multica/creative-popular-web-designs
View source ↗ xiaohei-info/oh-my-multica
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 xiaohei-info/oh-my-multica --skill creative-popular-web-designs
Clone the repo
git clone --depth 1 https://github.com/xiaohei-info/oh-my-multica

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.

agentmods badge for creative-popular-web-designs

README.md
[![agentmods](https://agentmods.dev/badge/skills/xiaohei-info/oh-my-multica/creative-popular-web-designs/github.svg)](https://agentmods.dev/skills/xiaohei-info/oh-my-multica/creative-popular-web-designs)
Your own site
<a href="https://agentmods.dev/skills/xiaohei-info/oh-my-multica/creative-popular-web-designs"><img src="https://agentmods.dev/badge/skills/xiaohei-info/oh-my-multica/creative-popular-web-designs/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for creative-popular-web-designs

Your own site · 80×15
<a href="https://agentmods.dev/skills/xiaohei-info/oh-my-multica/creative-popular-web-designs"><img src="https://agentmods.dev/badge/skills/xiaohei-info/oh-my-multica/creative-popular-web-designs.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 25 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,452 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin 98% 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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00025 $0.02452
Opus 5 $0.00013 $0.01226
Sonnet 5 $0.00005 $0.00490
Haiku 4.5 $0.00003 $0.00245

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

Security

Grade A, and why

creative-popular-web-designs scanned grade A with 0 findings 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 12d 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.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

98% identical to popular-web-designs — 7 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.

src/omac/agents/architect/skills/creative-popular-web-designs/SKILL.md · 215 lines

How it starts

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

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.

How to Use

  1. Pick a design from the catalog below
  2. Load it: skill_view(name="popular-web-designs", file_path="templates/<site>.md")
  3. Use the design tokens and component specs when generating HTML
  4. Pair with the generative-widgets skill to serve the result via cloudflared tunnel

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_file for HTML creation and browser_vision 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>
  <!-- Paste the Google Fonts <link> from the template's implementation notes -->
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    /* Apply the template's color palette as CSS custom properties */
    :root {
      --color-bg: #ffffff;
      --color-text: #171717;
      --color-accent: #533afd;
      /* ... more from template Section 2 */
    }
    /* Apply typography from template Section 3 */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--color-text);
      background: var(--color-bg);
    }
    /* Apply component styles from template Section 4 */
    /* Apply layout from template Section 5 */
    /* Apply shadows from template Section 6 */
  </style>
</head>
<body>
  <!-- Build using component specs from the template -->
</body>
</html>

Read the full file on GitHub · 215 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.

  1. 12d ago First seen · 215 lines · 25 tokens per session scan A 4a3ac3fcee66

Subscribe to this mod's changes

creative-popular-web-designs is a skill published in the GitHub repository xiaohei-info/oh-my-multica (26 stars, last pushed 5d ago), licensed MIT. It adds 25 tokens to every session and 2,452 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. It is 98% identical to popular-web-designs, differing in 7 lines, and is treated as a copy.

CSS and stylingClaude CodeDesign and UXFrontendagent-orchestrationagentic-aiai-agentsclicssdesign-systemshtmltemplatesuiweb-development
Related

Other skills, from other repositories

popular-web-designs

54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.

ariffazil/AAA · 23 tokens

popular-web-designs

54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.

StarryCod/cogitum · 23 tokens

popular-web-designs

54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.

NousResearch/hermes-agent · 23 tokens

popular-web-designs

54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components, layout rules, and ready-to-use CSS values.

NeoLabs-Systems/NeoAgent · 66 tokens

popular-web-designs

54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.

aivrar/portable-hermes-agent · 23 tokens

popular-web-designs

54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components, layout rules, and ready-to-use CSS values.

graniet/kheish · 61 tokens