メニュー
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when a problem or request is underspecified and you need to decide WHAT to clarify before doing the work — the NEXT-BEST QUESTIONS to answer, ranked. Interrogates the prompt into candidate questions, projects plausible answers with probabilities, estimates each question's value of information (how much the answer would change the recommended plan, weighted by likelihood and stakes), discards low-value/redundant ones, and keeps generating until a diverse bucket of high-value questions is filled. Reports a ranked list with recommendations (pre-answer / assume-default) using role-specialized local Ollama models. Reports only — it does not ask the user or answer the questions itself. Triggers: "what should I clarify", "what questions matter here", "is this spec complete", "what am I missing before I start".
Use to run one improvement iteration on the next-best-questions skill: review its learnings journal, research opportunities, pre-register a cost-aware experiment, build off-default, evaluate Δresult AND Δcost, and journal the verdict either way. Triggers: 'improve nbq', 'run the nbq loop', 'next-best-questions iteration'. There are NO scripts; this protocol is agent-executed.
Prompt any model or alias via "ask <model> <question>". Resolves short names (deepseek, kimi, qwen, glm) to full model IDs. Captures session IDs for follow-up questions. Comparison mode: "ask deepseek kimi <question>" dispatches multiple models in parallel. Each call is a full Hermes agent with tools and multi-turn reasoning. Replies inline with a model badge.
Autonomous end-to-end build/debug engine. Use it when asked to build, implement, fix, or debug a module/feature: it runs the WHOLE loop unattended — drafts a checkable Definition of Done, fail-closed gates it (vague or ambiguous requests come back with the blocking questions instead of guesses), generates tests, then loops implement -> lint -> evidence until coverage + two distinct-model judges + real exit codes + a whole-suite regression gate all pass — and on COMPLETE AUTO-MERGES the work into the target repo's current branch (no repo named = a fresh workspace under the write-safe root is the deliverable). Prefer this over the `dev` skill for any multi-file task whose outcome should be verified, merged code rather than role-by-role assistance. NOT for trivial one-shot asks (a quick answer, a one-line edit, running a command) — just do those directly. Run: `devloop "<request>" [--repo PATH]` (or python3 ${HERMES_HOME}/skills/software-development/devloop/scripts/devloop_cli.py) — see "How to run".
An LLM authors a JSON/YAML workflow spec (states, prompts, routing, failure policy); a durable interpreter runs it, passing state from step to step, with suspend/resume, human gates, and replay that never re-runs completed steps. Use when an LLM should define-and-run a multi-step workflow that must pause for a human (approve, decide, fix something) and resume later, survive a crash and continue exactly once, or route declaratively on step errors. Rides a durable-execution-lite engine (append-only journal, deterministic replay). Triggers: LLM-authored workflow, workflow spec, prompt routing, durable resume, resumable script, pause and resume, checkpoint and continue, don't re-run completed steps.
Cron job that reviews Hermes conversation history and captures durable knowledge into the wiki. Handles triage (SKIP/NOTE/PAGE), Slack-session cleanup, and post-capture lint.
| name | popular-web-designs |
| description | 54 real design systems (Stripe, Linear, Vercel) as HTML/CSS. |
| 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 styled like"] |
| metadata | {"hermes":{"config":[{"key":"popular-web-designs.enabled","description":"Enable popular-web-designs skill behavior","default":true,"prompt":"Enable popular-web-designs skill?"}],"tags":["popular"],"category":"creative"}} |
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.skill_view(name="popular-web-designs", file_path="templates/<site>.md")generative-widgets skill to serve the result via cloudflared tunnelEach template includes a Hermes Implementation Notes block at the top with:
<link> tag (ready to paste)write_file for HTML creation and browser_vision for verification<!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 Hermes 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.
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.
| 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 |
| 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 |
| 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 |
| 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 | Red accent, masonry grid, image-first layout | |
webflow.md | Webflow | Blue-accented, polished marketing site aesthetic |
| 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 |
| 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 |
Match the design to the content: