コンテンツ制作
#design
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
DeepseekModel
キュレーション済みスキル
品質 優秀 · 90
v1.0.0
取得
https://deepseekmodel.com/api/download.php?id=nousresearch-hermes-agent-skills-creative-popular-web-designs-skill-md&format=skill
ダウンロード .skill
標準形式。system_prompt と model_config を収録し、任意の Agent で利用可能
.skill ファイルの system_prompt フィールドの実際の内容。
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"] 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 Pick a design from the catalog below 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 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 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
このスキルを起動するキーワード。クリックでコピーできます。
このスキルにはトリガーワードがありません。
ダウンロードした .skill に含まれるフィールド。
| フィールド | 説明 |
|---|---|
| format | フォーマット識別子（skill/v1） |
| skill_id | スキル固有 ID |
| name | スキル名 |
| version | バージョン |
| description | 説明 |
| category | カテゴリ（配列） |
| trigger_words | トリガーワード |
| tags | タグ |
| source | ソース |
| source_url | ソース URL（本ページ） |
| exported_at | エクスポート日時（ダウンロード毎） |
| system_prompt | システムプロンプト本文 |
| model_config | モデル設定：provider / model / temperature / max_tokens / top_p |
| examples | サンプル |
| install_guide | 各プラットフォームの導入説明（Coze / Dify / Claude / カスタム） |
