Agent skill

Prismer Popular Web Designs

by Prismer-AI in Prismer-AI/PrismerCloud

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

MITAuto-check passedFrontend & Design

Install Prismer Popular Web Designs

skills CLI
$ npx skills add Prismer-AI/PrismerCloud --skill prismer-popular-web-designs -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Prismer-AI/PrismerCloud prismer-popular-web-designs --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Prismer-AI/PrismerCloud.git skills-src && mkdir -p .claude/skills && cp -r skills-src/sdk/cloud/catalog/skills/prismer-popular-web-designs .claude/skills/prismer-popular-web-designs && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
prismer-popular-web-designs
GitHub stars
1.6k
Used in
3 other repos
Token cost
~2.5k tokens
SKILL.md length
930 words
Files
59
Skills in repo
88
Repo updated
First seen
Licence
MIT

At a glance

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

  • Works in 4 steps: Pick a design from the catalog below → Load it: read templates/.md relative to… → Use the design tokens and component… → …
  • Tasks that involve Design systems
  • SKILL.md covers Related design skills, How to Use, HTML Generation Pattern and Font Substitution Reference, plus 2 more sections
  • Reaches fonts.googleapis.com

What it does

Prismer Popular Web Designs is an agent skill from Prismer-AI/PrismerCloud. 54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.

Its SKILL.md is about 2.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 59 other files (for example `PROVENANCE.md`, `templates/airbnb.md` and `templates/airtable.md`).

It sits in Frontend & Design, covering Design systems. It works with Stripe and Vercel. The licence is MIT.

When your agent uses it

  • Tasks that involve Design systems

Example prompts

  • “/prismer-popular-web-designs”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Pick a design from the catalog below
  2. Load it: read templates/.md relative to this skill directory
  3. Use the design tokens and component specs when generating HTML
  4. Use a loopback-only preview or an authenticated task artifact preview

What it can do on your machine

Read from SKILL.md and the folder at commit 0d240dd. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are html).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • fonts.googleapis.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Prismer Popular Web Designs loads about 2.5k tokens when it runs. Until then it costs about 22 tokens; SKILL.md has 930 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~22
When it runs · the whole SKILL.md, loaded when a task matches
~2.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Prismer-AI/PrismerCloud at commit 0d240dd, republished under its MIT licence (© Prismer-AI). 930 words, ~2,490 tokens.

Download SKILL.mdSave it as .claude/skills/prismer-popular-web-designs/SKILL.md (or your agent's skills folder). This skill also uses 58 other files; get the full folder from GitHub.
name
prismer-popular-web-designs
description
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
scope
common
category
creative
version
1.0.0
author
Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md)
license
MIT
tags
design, css, html, ui, web-development, design-systems, templates
platforms
linux, macos, windows
triggers
build a page that looks like, make it look like stripe, design like linear, vercel style, create a UI, web design, landing page, dashboard design, website…
metadata.nativeReplaces
popular-web-designs
metadata.requiresExplicitGrant
true

54 adapted brand-reference descriptions for explicitly requested HTML/CSS design work. They retain palette, typography, component, spacing and prompt examples, but are not certified current brand specifications. Use source screenshots and actual product assets when fidelity matters; local corrections intentionally override invalid or inaccessible example values.

  • frontend-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: frontend-design drives the workflow, this skill supplies the visual vocabulary.
  • prismer-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: read templates/<site>.md relative to this skill directory
  3. Use the design tokens and component specs when generating HTML
  4. Use a loopback-only preview or an authenticated task artifact preview

Each template includes a Prismer Implementation Notes block at the top with:

  • Optional network font fallback; vendor licensed fonts for offline output
  • CSS font-family stacks for primary and monospace
  • Reminders to use write_file for HTML creation and the available browser inspection tool 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 Prismer 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 on loopback or through an authenticated task preview, and verify the result with the available browser inspection tool 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 FontCDN SubstituteCharacter
