Skill
api-and-interface-desi…
Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints,…
@kevinnftView SkillDevelopment
Skill
/popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
Install
$ npx -y skills add kevinnft/ai-agent-skills --skill popular-web-designs --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/popular-web-designs
Context preview
The summary Claude sees to decide when to auto-load this skill.
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
SKILL.md
popular-web-designs.SKILL.mdname: 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]
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
origin: adapted
source_repo: VoltAgent/awesome-design-md
source_url: https://github.com/VoltAgent/awesome-design-md
source_license: MIT
language: en
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.
Related design skills
- **`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.
How to Use
1. Pick a design from the catalog below 2. Load it: `skill_view(name="popular-web-designs", file_path="templates/<site>.md")` 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 **Hermes 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 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.
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` | L
Read more
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] 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 origin: adapted source_repo: VoltAgent/awesome-design-md source_url: https://github.com/VoltAgent/awesome-design-md source_license: MIT language: en
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.
Related design skills
- **`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.
How to Use
1. Pick a design from the catalog below 2. Load it: `skill_view(name="popular-web-designs", file_path="templates/<site>.md")` 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 **Hermes 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 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.
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` | L
Ships withkevinnft-ai-agent-skills
191 attribution-first agent skills for Hermes Agent, Claude Code, Cursor — one installer, 28 categories, searchable catalog. See NOTICE for upstream attribution.
Get the whole plugin
Stats
14
Stars
2
Forks
Maintained
Maintenance
Python
Language
MIT
License
1mo ago
Last commit
4mo ago
Created
Repo: kevinnft/ai-agent-skills
Other skills on kevinnft-ai-agent-skills.
@kevinnftView SkillSkill
browser-testing-with-d…
Tests in real browsers. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze…
@kevinnftView SkillSkill
ci-cd-and-automation
Automates CI/CD pipeline setup. Use when setting up or modifying build and deployment pipelines. Use when you need to automate quality gates, configure test…
@kevinnftView SkillSkill
code-review-and-qualit…
Conducts multi-axis code review. Use before merging any change. Use when reviewing code written by yourself, another agent, or a human. Use when you need to…
@kevinnftView SkillSkill
code-simplification
Simplifies code for clarity. Use when refactoring code for clarity without changing behavior. Use when code works but is harder to read, maintain, or extend…
@kevinnftView SkillSkill
context-engineering
Optimizes agent context setup. Use when starting a new session, when agent output quality degrades, when switching between tasks, or when you need to configure…
@kevinnftView Skill