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.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
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.
This skill is for when the user wants a page styled after a specific known brand. If they
have not named one, use your deployment's house-style skill (a *-design skill in the
Skills index, when installed) instead of picking from this catalog.
*-design, when installed) — the org's default look as
ready-to-apply tokens. Use it unless the user asks for a specific brand below.taste-skill — use for the design process and taste (reading the brief,
producing variants, verifying the result, avoiding AI-design slop).
Pair it with this skill when the user wants a thoughtfully-designed page styled
after a known brand: taste-skill drives the workflow, this skill supplies
the visual vocabulary.skills({ action: "read", name: "popular-web-designs", path: "templates/<site>.md" })files action write, then serve the result with the publish skillEach template includes an Implementation Notes block at the top with:
<link> tag (ready to paste)files action write for HTML creation and local headless Chromium 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>
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet" />
<style>
:root {
--color-bg: #ffffff;
--color-text: #171717;
--color-accent: #533afd;
}
body {
font-family: "Inter", system-ui, sans-serif;
color: var(--color-text);
background: var(--color-bg);
}
</style>
</head>
<body></body>
</html>
Write the file with files action write, verify the result locally (curl -fsS http://localhost:<port>,
then chromium --headless --no-sandbox --disable-gpu --screenshot=/tmp/page.png http://localhost:<port>
when a render check matters), and serve it with the publish skill to confirm visual
accuracy and hand over a stable link.
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:
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Act for an org admin — the admin API (scope directory, per-scope config & SOUL, any scope's memory, transcripts & captured prompts, files, user roster & external users, audit/errors/metrics/egress) accepts your token when the user you're talking to is an org admin and started this turn themselves. Use when an admin asks you to inspect or change anything org-wide or in another scope, or anyone asks whether they're an admin.
日本語の概要は準備中です。原文の説明を表示しています。
Drive a real stealth browser from your shell — act on websites (order food, file an expense, pull data behind a login), with per-person persistent sign-ins via the provider's managed auth (Kernel, Anchor, or Browserbase — picked by which API key you have). Use for ACTING on a site; to just read a page, use curl/wget first. Requires managed model access and a keychain grant for the browser provider key; follow the missing-key steps below.
日本語の概要は準備中です。原文の説明を表示しています。
Sign a cloud provider's CLI in (AWS, Google Cloud, Azure, or another) with a device-code flow, then run that CLI as the requesting user. Covers checking the CLI is installed, the login that survives the browser round-trip, and the boundaries on cloud writes.
日本語の概要は準備中です。原文の説明を表示しています。
Show the app connection picker or setup widget when users ask to connect apps, reopen setup, or need an app that isn't connected yet. Use QM’s authenticated backend for app discovery, consent, and execution without exposing project keys.
日本語の概要は準備中です。原文の説明を表示しています。
Connect an administrator-enabled SaaS app for a user with a one-time OAuth consent link.
日本語の概要は準備中です。原文の説明を表示しています。
Define a Loop — a durable scaffold that works a queue of recurring tasks autonomously (Sentry issues, Front tickets, small perf PRs) with its outputs held for human review. Use when someone wants an agent to keep doing a kind of work on a schedule, rather than one-off. Walks the interview, runs one real item live before arming anything, then writes the playbook and creates the loop.
日本語の概要は準備中です。原文の説明を表示しています。