popular-web-designs¶
Source: nousresearch/hermes-agent (official Hermes bundled skill)
Installs: 451+ on skills.sh
Category: Creative / Design
Skill ID: popular-web-designs
Overview¶
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.
Design systems include: Stripe, Linear, Vercel, Apple, Airbnb, Notion, Supabase, Claude, Figma, Spotify, Coinbase, NVIDIA, Uber, and 40+ more.
Installation¶
npx skills add nousresearch/hermes-agent@popular-web-designs -a hermes-agent -y
After installation, the skill becomes available in Hermes sessions. Verify:
hermes skills inspect popular-web-designs
How to Use¶
- Pick a design from the catalog (54 templates available)
- Load it:
skill_view(name="popular-web-designs", file_path="templates/<site>.md") - Use the design tokens and component specs when generating HTML
- Pair with
generative-widgetsskill to serve the result via cloudflared tunnel
Each template includes a Hermes Implementation Notes block with CDN font substitutes, Google Fonts <link> tags, and CSS font-family stacks.
Triggers¶
The skill activates when you mention: - "build a page that looks like [Stripe/Linear/Vercel/...]" - "make it look like stripe" - "design like linear" - "vercel style" - "create a UI" - "web design" - "landing page" - "dashboard design"
Design Catalog¶
AI & Machine Learning¶
| Template | Site | Style |
|---|---|---|
claude.md |
Anthropic Claude | Warm terracotta accent, clean editorial |
cohere.md |
Cohere | Vibrant gradients, data-rich dashboard |
elevenlabs.md |
ElevenLabs | Dark cinematic UI, audio-waveform |
minimax.md |
Minimax | Bold dark interface, neon accents |
mistral.ai.md |
Mistral AI | French minimalism, purple-toned |
ollama.md |
Ollama | Terminal-first, monochrome simplicity |
opencode.ai.md |
OpenCode AI | Developer-centric dark theme |
replicate.md |
Replicate | Clean white canvas, code-forward |
runwayml.md |
RunwayML | Cinematic dark UI |
together.ai.md |
Together AI | Technical, blueprint-style |
voltagent.md |
VoltAgent | Void-black, emerald accent |
x.ai.md |
xAI | Stark monochrome, futuristic |
Developer Tools & Platforms¶
| Template | Site | Style |
|---|---|---|
cursor.md |
Cursor | Sleek dark, gradient accents |
expo.md |
Expo | Dark theme, code-centric |
linear.app.md |
Linear | Ultra-minimal dark, purple accent |
lovable.md |
Lovable | Playful gradients, friendly |
mintlify.md |
Mintlify | Clean, green-accented |
posthog.md |
PostHog | Playful, developer-friendly |
raycast.md |
Raycast | Sleek dark chrome |
resend.md |
Resend | Minimal dark, monospace accents |
sentry.md |
Sentry | Dark dashboard, pink-purple |
supabase.md |
Supabase | Dark emerald, code-first |
superhuman.md |
Superhuman | Premium dark, purple glow |
vercel.md |
Vercel | Black and white precision, Geist |
Enterprise & Finance¶
| Template | Site | Style |
|---|---|---|
stripe.md |
Stripe | Clean gradients, sophisticated |
airtable.md |
Airtable | Colorful, data-centric |
apple.md |
Apple | Minimalist, product-focused |
bmw.md |
BMW | Premium automotive, dark |
clickhouse.md |
ClickHouse | Technical, data-dense |
coinbase.md |
Coinbase | Geometric, trustworthy blue |
hashicorp.md |
HashiCorp | Enterprise, neutral |
ibm.md |
IBM | Corporate blue, systematic |
intercom.md |
Intercom | Friendly, conversational |
kraken.md |
Kraken | Dark crypto exchange |
nvidia.md |
NVIDIA | Industrial, clean |
revolut.md |
Revolut | Fintech, bold |
uber.md |
Uber | Bold, movement-focused |
wise.md |
Wise | Clean fintech, green accent |
Design & Creative¶
| Template | Site | Style |
|---|---|---|
figma.md |
Figma | Creative tool, colorful |
framer.md |
Framer | Design-forward, animation |
miro.md |
Miro | Collaborative, whiteboard |
pinterest.md |
Visual discovery, masonry | |
sanity.md |
Sanity | Content platform, geometric |
webflow.md |
Webflow | Visual development, clean |
zapier.md |
Zapier | Automation, orange accent |
Consumer¶
| Template | Site | Style |
|---|---|---|
airbnb.md |
Airbnb | Rounded, friendly, warm |
cal.md |
Cal.com | Scheduling, clean |
notion.md |
Notion | All-white, minimal |
spotify.md |
Spotify | Dark, vibrant green |
warp.md |
Warp | Terminal-native, dark |
Related Skills¶
claude-design- Use for the design process and taste (scoping a brief, producing variants, verifying artifacts). Pair withpopular-web-designswhen you want a thoughtfully-designed page styled after a known brand.design-md- Use when the deliverable is a formal DESIGN.md token spec file, not a rendered artifact.generative-widgets- Use to serve generated HTML via cloudflared tunnel for live preview.
Font Substitution Reference¶
Most sites use proprietary fonts unavailable via CDN. Each template maps to a Google Fonts substitute:
| Proprietary Font | CDN Substitute | Character |
|---|---|---|
| Geist / Geist Sans | Geist (Google Fonts) | Geometric, compressed tracking |
| sohne-var (Stripe) | Source Sans 3 | Light weight elegance |
| Berkeley Mono | JetBrains Mono | Technical monospace |
| Airbnb Cereal VF | DM Sans | Rounded, friendly |
| Circular (Spotify) | DM Sans | Geometric, warm |
| figmaSans | Inter | Clean humanist |
| CoinbaseDisplay/Sans | DM Sans | Geometric, trustworthy |
| IBM Plex Sans/Mono | IBM Plex Sans/Mono | Available on Google Fonts |
Verification¶
# Check skill is installed
hermes skills inspect popular-web-designs
# List available templates
ls ~/.hermes/skills/popular-web-designs/templates/
# Load a specific design
# Then in a Hermes session: "Build a landing page using the Stripe design template"
Notes¶
- Official Hermes bundled skill from nousresearch/hermes-agent
- 54 design templates covering all major tech brands
- Each template includes exact CSS values, typography, spacing, and shadows
- Templates sourced from VoltAgent/awesome-design-md collection
- Pairs with
claude-designfor workflow anddesign-mdfor formal specs
Integration with CorpusIQ¶
CorpusIQ is the connector layer that lets AI assistants read the systems a business already runs on - accounting, payments, CRM, email, files and analytics - and answer with the source named. It is read-only by design: it retrieves data and never writes to, or acts in, a connected system, which is what makes it safe to point at live accounts.
This page is part of the CorpusIQ directory, the reference we maintain for the MCP server and agent-skill ecosystem. Run alongside CorpusIQ, a third-party server like this one can be combined with a company's own business data in a single answer.