Geist / Geist SansGeist (on Google Fonts)Geometric, compressed tracking
Geist MonoGeist Mono (on Google Fonts)Clean monospace, ligatures
sohne-var (Stripe)Source Sans 3Light weight elegance
Berkeley MonoJetBrains MonoTechnical monospace
Airbnb Cereal VFDM SansRounded, friendly geometric
Circular (Spotify)DM SansGeometric, warm
figmaSansInterClean humanist
Pin Sans (Pinterest)DM SansFriendly, rounded
NVIDIA-EMEAInter (or Arial system)Industrial, clean
CoinbaseDisplay/SansDM SansGeometric, trustworthy
UberMoveDM SansBold, tight
HashiCorp SansInterEnterprise, neutral
waldenburgNormal (Sanity)Space GroteskGeometric, slightly condensed
IBM Plex Sans/MonoIBM Plex Sans/MonoAvailable on Google Fonts
Rubik (Sentry)RubikAvailable 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
TemplateSiteStyle
claude.mdAnthropic ClaudeWarm terracotta accent, clean editorial layout
cohere.mdCohereVibrant gradients, data-rich dashboard aesthetic
elevenlabs.mdElevenLabsDark cinematic UI, audio-waveform aesthetics
minimax.mdMinimaxBold dark interface with neon accents
mistral.ai.mdMistral AIFrench-engineered minimalism, purple-toned
ollama.mdOllamaTerminal-first, monochrome simplicity
opencode.ai.mdOpenCode AIDeveloper-centric dark theme, full monospace
replicate.mdReplicateClean white canvas, code-forward
runwayml.mdRunwayMLCinematic dark UI, media-rich layout
together.ai.mdTogether AITechnical, blueprint-style design
voltagent.mdVoltAgentVoid-black canvas, emerald accent, terminal-native
x.ai.mdxAIStark monochrome, futuristic minimalism, full monospace
Show full SKILL.md (419 more words)Show less
Developer Tools & Platforms
TemplateSiteStyle
cursor.mdCursorSleek dark interface, gradient accents
expo.mdExpoDark theme, tight letter-spacing, code-centric
linear.app.mdLinearUltra-minimal dark-mode, precise, purple accent
lovable.mdLovablePlayful gradients, friendly dev aesthetic
mintlify.mdMintlifyClean, green-accented, reading-optimized
posthog.mdPostHogPlayful branding, developer-friendly dark UI
raycast.mdRaycastSleek dark chrome, vibrant gradient accents
resend.mdResendMinimal dark theme, monospace accents
sentry.mdSentryDark dashboard, data-dense, pink-purple accent
supabase.mdSupabaseDark emerald theme, code-first developer tool
superhuman.mdSuperhumanPremium dark UI, keyboard-first, purple glow
vercel.mdVercelBlack and white precision, Geist font system
warp.mdWarpDark IDE-like interface, block-based command UI
zapier.mdZapierWarm orange, friendly illustration-driven
Infrastructure & Cloud
TemplateSiteStyle
clickhouse.mdClickHouseYellow-accented, technical documentation style
composio.mdComposioModern dark with colorful integration icons
hashicorp.mdHashiCorpEnterprise-clean, black and white
mongodb.mdMongoDBGreen leaf branding, developer documentation focus
sanity.mdSanityRed accent, content-first editorial layout
stripe.mdStripeSignature purple gradients, weight-300 elegance
Design & Productivity
TemplateSiteStyle
airtable.mdAirtableColorful, friendly, structured data aesthetic
cal.mdCal.comClean neutral UI, developer-oriented simplicity
clay.mdClayOrganic shapes, soft gradients, art-directed layout
figma.mdFigmaVibrant multi-color, playful yet professional
framer.mdFramerBold black and blue, motion-first, design-forward
intercom.mdIntercomFriendly blue palette, conversational UI patterns
miro.mdMiroBright yellow accent, infinite canvas aesthetic
notion.mdNotionWarm minimalism, serif headings, soft surfaces
pinterest.mdPinterestRed accent, masonry grid, image-first layout
webflow.mdWebflowBlue-accented, polished marketing site aesthetic
Fintech & Crypto
TemplateSiteStyle
coinbase.mdCoinbaseClean blue identity, trust-focused, institutional feel
kraken.mdKrakenPurple-accented dark UI, data-dense dashboards
revolut.mdRevolutSleek dark interface, gradient cards, fintech precision
wise.mdWiseBright green accent, friendly and clear
Enterprise & Consumer
TemplateSiteStyle
airbnb.mdAirbnbWarm coral accent, photography-driven, rounded UI
apple.mdApplePremium white space, SF Pro, cinematic imagery
bmw.mdBMWDark premium surfaces, precise engineering aesthetic
ibm.mdIBMCarbon design system, structured blue palette
nvidia.mdNVIDIAGreen-black energy, technical power aesthetic
spacex.mdSpaceXStark black and white, full-bleed imagery, futuristic
spotify.mdSpotifyVibrant green on dark, bold type, album-art-driven
uber.mdUberBold 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

