Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Popular Web Designs · graniet | DecimalAI

graniet/popular-web-designs

SkillScore82Maintained

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.

Frontendby graniet

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/graniet-popular-web-designs/SKILL.md

decimalai skills pull graniet-popular-web-designs --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/graniet-popular-web-designs/SKILL.md https://app.decimal.ai/s/graniet-popular-web-designs/SKILL.md

Raw file: /s/graniet-popular-web-designs/SKILL.md ↗ · machine-readable summary at /s/graniet-popular-web-designs.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 6d ago

—+61% tokens0% turns82% of whole cases pass with skill (18/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-05	✗→✓	▲ Improved	94%	0%
case-06	✗→✓	▲ Improved	78%	0%
case-07	✗→✓	▲ Improved	55%	0%
case-08	✗→✓	▲ Improved	34%	0%
case-09	✗→✓	▲ Improved	110%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

graniet / kheish

skills/creative/popular-web-designs/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1Bundled 50 files

Skill contents

templates/

SKILL.md

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

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.

How to Use

Pick a design from the catalog below
Load it: read templates/<site>.md from this skill directory with read_file
Use the design tokens and component specs when generating HTML
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

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

Write the file with write_file, serve with the generative-widgets workflow (cloudflared tunnel), and verify the result with browser_vision to confirm visual accuracy.

Font Substitution Reference

Most sites use proprietary fonts unavailable via CDN. Each template maps to a Google Fonts substitute that preserves the design's character. Common mappings:

| Proprietary Font | CDN Substitute | Character | |---|---|---| | Geist / Geist Sans | Geist (on Google Fonts) | Geometric, compressed tracking | | Geist Mono | Geist Mono (on Google Fonts) | Clean monospace, ligatures | | sohne-var (Stripe) | Source Sans 3 | Light weight elegance | | Berkeley Mono | JetBrains Mono | Technical monospace | | Airbnb Cereal VF | DM Sans | Rounded, friendly geometric | | Circular (Spotify) | DM Sans | Geometric, warm | | figmaSans | Inter | Clean humanist | | Pin Sans (Pinterest) | DM Sans | Friendly, rounded | | NVIDIA-EMEA | Inter (or Arial system) | Industrial, clean | | CoinbaseDisplay/Sans | DM Sans | Geometric, trustworthy | | UberMove | DM Sans | Bold, tight | | HashiCorp Sans | Inter | Enterprise, neutral | | waldenburgNormal (Sanity) | Space Grotesk | Geometric, slightly condensed | | IBM Plex Sans/Mono | IBM Plex Sans/Mono | Available on Google Fonts | | Rubik (Sentry) | Rubik | Available on Google Fonts |

When a template's CDN font matches the original (Inter, IBM Plex, Rubik, Geist), no substitution loss occurs. When a substitute is used (DM Sans for Circular, Source Sans 3 for sohne-var), follow the template's weight, size, and letter-spacing values closely — those carry more visual identity than the specific font face.

Design Catalog

AI & Machine Learning

| Template | Site | Style | |---|---|---| | claude.md | Anthropic Claude | Warm terracotta accent, clean editorial layout | | cohere.md | Cohere | Vibrant gradients, data-rich dashboard aesthetic | | elevenlabs.md | ElevenLabs | Dark cinematic UI, audio-waveform aesthetics | | minimax.md | Minimax | Bold dark interface with neon accents | | mistral.ai.md | Mistral AI | French-engineered minimalism, purple-toned | | ollama.md | Ollama | Terminal-first, monochrome simplicity | | opencode.ai.md | OpenCode AI | Developer-centric dark theme, full monospace | | replicate.md | Replicate | Clean white canvas, code-forward | | runwayml.md | RunwayML | Cinematic dark UI, media-rich layout | | together.ai.md | Together AI | Technical, blueprint-style design | | voltagent.md | VoltAgent | Void-black canvas, emerald accent, terminal-native | | x.ai.md | xAI | Stark monochrome, futuristic minimalism, full monospace |

Developer Tools & Platforms

| Template | Site | Style | |---|---|---| | cursor.md | Cursor | Sleek dark interface, gradient accents | | expo.md | Expo | Dark theme, tight letter-spacing, code-centric | | linear.app.md | Linear | Ultra-minimal dark-mode, precise, purple accent | | lovable.md | Lovable | Playful gradients, friendly dev aesthetic | | mintlify.md | Mintlify | Clean, green-accented, reading-optimized | | posthog.md | PostHog | Playful branding, developer-friendly dark UI | | raycast.md | Raycast | Sleek dark chrome, vibrant gradient accents | | resend.md | Resend | Minimal dark theme, monospace accents | | sentry.md | Sentry | Dark dashboard, data-dense, pink-purple accent | | supabase.md | Supabase | Dark emerald theme, code-first developer tool | | superhuman.md | Superhuman | Premium dark UI, keyboard-first, purple glow | | vercel.md | Vercel | Black and white precision, Geist font system | | warp.md | Warp | Dark IDE-like interface, block-based command UI | | zapier.md | Zapier | Warm orange, friendly illustration-driven |

Infrastructure & Cloud

| Template | Site | Style | |---|---|---| | clickhouse.md | ClickHouse | Yellow-accented, technical documentation style | | composio.md | Composio | Modern dark with colorful integration icons | | hashicorp.md | HashiCorp | Enterprise-clean, black and white | | mongodb.md | MongoDB | Green leaf branding, developer documentation focus | | sanity.md | Sanity | Red accent, content-first editorial layout | | stripe.md | Stripe | Signature purple gradients, weight-300 elegance |

Design & Productivity

| Template | Site | Style | |---|---|---| | airtable.md | Airtable | Colorful, friendly, structured data aesthetic | | cal.md | Cal.com | Clean neutral UI, developer-oriented simplicity | | clay.md | Clay | Organic shapes, soft gradients, art-directed layout | | figma.md | Figma | Vibrant multi-color, playful yet professional | | framer.md | Framer | Bold black and blue, motion-first, design-forward | | intercom.md | Intercom | Friendly blue palette, conversational UI patterns | | miro.md | Miro | Bright yellow accent, infinite canvas aesthetic | | notion.md | Notion | Warm minimalism, serif headings, soft surfaces | | pinterest.md | Pinterest | Red accent, masonry grid, image-first layout | | webflow.md | Webflow | Blue-accented, polished marketing site aesthetic |

Fintech & Crypto

| Template | Site | Style | |---|---|---| | coinbase.md | Coinbase | Clean blue identity, trust-focused, institutional feel | | kraken.md | Kraken | Purple-accented dark UI, data-dense dashboards | | revolut.md | Revolut | Sleek dark interface, gradient cards, fintech precision | | wise.md | Wise | Bright green accent, friendly and clear |

Enterprise & Consumer

| Template | Site | Style | |---|---|---| | airbnb.md | Airbnb | Warm coral accent, photography-driven, rounded UI | | apple.md | Apple | Premium white space, SF Pro, cinematic imagery | | bmw.md | BMW | Dark premium surfaces, precise engineering aesthetic | | ibm.md | IBM | Carbon design system, structured blue palette | | nvidia.md | NVIDIA | Green-black energy, technical power aesthetic | | spacex.md | SpaceX | Stark black and white, full-bleed imagery, futuristic | | spotify.md | Spotify | Vibrant green on dark, bold type, album-art-driven | | uber.md | Uber | Bold black and white, tight type, urban energy |

Choosing a Design

Match the design to the content:

Developer tools / dashboards: Linear, Vercel, Supabase, Raycast, Sentry
Documentation / content sites: Mintlify, Notion, Sanity, MongoDB
Marketing / landing pages: Stripe, Framer, Apple, SpaceX
Dark mode UIs: Linear, Cursor, ElevenLabs, Warp, Superhuman
Light / clean UIs: Vercel, Stripe, Notion, Cal.com, Replicate
Playful / friendly: PostHog, Figma, Lovable, Zapier, Miro
Premium / luxury: Apple, BMW, Stripe, Superhuman, Revolut
Data-dense / dashboards: Sentry, Kraken, Cohere, ClickHouse
Monospace / terminal aesthetic: Ollama, OpenCode, x.ai, VoltAgent

Want to see if graniet/popular-web-designs would activate on your phrasing? Try it before you install — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/23/2026, 04:34 UTC · 22 cases

Measured on 18 comparable cases — below the 22 needed to publish a lift, so this result is shown here but not on the registry card or leaderboard.

Lift

+64%

82% vs 18%

Agent turns

1.0 vs 1.0

Tokens

+61%

3,373.11 vs 2,102.06

fail → pass · 14pass → pass · 4fail → fail · 4

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 I'm launching a developer CLI tool and need a dark-themed product landing page. Please select a suitable developer platform design template from your catalog, generate a complete HTML file with proper typography and theme variables, write the file to disk, set up a tunnel preview, and perform a visual check using browser tools to make sure it looks crisp.	fail→fail	5,611	9,171	+63%	1	1	0%	272	2,933	+978%	0	0	—
case-02 Can you build a clean, editorial-style homepage for our technical documentation site? Look up an appropriate docs-oriented aesthetic from your design collection, construct the HTML page using its color palette and Google font link, save the file, and verify how it renders visually.	fail→fail	8,387	6,739	-20%	1	1	0%	557	2,987	+436%	0	0	—
case-03 We need a showcase pricing section for our new SaaS platform with a polished fintech feel. Pick a fitting fintech design system from your library, code the HTML layout with custom CSS properties matching that system, write out the HTML document, serve it for live preview, and verify the rendered interface.	fail→fail	38,703	5,897	-85%	1	1	0%	1,126	2,879	+156%	0	0	—
case-04 We want to match Spotify's visual identity for a web player widget. We don't have access to the proprietary Circular webfont binary. Should we fallback to standard system sans-serif Arial, or is there a Google Fonts CDN substitute recommended to match Spotify's rounded geometric character?	fail→fail	11,909	27,174	+128%	1	1	0%	2,015	2,888	+43%	0	0	—
case-05 We are replicating Stripe's homepage styling. Stripe uses sohne-var natively. What Google Fonts CDN substitute should be used to mimic Stripe's weight-300 light elegance?	fail→pass	10,894	5,828	-47%	1	1	0%	1,816	3,517	+94%	0	0	—
case-06 We are building a dark terminal UI for an AI coding agent inspired by terminal-first aesthetic platforms. Which font on Google Fonts serves as a direct technical monospace substitute for Berkeley Mono when configuring our stylesheet?	fail→pass	10,710	2,701	-75%	1	1	0%	1,668	2,975	+78%	0	0	—
case-07 We are implementing Sanity's content-first editorial look. Sanity uses waldenburgNormal as its primary font. Which Google Fonts CDN substitute captures its geometric, slightly condensed character?	fail→pass	11,839	2,939	-75%	1	1	0%	1,953	3,023	+55%	0	0	—
case-08 We want to generate a dark mode developer dashboard page matching Linear's design system. Which template file in the design catalog contains Linear's exact CSS custom properties and color palette, and how should it be loaded before writing the HTML?	fail→pass	11,788	3,445	-71%	1	1	0%	2,333	3,129	+34%	0	0	—
case-09 We are building a landing page for an AI image generation startup with a cinematic dark aesthetic similar to RunwayML. Which template file should be read from the templates directory to obtain its color palette and component specs?	fail→pass	7,997	2,752	-66%	1	1	0%	1,379	2,900	+110%	0	0	—
case-10 We are creating a technical documentation portal for our database engine and want a yellow-accented documentation design style. Which catalog template matches this look?	fail→pass	12,845	3,091	-76%	1	1	0%	2,008	3,026	+51%	0	0	—
case-11 We are creating an analytics dashboard with a playful branding style and developer-friendly dark UI. Which design catalog template represents this aesthetic?	fail→pass	14,640	4,502	-69%	1	1	0%	2,303	3,290	+43%	0	0	—
case-12 We are building a website for a luxury electric vehicle brand and need a high-end dark surface aesthetic. Which catalog template offers dark premium surfaces and precise engineering styling?	fail→pass	11,326	4,138	-63%	1	1	0%	1,713	3,194	+86%	0	0	—
case-13 We need to create a terminal-native, void-black interface with emerald accents for an autonomous agent framework. Which catalog template file should be loaded?	fail→pass	11,558	2,069	-82%	1	1	0%	2,020	2,821	+40%	0	0	—
case-14 We are designing a mobile fintech application landing page with a bright green accent and clear, friendly presentation. Which catalog template fits this description?	fail→pass	9,487	3,654	-61%	1	1	0%	1,413	3,069	+117%	0	0	—
case-15 When building an HTML page from any template in the catalog, where should CSS custom properties like --color-bg and --color-accent be declared in the document structure?	pass→pass	9,228	3,734	-60%	1	1	0%	1,661	3,227	+94%	0	0	—
case-16 We want to create a web page styled like Anthropic's Claude website. Which template file should be read, and what visual characteristics define its accent color?	fail→pass	9,459	2,993	-68%	1	1	0%	1,446	2,907	+101%	0	0	—
case-17 We are designing a web page using Pinterest's design language. Pinterest uses Pin Sans. Which Google Fonts CDN substitute is recommended to capture its rounded, friendly feel?	fail→pass	9,976	2,248	-77%	1	1	0%	1,678	2,870	+71%	0	0	—
case-18 We are styling an enterprise website based on IBM's design system. Which font family on Google Fonts provides direct 1:1 coverage for both sans and monospace variants without requiring substitution?	pass→pass	5,430	2,936	-46%	1	1	0%	1,074	3,078	+187%	0	0	—
case-19 We need to generate a full-bleed, futuristic landing page with a stark black and white aesthetic for an aerospace technology company. Which template file should be used?	fail→pass	13,506	2,072	-85%	1	1	0%	2,751	2,794	+2%	0	0	—
case-20 We have a Tailwind CSS v3 config file with custom color extensions. How do we convert the theme.extend.colors block in tailwind.config.js to the new @theme directive in Tailwind CSS v4?	pass→pass	11,788	10,036	-15%	1	1	0%	2,198	4,445	+102%	0	0	—
case-21 Write a standalone SVG file for a geometric battery icon with rounded corners, a green charge indicator level, and an outer border. Output only the valid <svg> tag.	fail→pass	30,899	17,596	-43%	1	1	0%	6,175	6,117	-1%	0	0	—
case-22 How do you configure font-display: swap and link rel="preload" attributes in HTML to prevent flash of unstyled text (FOUT) when loading custom web fonts?	pass→pass	11,355	9,942	-12%	1	1	0%	2,248	4,334	+93%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted, and 18 counted toward the lift figure. The other 4 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of +64 percentage points is the difference between those two pass rates over the 18 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 18.2%
Pass rate with the skill: 81.8%
Cases attempted: 22
Cases counted toward lift: 18
Cases that regressed: 1
Skill version measured: v1
Run completed: 8/23/2026, 04:34 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-05

Prompt

We are replicating Stripe's homepage styling. Stripe uses sohne-var natively. What Google Fonts CDN substitute should be used to mimic Stripe's weight-300 light elegance?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run82

Live evalNeeds ≥20 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+110% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 6 days ago

Other measured skills in the registry, with their headline benchmark lift.