[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6MF7XGDQAV56CQ0YXKJKPWS":3,"skill-same:01M6MF7XGDQAV56CQ0YXKJKPWS":95},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":31,"publishedAt":52,"linkOnly":53,"markdownContent":54,"markdownBody":55,"frontMatter":56,"refName":74,"commitSha":75,"skillDirectory":76,"forksCount":77,"repositoryHtmlUrl":78,"repositoryHomepageUrl":6,"ownerHtmlUrl":79,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":80,"install":81,"resources":94},"01M6MF7XGDQAV56CQ0YXKJKPWS","popular-web-designs",null,"54 production-quality design systems extracted from real websites. Load a template to generate HTML\u002FCSS 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.","ibragimov-oasis\u002Fvibe-coder","ibragimov-oasis","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F240665573?v=4","01M6DF78Y45R8228FHAZ7G6JXM","IBRAGIMOV MUKHAMMADJON","01M6K5ZYR8TDPAFG4R6693E2A6",3,"MIT","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002FREPO_DOCS\u002F02-hermes-agent\u002Fskills\u002Fcreative\u002Fpopular-web-designs\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],"popular web designs","web","linear","layout","stripe","ready","html","typography","template","ui","website","design","design systems","generate","create","identity","components","dashboard","notion","css","2026-11-10 10:12:30",false,"---\nname: popular-web-designs\ndescription: >\n  54 production-quality design systems extracted from real websites. Load a template\n  to generate HTML\u002FCSS that matches the visual identity of sites like Stripe, Linear,\n  Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components,\n  layout rules, and ready-to-use CSS values.\nversion: 1.0.0\nauthor: Hermes Agent + Teknium (design systems sourced from VoltAgent\u002Fawesome-design-md)\nlicense: MIT\ntags: [design, css, html, ui, web-development, design-systems, templates]\ntriggers:\n  - build a page that looks like\n  - make it look like stripe\n  - design like linear\n  - vercel style\n  - create a UI\n  - web design\n  - landing page\n  - dashboard design\n  - website styled like\n---\n\n# Popular Web Designs\n\n54 real-world design systems ready for use when generating HTML\u002FCSS. Each template captures a\nsite's complete visual language: color palette, typography hierarchy, component styles, spacing\nsystem, shadows, responsive behavior, and practical agent prompts with exact CSS values.\n\n## How to Use\n\n1. Pick a design from the catalog below\n2. Load it: `skill_view(name=\"popular-web-designs\", file_path=\"templates\u002F\u003Csite>.md\")`\n3. Use the design tokens and component specs when generating HTML\n4. Pair with the `generative-widgets` skill to serve the result via cloudflared tunnel\n\nEach template includes a **Hermes Implementation Notes** block at the top with:\n- CDN font substitute and Google Fonts `\u003Clink>` tag (ready to paste)\n- CSS font-family stacks for primary and monospace\n- Reminders to use `write_file` for HTML creation and `browser_vision` for verification\n\n## HTML Generation Pattern\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Ctitle>Page Title\u003C\u002Ftitle>\n  \u003C!-- Paste the Google Fonts \u003Clink> from the template's Hermes notes -->\n  \u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=...\" rel=\"stylesheet\">\n  \u003Cstyle>\n    \u002F* Apply the template's color palette as CSS custom properties *\u002F\n    :root {\n      --color-bg: #ffffff;\n      --color-text: #171717;\n      --color-accent: #533afd;\n      \u002F* ... more from template Section 2 *\u002F\n    }\n    \u002F* Apply typography from template Section 3 *\u002F\n    body {\n      font-family: 'Inter', system-ui, sans-serif;\n      color: var(--color-text);\n      background: var(--color-bg);\n    }\n    \u002F* Apply component styles from template Section 4 *\u002F\n    \u002F* Apply layout from template Section 5 *\u002F\n    \u002F* Apply shadows from template Section 6 *\u002F\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003C!-- Build using component specs from the template -->\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\nWrite the file with `write_file`, serve with the `generative-widgets` workflow (cloudflared tunnel),\nand verify the result with `browser_vision` to confirm visual accuracy.\n\n## Font Substitution Reference\n\nMost sites use proprietary fonts unavailable via CDN. Each template maps to a Google Fonts\nsubstitute that preserves the design's character. Common mappings:\n\n| Proprietary Font | CDN Substitute | Character |\n|---|---|---|\n| Geist \u002F Geist Sans | Geist (on Google Fonts) | Geometric, compressed tracking |\n| Geist Mono | Geist Mono (on Google Fonts) | Clean monospace, ligatures |\n| sohne-var (Stripe) | Source Sans 3 | Light weight elegance |\n| Berkeley Mono | JetBrains Mono | Technical monospace |\n| Airbnb Cereal VF | DM Sans | Rounded, friendly geometric |\n| Circular (Spotify) | DM Sans | Geometric, warm |\n| figmaSans | Inter | Clean humanist |\n| Pin Sans (Pinterest) | DM Sans | Friendly, rounded |\n| NVIDIA-EMEA | Inter (or Arial system) | Industrial, clean |\n| CoinbaseDisplay\u002FSans | DM Sans | Geometric, trustworthy |\n| UberMove | DM Sans | Bold, tight |\n| HashiCorp Sans | Inter | Enterprise, neutral |\n| waldenburgNormal (Sanity) | Space Grotesk | Geometric, slightly condensed |\n| IBM Plex Sans\u002FMono | IBM Plex Sans\u002FMono | Available on Google Fonts |\n| Rubik (Sentry) | Rubik | Available on Google Fonts |\n\nWhen a template's CDN font matches the original (Inter, IBM Plex, Rubik, Geist), no\nsubstitution loss occurs. When a substitute is used (DM Sans for Circular, Source Sans 3\nfor sohne-var), follow the template's weight, size, and letter-spacing values closely —\nthose carry more visual identity than the specific font face.\n\n## Design Catalog\n\n### AI & Machine Learning\n\n| Template | Site | Style |\n|---|---|---|\n| `claude.md` | Anthropic Claude | Warm terracotta accent, clean editorial layout |\n| `cohere.md` | Cohere | Vibrant gradients, data-rich dashboard aesthetic |\n| `elevenlabs.md` | ElevenLabs | Dark cinematic UI, audio-waveform aesthetics |\n| `minimax.md` | Minimax | Bold dark interface with neon accents |\n| `mistral.ai.md` | Mistral AI | French-engineered minimalism, purple-toned |\n| `ollama.md` | Ollama | Terminal-first, monochrome simplicity |\n| `opencode.ai.md` | OpenCode AI | Developer-centric dark theme, full monospace |\n| `replicate.md` | Replicate | Clean white canvas, code-forward |\n| `runwayml.md` | RunwayML | Cinematic dark UI, media-rich layout |\n| `together.ai.md` | Together AI | Technical, blueprint-style design |\n| `voltagent.md` | VoltAgent | Void-black canvas, emerald accent, terminal-native |\n| `x.ai.md` | xAI | Stark monochrome, futuristic minimalism, full monospace |\n\n### Developer Tools & Platforms\n\n| Template | Site | Style |\n|---|---|---|\n| `cursor.md` | Cursor | Sleek dark interface, gradient accents |\n| `expo.md` | Expo | Dark theme, tight letter-spacing, code-centric |\n| `linear.app.md` | Linear | Ultra-minimal dark-mode, precise, purple accent |\n| `lovable.md` | Lovable | Playful gradients, friendly dev aesthetic |\n| `mintlify.md` | Mintlify | Clean, green-accented, reading-optimized |\n| `posthog.md` | PostHog | Playful branding, developer-friendly dark UI |\n| `raycast.md` | Raycast | Sleek dark chrome, vibrant gradient accents |\n| `resend.md` | Resend | Minimal dark theme, monospace accents |\n| `sentry.md` | Sentry | Dark dashboard, data-dense, pink-purple accent |\n| `supabase.md` | Supabase | Dark emerald theme, code-first developer tool |\n| `superhuman.md` | Superhuman | Premium dark UI, keyboard-first, purple glow |\n| `vercel.md` | Vercel | Black and white precision, Geist font system |\n| `warp.md` | Warp | Dark IDE-like interface, block-based command UI |\n| `zapier.md` | Zapier | Warm orange, friendly illustration-driven |\n\n### Infrastructure & Cloud\n\n| Template | Site | Style |\n|---|---|---|\n| `clickhouse.md` | ClickHouse | Yellow-accented, technical documentation style |\n| `composio.md` | Composio | Modern dark with colorful integration icons |\n| `hashicorp.md` | HashiCorp | Enterprise-clean, black and white |\n| `mongodb.md` | MongoDB | Green leaf branding, developer documentation focus |\n| `sanity.md` | Sanity | Red accent, content-first editorial layout |\n| `stripe.md` | Stripe | Signature purple gradients, weight-300 elegance |\n\n### Design & Productivity\n\n| Template | Site | Style |\n|---|---|---|\n| `airtable.md` | Airtable | Colorful, friendly, structured data aesthetic |\n| `cal.md` | Cal.com | Clean neutral UI, developer-oriented simplicity |\n| `clay.md` | Clay | Organic shapes, soft gradients, art-directed layout |\n| `figma.md` | Figma | Vibrant multi-color, playful yet professional |\n| `framer.md` | Framer | Bold black and blue, motion-first, design-forward |\n| `intercom.md` | Intercom | Friendly blue palette, conversational UI patterns |\n| `miro.md` | Miro | Bright yellow accent, infinite canvas aesthetic |\n| `notion.md` | Notion | Warm minimalism, serif headings, soft surfaces |\n| `pinterest.md` | Pinterest | Red accent, masonry grid, image-first layout |\n| `webflow.md` | Webflow | Blue-accented, polished marketing site aesthetic |\n\n### Fintech & Crypto\n\n| Template | Site | Style |\n|---|---|---|\n| `coinbase.md` | Coinbase | Clean blue identity, trust-focused, institutional feel |\n| `kraken.md` | Kraken | Purple-accented dark UI, data-dense dashboards |\n| `revolut.md` | Revolut | Sleek dark interface, gradient cards, fintech precision |\n| `wise.md` | Wise | Bright green accent, friendly and clear |\n\n### Enterprise & Consumer\n\n| Template | Site | Style |\n|---|---|---|\n| `airbnb.md` | Airbnb | Warm coral accent, photography-driven, rounded UI |\n| `apple.md` | Apple | Premium white space, SF Pro, cinematic imagery |\n| `bmw.md` | BMW | Dark premium surfaces, precise engineering aesthetic |\n| `ibm.md` | IBM | Carbon design system, structured blue palette |\n| `nvidia.md` | NVIDIA | Green-black energy, technical power aesthetic |\n| `spacex.md` | SpaceX | Stark black and white, full-bleed imagery, futuristic |\n| `spotify.md` | Spotify | Vibrant green on dark, bold type, album-art-driven |\n| `uber.md` | Uber | Bold black and white, tight type, urban energy |\n\n## Choosing a Design\n\nMatch the design to the content:\n\n- **Developer tools \u002F dashboards:** Linear, Vercel, Supabase, Raycast, Sentry\n- **Documentation \u002F content sites:** Mintlify, Notion, Sanity, MongoDB\n- **Marketing \u002F landing pages:** Stripe, Framer, Apple, SpaceX\n- **Dark mode UIs:** Linear, Cursor, ElevenLabs, Warp, Superhuman\n- **Light \u002F clean UIs:** Vercel, Stripe, Notion, Cal.com, Replicate\n- **Playful \u002F friendly:** PostHog, Figma, Lovable, Zapier, Miro\n- **Premium \u002F luxury:** Apple, BMW, Stripe, Superhuman, Revolut\n- **Data-dense \u002F dashboards:** Sentry, Kraken, Cohere, ClickHouse\n- **Monospace \u002F terminal aesthetic:** Ollama, OpenCode, x.ai, VoltAgent\n\n## ? Связи\n\n- [[000 - Map of Maps]] — REPO_DOCS\n- [[000 - Map of Maps]] — Map of Maps\n\n","# Popular Web Designs\n\n54 real-world design systems ready for use when generating HTML\u002FCSS. Each template captures a\nsite's complete visual language: color palette, typography hierarchy, component styles, spacing\nsystem, shadows, responsive behavior, and practical agent prompts with exact CSS values.\n\n## How to Use\n\n1. Pick a design from the catalog below\n2. Load it: `skill_view(name=\"popular-web-designs\", file_path=\"templates\u002F\u003Csite>.md\")`\n3. Use the design tokens and component specs when generating HTML\n4. Pair with the `generative-widgets` skill to serve the result via cloudflared tunnel\n\nEach template includes a **Hermes Implementation Notes** block at the top with:\n- CDN font substitute and Google Fonts `\u003Clink>` tag (ready to paste)\n- CSS font-family stacks for primary and monospace\n- Reminders to use `write_file` for HTML creation and `browser_vision` for verification\n\n## HTML Generation Pattern\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Ctitle>Page Title\u003C\u002Ftitle>\n  \u003C!-- Paste the Google Fonts \u003Clink> from the template's Hermes notes -->\n  \u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=...\" rel=\"stylesheet\">\n  \u003Cstyle>\n    \u002F* Apply the template's color palette as CSS custom properties *\u002F\n    :root {\n      --color-bg: #ffffff;\n      --color-text: #171717;\n      --color-accent: #533afd;\n      \u002F* ... more from template Section 2 *\u002F\n    }\n    \u002F* Apply typography from template Section 3 *\u002F\n    body {\n      font-family: 'Inter', system-ui, sans-serif;\n      color: var(--color-text);\n      background: var(--color-bg);\n    }\n    \u002F* Apply component styles from template Section 4 *\u002F\n    \u002F* Apply layout from template Section 5 *\u002F\n    \u002F* Apply shadows from template Section 6 *\u002F\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003C!-- Build using component specs from the template -->\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\nWrite the file with `write_file`, serve with the `generative-widgets` workflow (cloudflared tunnel),\nand verify the result with `browser_vision` to confirm visual accuracy.\n\n## Font Substitution Reference\n\nMost sites use proprietary fonts unavailable via CDN. Each template maps to a Google Fonts\nsubstitute that preserves the design's character. Common mappings:\n\n| Proprietary Font | CDN Substitute | Character |\n|---|---|---|\n| Geist \u002F Geist Sans | Geist (on Google Fonts) | Geometric, compressed tracking |\n| Geist Mono | Geist Mono (on Google Fonts) | Clean monospace, ligatures |\n| sohne-var (Stripe) | Source Sans 3 | Light weight elegance |\n| Berkeley Mono | JetBrains Mono | Technical monospace |\n| Airbnb Cereal VF | DM Sans | Rounded, friendly geometric |\n| Circular (Spotify) | DM Sans | Geometric, warm |\n| figmaSans | Inter | Clean humanist |\n| Pin Sans (Pinterest) | DM Sans | Friendly, rounded |\n| NVIDIA-EMEA | Inter (or Arial system) | Industrial, clean |\n| CoinbaseDisplay\u002FSans | DM Sans | Geometric, trustworthy |\n| UberMove | DM Sans | Bold, tight |\n| HashiCorp Sans | Inter | Enterprise, neutral |\n| waldenburgNormal (Sanity) | Space Grotesk | Geometric, slightly condensed |\n| IBM Plex Sans\u002FMono | IBM Plex Sans\u002FMono | Available on Google Fonts |\n| Rubik (Sentry) | Rubik | Available on Google Fonts |\n\nWhen a template's CDN font matches the original (Inter, IBM Plex, Rubik, Geist), no\nsubstitution loss occurs. When a substitute is used (DM Sans for Circular, Source Sans 3\nfor sohne-var), follow the template's weight, size, and letter-spacing values closely —\nthose carry more visual identity than the specific font face.\n\n## Design Catalog\n\n### AI & Machine Learning\n\n| Template | Site | Style |\n|---|---|---|\n| `claude.md` | Anthropic Claude | Warm terracotta accent, clean editorial layout |\n| `cohere.md` | Cohere | Vibrant gradients, data-rich dashboard aesthetic |\n| `elevenlabs.md` | ElevenLabs | Dark cinematic UI, audio-waveform aesthetics |\n| `minimax.md` | Minimax | Bold dark interface with neon accents |\n| `mistral.ai.md` | Mistral AI | French-engineered minimalism, purple-toned |\n| `ollama.md` | Ollama | Terminal-first, monochrome simplicity |\n| `opencode.ai.md` | OpenCode AI | Developer-centric dark theme, full monospace |\n| `replicate.md` | Replicate | Clean white canvas, code-forward |\n| `runwayml.md` | RunwayML | Cinematic dark UI, media-rich layout |\n| `together.ai.md` | Together AI | Technical, blueprint-style design |\n| `voltagent.md` | VoltAgent | Void-black canvas, emerald accent, terminal-native |\n| `x.ai.md` | xAI | Stark monochrome, futuristic minimalism, full monospace |\n\n### Developer Tools & Platforms\n\n| Template | Site | Style |\n|---|---|---|\n| `cursor.md` | Cursor | Sleek dark interface, gradient accents |\n| `expo.md` | Expo | Dark theme, tight letter-spacing, code-centric |\n| `linear.app.md` | Linear | Ultra-minimal dark-mode, precise, purple accent |\n| `lovable.md` | Lovable | Playful gradients, friendly dev aesthetic |\n| `mintlify.md` | Mintlify | Clean, green-accented, reading-optimized |\n| `posthog.md` | PostHog | Playful branding, developer-friendly dark UI |\n| `raycast.md` | Raycast | Sleek dark chrome, vibrant gradient accents |\n| `resend.md` | Resend | Minimal dark theme, monospace accents |\n| `sentry.md` | Sentry | Dark dashboard, data-dense, pink-purple accent |\n| `supabase.md` | Supabase | Dark emerald theme, code-first developer tool |\n| `superhuman.md` | Superhuman | Premium dark UI, keyboard-first, purple glow |\n| `vercel.md` | Vercel | Black and white precision, Geist font system |\n| `warp.md` | Warp | Dark IDE-like interface, block-based command UI |\n| `zapier.md` | Zapier | Warm orange, friendly illustration-driven |\n\n### Infrastructure & Cloud\n\n| Template | Site | Style |\n|---|---|---|\n| `clickhouse.md` | ClickHouse | Yellow-accented, technical documentation style |\n| `composio.md` | Composio | Modern dark with colorful integration icons |\n| `hashicorp.md` | HashiCorp | Enterprise-clean, black and white |\n| `mongodb.md` | MongoDB | Green leaf branding, developer documentation focus |\n| `sanity.md` | Sanity | Red accent, content-first editorial layout |\n| `stripe.md` | Stripe | Signature purple gradients, weight-300 elegance |\n\n### Design & Productivity\n\n| Template | Site | Style |\n|---|---|---|\n| `airtable.md` | Airtable | Colorful, friendly, structured data aesthetic |\n| `cal.md` | Cal.com | Clean neutral UI, developer-oriented simplicity |\n| `clay.md` | Clay | Organic shapes, soft gradients, art-directed layout |\n| `figma.md` | Figma | Vibrant multi-color, playful yet professional |\n| `framer.md` | Framer | Bold black and blue, motion-first, design-forward |\n| `intercom.md` | Intercom | Friendly blue palette, conversational UI patterns |\n| `miro.md` | Miro | Bright yellow accent, infinite canvas aesthetic |\n| `notion.md` | Notion | Warm minimalism, serif headings, soft surfaces |\n| `pinterest.md` | Pinterest | Red accent, masonry grid, image-first layout |\n| `webflow.md` | Webflow | Blue-accented, polished marketing site aesthetic |\n\n### Fintech & Crypto\n\n| Template | Site | Style |\n|---|---|---|\n| `coinbase.md` | Coinbase | Clean blue identity, trust-focused, institutional feel |\n| `kraken.md` | Kraken | Purple-accented dark UI, data-dense dashboards |\n| `revolut.md` | Revolut | Sleek dark interface, gradient cards, fintech precision |\n| `wise.md` | Wise | Bright green accent, friendly and clear |\n\n### Enterprise & Consumer\n\n| Template | Site | Style |\n|---|---|---|\n| `airbnb.md` | Airbnb | Warm coral accent, photography-driven, rounded UI |\n| `apple.md` | Apple | Premium white space, SF Pro, cinematic imagery |\n| `bmw.md` | BMW | Dark premium surfaces, precise engineering aesthetic |\n| `ibm.md` | IBM | Carbon design system, structured blue palette |\n| `nvidia.md` | NVIDIA | Green-black energy, technical power aesthetic |\n| `spacex.md` | SpaceX | Stark black and white, full-bleed imagery, futuristic |\n| `spotify.md` | Spotify | Vibrant green on dark, bold type, album-art-driven |\n| `uber.md` | Uber | Bold black and white, tight type, urban energy |\n\n## Choosing a Design\n\nMatch the design to the content:\n\n- **Developer tools \u002F dashboards:** Linear, Vercel, Supabase, Raycast, Sentry\n- **Documentation \u002F content sites:** Mintlify, Notion, Sanity, MongoDB\n- **Marketing \u002F landing pages:** Stripe, Framer, Apple, SpaceX\n- **Dark mode UIs:** Linear, Cursor, ElevenLabs, Warp, Superhuman\n- **Light \u002F clean UIs:** Vercel, Stripe, Notion, Cal.com, Replicate\n- **Playful \u002F friendly:** PostHog, Figma, Lovable, Zapier, Miro\n- **Premium \u002F luxury:** Apple, BMW, Stripe, Superhuman, Revolut\n- **Data-dense \u002F dashboards:** Sentry, Kraken, Cohere, ClickHouse\n- **Monospace \u002F terminal aesthetic:** Ollama, OpenCode, x.ai, VoltAgent\n\n## ? Связи\n\n- [[000 - Map of Maps]] — REPO_DOCS\n- [[000 - Map of Maps]] — Map of Maps\n\n",{"name":5,"tags":57,"author":61,"license":15,"version":62,"triggers":63,"description":73},[43,51,38,41,58,59,60],"web-development","design-systems","templates","Hermes Agent + Teknium (design systems sourced from VoltAgent\u002Fawesome-design-md)","1.0.0",[64,65,66,67,68,69,70,71,72],"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","54 production-quality design systems extracted from real websites. Load a template to generate HTML\u002FCSS 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.\n","main","bdd9f958d7bb1a0f19b8ad8da020b0bab0f53eb1","vc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002FREPO_DOCS\u002F02-hermes-agent\u002Fskills\u002Fcreative\u002Fpopular-web-designs",1,"https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis","2026-06-24 16:31:18",{"source":8,"skillName":5,"commands":82,"prompt":92,"zipAvailable":93},[83,86,89],{"tool":84,"command":85},"npx","npx skills add ibragimov-oasis\u002Fvibe-coder --skill popular-web-designs",{"tool":87,"command":88},"bunx","bunx skills add ibragimov-oasis\u002Fvibe-coder --skill popular-web-designs",{"tool":90,"command":91},"pnpm","pnpm dlx skills add ibragimov-oasis\u002Fvibe-coder --skill popular-web-designs","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002FREPO_DOCS\u002F02-hermes-agent\u002Fskills\u002Fcreative\u002Fpopular-web-designs\u002FSKILL.md",true,[],[96,119,145,165,189,220],{"skillNo":97,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":104,"publishedAt":52},"01M6Q4Q22KKKVMJJYA411DQ4ER","ckm:ui-styling","Create beautiful, accessible user interfaces with shadcn\u002Fui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fui-design\u002Fui-rules\u002Fui-ux-pro-max\u002Fclaude\u002Fskills\u002Fui-styling\u002FSKILL.md",[102,103],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},[105,41,106,107,108,43,51,109,48,110,46,44,111,112,113,114,115,116,117,118],"ui styling","styling","ckm:ui styling","ckm","canvas","component","Tailwind","across","themes","utility","mode","implementing","artifact\u002Fui-component","source\u002Fui-design",{"skillNo":120,"name":121,"nameZh":6,"description":122,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":123,"categories":124,"keywords":133,"publishedAt":52},"01M6Q4PQ2NX4NDVWTEHA3MQ2R0","ckm:design","Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social\u002Fads\u002Fweb\u002Fprint), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fui-design\u002Fui-rules\u002Fui-ux-pro-max\u002Fclaude\u002Fskills\u002Fdesign\u002FSKILL.md",[125,128,129,132],{"categoryNo":126,"categoryName":127,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":130,"categoryName":131,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},[43,121,108,134,110,105,135,46,45,136,137,138,139,140,141,142,143,144,117,118],"google","presentations","screenshot","actions","Media","logo","ads","youtube","tiktok","artifact","chart",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":153,"publishedAt":52},"01M6Q4PJE27GEA3M0CECEBCZKS","ckm:design-system","Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing\u002Ftypography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fui-design\u002Fui-rules\u002Fui-ux-pro-max\u002Fclaude\u002Fskills\u002Fdesign-system\u002FSKILL.md",[151,152],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},[43,154,155,156,121,108,51,110,157,135,143,158,159,160,161,162,163,164,117,118],"design system","system","ckm:design system","architecture","token","creation","systematic","css variables","Variables","spacing","layer",{"skillNo":166,"name":167,"nameZh":6,"description":168,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":169,"categories":170,"keywords":174,"publishedAt":52},"01M6Q4P90JXFYMH2S634QM6SQJ","ckm:banner-design","Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter\u002FX, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fui-design\u002Fui-rules\u002Fui-ux-pro-max\u002Fclaude\u002Fskills\u002Fbanner-design\u002FSKILL.md",[171,172,173],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},[43,175,176,177,108,178,137,138,179,180,181,182,183,184,185,186,117,118,187,188],"banner design","ckm:banner design","banner","frontend","3D","generated","Art","social","dimensions","neon","direction","display","frontend-design","hero",{"skillNo":190,"name":191,"nameZh":6,"description":192,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":193,"categories":194,"keywords":201,"publishedAt":52},"01M6Q2RZXBJ9TBE413GXCYQNDB","seo","Comprehensive SEO analysis for any website or business type. Performs full site audits, single-page deep analysis, technical SEO checks (crawlability, indexability, Core Web Vitals with INP), schema markup detection\u002Fvalidation\u002Fgeneration, content quality assessment (E-E-A-T framework per Dec 2025 update extending to all competitive queries), image optimization, sitemap analysis, and Generative Engine Optimization (GEO) for AI Overviews, ChatGPT, and Perplexity citations. Analyzes AI crawler accessibility (GPTBot, ClaudeBot, PerplexityBot), llms.txt compliance, brand mention signals, and passage-level citability. Industry detection for SaaS, e-commerce, local business, publishers, agencies. Triggers on: \"SEO\", \"audit\", \"schema\", \"Core Web Vitals\", \"sitemap\", \"E-E-A-T\", \"AI Overviews\", \"GEO\", \"technical SEO\", \"content quality\", \"page speed\", \"structured data\".","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-seo\u002Fseo\u002Fclaude-seo\u002Fskills\u002Fseo\u002FSKILL.md",[195,198],{"categoryNo":196,"categoryName":197,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":199,"categoryName":200,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000035","市场营销",[191,202,203,204,205,206,207,143,208,209,210,211,212,213,214,215,216,217,218,219],"image","llms","assessment","deep analysis","Citations","analysis","local","deep","crawlability","seo analysis","2025","commerce","URL","domain\u002Fseo","source\u002Fskills-seo","vitals","generative","publishers",{"skillNo":221,"name":222,"nameZh":6,"description":223,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":224,"categories":225,"keywords":228,"publishedAt":52},"01M6Q2RVE7VGFCFQKBK468NHVY","seo-technical","Technical SEO audit across 9 categories: crawlability, indexability, security, URL structure, mobile, Core Web Vitals, structured data, JavaScript rendering, and IndexNow protocol. Use when user says \"technical SEO\", \"crawl issues\", \"robots.txt\", \"Core Web Vitals\", \"site speed\", or \"security headers\".","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-seo\u002Fseo\u002Fclaude-seo\u002Fskills\u002Fseo-technical\u002FSKILL.md",[226,227],{"categoryNo":196,"categoryName":197,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":199,"categoryName":200,"taxonomyType":29,"taxonomyTypeDesc":30},[191,229,230,231,232,233,234,235,236,143,112,210,237,238,214,239,240,215,216,217],"technical","seo technical","issues","audit","data","mobile","crawl","structure","rendering","technical seo audit","headers","categories"]