© Prismer-AI, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 58 other files in sdk/cloud/catalog/skills/prismer-popular-web-designs of Prismer-AI/PrismerCloud.

  • SKILL.md
  • LICENSE
  • LICENSE.hermes
  • LICENSE.origin
  • PROVENANCE.md
  • templates/airbnb.md
  • templates/airtable.md
  • templates/apple.md
  • templates/bmw.md
  • templates/cal.md
  • templates/claude.md
  • templates/clay.md
  • templates/clickhouse.md
  • templates/cohere.md
  • templates/coinbase.md
  • templates/composio.md
  • templates/cursor.md
  • templates/elevenlabs.md
  • templates/expo.md
  • templates/figma.md
  • … and 39 more

Open the folder on GitHubat commit 0d240dd

Used in 3 other repositories

We found 3 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 3 other GitHub owners. This page covers the copy in Prismer-AI/PrismerCloud, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Prismer Popular Web Designs next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Prismer Popular Web Designs compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Prismer Popular Web Designs this skillPrismer-AI/PrismerCloud1.6k3 repos~2.5kAutomated safety check: PassMIT
Popular Web Designsyc-software/qm15k—~2.9kAutomated safety check: PassMIT
Popular Web DesignsTommy-yw/RunbookHermes5461 repos~2.4kAutomated safety check: PassMIT
Cosscrafter-station/petdex4.2k—~1.4kAutomated safety check: PassMIT
Nextjs Nextra Starter Distillpdsuwwz/nextjs-nextra-starter318—~596Automated safety check: PassMIT
Vercel Geist Design Systemsyhily/kobato114—~3.3kAutomated safety check: PassMIT

Similar skills

  • Popular Web Designs

    yc-software/qm

    54 real-world design systems (Stripe, Linear, Vercel, Notion, Apple…) as ready-to-paste HTML/CSS — exact colors, typography, components, and spacing for styling a page after a known brand.

    15k GitHub stars~2.9k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Popular Web Designs

    Tommy-yw/RunbookHermes

    54 production-quality design systems extracted from real websites.

    546 GitHub starsUsed in 1 repo~2.4k tokens
    Frontend & DesignAuto-check passed
  • Coss

    crafter-station/petdex

    Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.

    4.2k GitHub stars~1.4k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Nextjs Nextra Starter Distill

    pdsuwwz/nextjs-nextra-starter

    Distill and apply this repository's Next.js Nextra starter architecture, implemented features, extension points, and migration patterns.

    318 GitHub stars~596 tokensUpdated 24 days ago
    Frontend & DesignAuto-check passed
  • Community skill for applying the Geist design system to Vercel-inspired rendered frontend UI across React/Next.js/Vite/Astro/Svelte/Vue/HTML/CSS, Tailwind, shadcn, and Radix.

    114 GitHub stars~3.3k tokensUpdated 10 days ago
    Frontend & DesignAuto-check passed
  • Nextjs Nextra Starter Distill Zh

    pdsuwwz/nextjs-nextra-starter

    蒸馏并应用当前仓库的 Next.js Nextra 启动模板架构、已实现功能、二次开发扩展点与迁移模式。适用于理解本项目、继续二次开发、修改 docs/landing/i18n/theme/auth/UI 行为,或把这些 Next.js 16 + Nextra 4 + Tailwind CSS 4 模式复用到其他项目。

    318 GitHub stars~313 tokensUpdated 24 days ago
    Frontend & DesignAuto-check passed

More from Prismer-AI/PrismerCloud

