agentmods.dev

popular-web-designs

popular-web-designs is a skill for Claude Code, Codex from graniet/kheish. It costs 61 tokens per session (2,476 once invoked), scanned A, a copy of popular-web-designs, Apache-2.0.

A library of 54 visual design systems based on real websites, including their colors, type styles, layouts, components, spacing, shadows, and responsive behavior. A design system is a set of rules for keeping an interface visually consistent.

In plain words
What is it for?
Choose a reference style, load its template, and use the supplied design tokens and CSS guidance to create HTML and CSS with a similar visual identity.
Why use it?
It provides concrete design rules and CSS values when creating a website, reducing the need to decide every visual detail from scratch.

Skill for Claude CodeCodex

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

not rated 227repo 1mo ago A scan 61 tokens copy · 81% Apache-2.0

Good fit Choose a reference style, load its template, and use the supplied design tokens and CSS guidance to create HTML and CSS with a similar visual identity.

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

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 popular-web-designs

README.md
[![agentmods](https://agentmods.dev/badge/skills/graniet/kheish/popular-web-designs/github.svg)](https://agentmods.dev/skills/graniet/kheish/popular-web-designs)
Your own site
<a href="https://agentmods.dev/skills/graniet/kheish/popular-web-designs"><img src="https://agentmods.dev/badge/skills/graniet/kheish/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 popular-web-designs

Your own site · 80×15
<a href="https://agentmods.dev/skills/graniet/kheish/popular-web-designs"><img src="https://agentmods.dev/badge/skills/graniet/kheish/popular-web-designs.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 61 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,476 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 81% 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.00061 $0.02476
Opus 5 $0.00030 $0.01238
Sonnet 5 $0.00012 $0.00495
Haiku 4.5 $0.00006 $0.00248

Measured 11d ago against content hash 2c75ce5910c3, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade A, and why

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

81% identical to popular-web-designs — 67 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/creative/popular-web-designs/SKILL.md · 227 lines

How it starts

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

Kheish Compatibility

This skill is repo-local and stays inactive until explicitly activated.

When the original instructions refer to legacy tool names, use these Kheish mappings:

  • terminal => bash
  • web_extract => web_fetch, plus web_search when discovery is needed
  • search_files => grep_search and glob_search
  • browser_* tools require a browser-capable surfaced tool or MCP; if none is available, use the closest available surface and say so explicitly

When the instructions mention local helper files, resolve them from ${KHEISH_SKILL_DIR}.

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.

How to Use

  1. Pick a design from the catalog below
  2. Load it: read templates/<site>.md from this skill directory with read_file
  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 a Kheish 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 Kheish 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 · 227 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. 11d ago First seen · 227 lines · 61 tokens per session scan A 2c75ce5910c3

Subscribe to this mod's changes

popular-web-designs is a skill published in the GitHub repository graniet/kheish (227 stars, last pushed 1mo ago), licensed Apache-2.0. It adds 61 tokens to every session and 2,476 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. It is 81% identical to popular-web-designs, differing in 67 lines, and is treated as a copy.

CSS and stylingDesign and UXFrontendagentaiai-agentai-agentsanthropiccssdesign-systemshtmltemplatesuiweb-development
Related

Other skills, from other repositories

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.

S3YED/appie-kit · 23 tokens

popular-web-designs

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

davidtoby/agent-skills · 23 tokens

popular-web-designs

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

john-data-chen/hermes-agent-backup · 23 tokens