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 => bashweb_extract => web_fetch, plus web_search when discovery is neededsearch_files => grep_search and glob_searchbrowser_* 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
<!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
1---2name: popular-web-designs3description: 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.4license: MIT5---67## Kheish Compatibility89This skill is repo-local and stays inactive until explicitly activated.1011When the original instructions refer to legacy tool names, use these Kheish mappings:1213- `terminal` => `bash`14- `web_extract` => `web_fetch`, plus `web_search` when discovery is needed15- `search_files` => `grep_search` and `glob_search`16- `browser_*` tools require a browser-capable surfaced tool or MCP; if none is available, use the closest available surface and say so explicitly1718When the instructions mention local helper files, resolve them from `${KHEISH_SKILL_DIR}`.1920# Popular Web Designs212254 real-world design systems ready for use when generating HTML/CSS. Each template captures a23site's complete visual language: color palette, typography hierarchy, component styles, spacing24system, shadows, responsive behavior, and practical agent prompts with exact CSS values.2526## How to Use27281. Pick a design from the catalog below292. Load it: read `templates/<site>.md` from this skill directory with `read_file`303. Use the design tokens and component specs when generating HTML314. Pair with the `generative-widgets` skill to serve the result via cloudflared tunnel3233Each template includes a **Kheish Implementation Notes** block at the top with:34- CDN font substitute and Google Fonts `<link>` tag (ready to paste)35- CSS font-family stacks for primary and monospace36- Reminders to use `write_file` for HTML creation and `browser_vision` for verification3738## HTML Generation Pattern3940```html41<!DOCTYPE html>42<html lang="en">43<head>44 <meta charset="UTF-8">45 <meta name="viewport" content="width=device-width, initial-scale=1.0">46 <title>Page Title</title>47 <!-- Paste the Google Fonts <link> from the template's Kheish notes -->48 <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">49 <style>50 /* Apply the template's color palette as CSS custom properties */51 :root {52 --color-bg: #ffffff;53 --color-text: #171717;54 --color-accent: #533afd;55 /* ... more from template Section 2 */56 }57 /* Apply typography from template Section 3 */58 body {59 font-family: 'Inter', system-ui, sans-serif;60 color: var(--color-text);61 background: var(--color-bg);62 }63 /* Apply component styles from template Section 4 */64 /* Apply layout from template Section 5 */65 /* Apply shadows from template Section 6 */66 </style>67</head>68<body>69 <!-- Build using component specs from the template -->70</body>71</html>72```7374Write the file with `write_file`, serve with the `generative-widgets` workflow (cloudflared tunnel),75and verify the result with `browser_vision` to confirm visual accuracy.7677## Font Substitution Reference7879Most sites use proprietary fonts unavailable via CDN. Each template maps to a Google Fonts80substitute that preserves the design's character. Common mappings:8182| Proprietary Font | CDN Substitute | Character |83|---|---|---|84| Geist / Geist Sans | Geist (on Google Fonts) | Geometric, compressed tracking |85| Geist Mono | Geist Mono (on Google Fonts) | Clean monospace, ligatures |86| sohne-var (Stripe) | Source Sans 3 | Light weight elegance |87| Berkeley Mono | JetBrains Mono | Technical monospace |88| Airbnb Cereal VF | DM Sans | Rounded, friendly geometric |89| Circular (Spotify) | DM Sans | Geometric, warm |90| figmaSans | Inter | Clean humanist |91| Pin Sans (Pinterest) | DM Sans | Friendly, rounded |92| NVIDIA-EMEA | Inter (or Arial system) | Industrial, clean |93| CoinbaseDisplay/Sans | DM Sans | Geometric, trustworthy |94| UberMove | DM Sans | Bold, tight |95| HashiCorp Sans | Inter | Enterprise, neutral |96| waldenburgNormal (Sanity) | Space Grotesk | Geometric, slightly condensed |97| IBM Plex Sans/Mono | IBM Plex Sans/Mono | Available on Google Fonts |98| Rubik (Sentry) | Rubik | Available on Google Fonts |99100When a template's CDN font matches the original (Inter, IBM Plex, Rubik, Geist), no101substitution loss occurs. When a substitute is used (DM Sans for Circular, Source Sans 3102for sohne-var), follow the template's weight, size, and letter-spacing values closely —103those carry more visual identity than the specific font face.104105## Design Catalog106107### AI & Machine Learning108109| Template | Site | Style |110|---|---|---|111| `claude.md` | Anthropic Claude | Warm terracotta accent, clean editorial layout |112| `cohere.md` | Cohere | Vibrant gradients, data-rich dashboard aesthetic |113| `elevenlabs.md` | ElevenLabs | Dark cinematic UI, audio-waveform aesthetics |114| `minimax.md` | Minimax | Bold dark interface with neon accents |115| `mistral.ai.md` | Mistral AI | French-engineered minimalism, purple-toned |116| `ollama.md` | Ollama | Terminal-first, monochrome simplicity |117| `opencode.ai.md` | OpenCode AI | Developer-centric dark theme, full monospace |118| `replicate.md` | Replicate | Clean white canvas, code-forward |119| `runwayml.md` | RunwayML | Cinematic dark UI, media-rich layout |120| `together.ai.md` | Together AI | Technical, blueprint-style design |121| `voltagent.md` | VoltAgent | Void-black canvas, emerald accent, terminal-native |122| `x.ai.md` | xAI | Stark monochrome, futuristic minimalism, full monospace |123124### Developer Tools & Platforms125126| Template | Site | Style |127|---|---|---|128| `cursor.md` | Cursor | Sleek dark interface, gradient accents |129| `expo.md` | Expo | Dark theme, tight letter-spacing, code-centric |130| `linear.app.md` | Linear | Ultra-minimal dark-mode, precise, purple accent |131| `lovable.md` | Lovable | Playful gradients, friendly dev aesthetic |132| `mintlify.md` | Mintlify | Clean, green-accented, reading-optimized |133| `posthog.md` | PostHog | Playful branding, developer-friendly dark UI |134| `raycast.md` | Raycast | Sleek dark chrome, vibrant gradient accents |135| `resend.md` | Resend | Minimal dark theme, monospace accents |136| `sentry.md` | Sentry | Dark dashboard, data-dense, pink-purple accent |137| `supabase.md` | Supabase | Dark emerald theme, code-first developer tool |138| `superhuman.md` | Superhuman | Premium dark UI, keyboard-first, purple glow |139| `vercel.md` | Vercel | Black and white precision, Geist font system |140| `warp.md` | Warp | Dark IDE-like interface, block-based command UI |141| `zapier.md` | Zapier | Warm orange, friendly illustration-driven |142143### Infrastructure & Cloud144145| Template | Site | Style |146|---|---|---|147| `clickhouse.md` | ClickHouse | Yellow-accented, technical documentation style |148| `composio.md` | Composio | Modern dark with colorful integration icons |149| `hashicorp.md` | HashiCorp | Enterprise-clean, black and white |150| `mongodb.md` | MongoDB | Green leaf branding, developer documentation focus |151| `sanity.md` | Sanity | Red accent, content-first editorial layout |152| `stripe.md` | Stripe | Signature purple gradients, weight-300 elegance |153154### Design & Productivity155156| Template | Site | Style |157|---|---|---|158| `airtable.md` | Airtable | Colorful, friendly, structured data aesthetic |159| `cal.md` | Cal.com | Clean neutral UI, developer-oriented simplicity |160| `clay.md` | Clay | Organic shapes, soft gradients, art-directed layout |161| `figma.md` | Figma | Vibrant multi-color, playful yet professional |162| `framer.md` | Framer | Bold black and blue, motion-first, design-forward |163| `intercom.md` | Intercom | Friendly blue palette, conversational UI patterns |164| `miro.md` | Miro | Bright yellow accent, infinite canvas aesthetic |165| `notion.md` | Notion | Warm minimalism, serif headings, soft surfaces |166| `pinterest.md` | Pinterest | Red accent, masonry grid, image-first layout |167| `webflow.md` | Webflow | Blue-accented, polished marketing site aesthetic |168169### Fintech & Crypto170171| Template | Site | Style |172|---|---|---|173| `coinbase.md` | Coinbase | Clean blue identity, trust-focused, institutional feel |174| `kraken.md` | Kraken | Purple-accented dark UI, data-dense dashboards |175| `revolut.md` | Revolut | Sleek dark interface, gradient cards, fintech precision |176| `wise.md` | Wise | Bright green accent, friendly and clear |177178### Enterprise & Consumer179180| Template | Site | Style |181|---|---|---|182| `airbnb.md` | Airbnb | Warm coral accent, photography-driven, rounded UI |183| `apple.md` | Apple | Premium white space, SF Pro, cinematic imagery |184| `bmw.md` | BMW | Dark premium surfaces, precise engineering aesthetic |185| `ibm.md` | IBM | Carbon design system, structured blue palette |186| `nvidia.md` | NVIDIA | Green-black energy, technical power aesthetic |187| `spacex.md` | SpaceX | Stark black and white, full-bleed imagery, futuristic |188| `spotify.md` | Spotify | Vibrant green on dark, bold type, album-art-driven |189| `uber.md` | Uber | Bold black and white, tight type, urban energy |190191## Choosing a Design192193Match the design to the content:194195- **Developer tools / dashboards:** Linear, Vercel, Supabase, Raycast, Sentry196- **Documentation / content sites:** Mintlify, Notion, Sanity, MongoDB197- **Marketing / landing pages:** Stripe, Framer, Apple, SpaceX198- **Dark mode UIs:** Linear, Cursor, ElevenLabs, Warp, Superhuman199- **Light / clean UIs:** Vercel, Stripe, Notion, Cal.com, Replicate200- **Playful / friendly:** PostHog, Figma, Lovable, Zapier, Miro201- **Premium / luxury:** Apple, BMW, Stripe, Superhuman, Revolut202- **Data-dense / dashboards:** Sentry, Kraken, Cohere, ClickHouse203- **Monospace / terminal aesthetic:** Ollama, OpenCode, x.ai, VoltAgent
graniet