All 88 skills in this repo
  • Prismer Google Workspace

    Prismer-AI/PrismerCloud

    Gives an agent account-scoped access to Gmail, Calendar, Drive, Contacts, Docs and Sheets through the gws CLI or a bundled Python client.

    1.6k GitHub starsUsed in 3 repos~4.2k tokens
    Auto-check passed
  • Prismer Skill Creator

    Prismer-AI/PrismerCloud

    Walks an agent through creating, importing, editing, validating, testing and publishing Prismer Skills with a fixed workflow and bundled scripts.

    1.6k GitHub stars~2.6k tokensUpdated today
    Auto-check: notes
  • Himalaya Email CLI

    Prismer-AI/PrismerCloud

    Operates a mailbox from the terminal with the external Himalaya CLI over IMAP, SMTP, Notmuch or Sendmail, separate from any built-in email gateway adapter.

    1.6k GitHub starsUsed in 2 repos~2.3k tokens
    Auto-check passed
  • Prismer Image Generation

    Prismer-AI/PrismerCloud

    Generates one image from a text prompt with a bundled Node.js helper and delivers it once as the attachment to the current Prismer reply.

    1.6k GitHub stars~1.4k tokensUpdated today
    Auto-check passed
  • Manim Explainer Videos

    Prismer-AI/PrismerCloud

    Produces 3Blue1Brown-style explainer animations with Manim Community Edition for math, algorithms, equations and architecture diagrams, with planning and rendering references.

    1.6k GitHub starsUsed in 2 repos~3.1k tokens
    Auto-check passed
  • Prismer Role Builder

    Prismer-AI/PrismerCloud

    Creates or updates Prismer role templates from a persona, SOP or job description, and turns a role into a working agent that runs its first task through a bundled script.

    1.6k GitHub stars~2.3k tokensUpdated today
    Auto-check: notes

Works with

Questions about Prismer Popular Web Designs

What does Prismer Popular Web Designs do?

54 real design systems (Stripe, Linear, Vercel) as HTML/CSS. Prismer Popular Web Designs is an agent skill from Prismer-AI/PrismerCloud. 54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.

When should I use Prismer Popular Web Designs?

Prismer Popular Web Designs fits situations like: tasks that involve Design systems.

How do I install Prismer Popular Web Designs in Claude Code?

Run `npx skills add Prismer-AI/PrismerCloud --skill prismer-popular-web-designs -a claude-code`. Or copy the skill folder (sdk/cloud/catalog/skills/prismer-popular-web-designs in Prismer-AI/PrismerCloud) into .claude/skills/prismer-popular-web-designs in your project. Claude Code loads it when a task matches its description.

How do I install Prismer Popular Web Designs in Codex?

Run `npx skills add Prismer-AI/PrismerCloud --skill prismer-popular-web-designs -a codex`. Or copy the skill folder (sdk/cloud/catalog/skills/prismer-popular-web-designs in Prismer-AI/PrismerCloud) into .agents/skills/prismer-popular-web-designs in your project. Codex loads it when a task matches its description.

Can I use Prismer Popular Web Designs in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Prismer-AI/PrismerCloud --skill prismer-popular-web-designs -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/prismer-popular-web-designs, .gemini/skills/prismer-popular-web-designs, .github/skills/prismer-popular-web-designs and .opencode/skills/prismer-popular-web-designs in your project.

What does Prismer Popular Web Designs need to run?

SKILL.md names no scripts, command-line tools or credentials: Prismer Popular Web Designs is instructions for the agent only.

Does Prismer Popular Web Designs access the network?

SKILL.md names 1 domain. In commands or code: fonts.googleapis.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Prismer Popular Web Designs safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Prismer Popular Web Designs use?

Prismer Popular Web Designs is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Prismer Popular Web Designs use?

About 2.5k tokens (SKILL.md is roughly 10k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Prismer Popular Web Designs?

Skills that share tags, products or a category with Prismer Popular Web Designs: Popular Web Designs (yc-software/qm, 15k stars), Popular Web Designs (Tommy-yw/RunbookHermes, 546 stars), Coss (crafter-station/petdex, 4.2k stars) and Nextjs Nextra Starter Distill (pdsuwwz/nextjs-nextra-starter, 318 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Prismer Popular Web Designs?

Prismer-AI (a GitHub organization) maintains it in Prismer-AI/PrismerCloud, which has 1,555 GitHub stars. The repository holds 88 skills in this directory. The repository was last updated on October 11, 2026.

Source: Prismer-AI/PrismerCloud on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.