popular-web-designs

Solid

54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.

Web & Frontend 12 stars 3 forks Updated 6 days ago MIT

Install

View on GitHub

Quality Score: 78/100

Stars 20%

Recency 20%

100

Frontmatter 20%

Documentation 15%

100

Issue Health 10%

License 10%

100

Description 5%

100

Skill Content

# 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 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" c...

Details

Author: kevinnft
Repository: kevinnft/ai-agent-skills
Created: 2 months ago
Last Updated: 6 days ago
Language: Python
License: MIT

Integrates with

OpenAI · AI Anthropic · AI Cloudflare · Cloud Vercel · Cloud

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

web-design

Use when building any web page, HTML artifact, landing page, dashboard, slide deck, report, email, or UI component the user will look at. A taste-first design system that makes generated pages look intentional and crafted instead of generic "AI-made". Provides an aesthetic-direction process, design tokens, a starter CSS baseline, component patterns, and an anti-AI-slop checklist.

19 Updated yesterday

drewnekota

Web & Frontend Listed

claude-design

Use when the user asks to "create a landing", "build a website", "design a web page", "haz una landing", "crea una página web", "diseña un sitio", or similar prompts requesting web page generation. Produces a single self-contained .html file (all CSS + JS inline, only Google Fonts external) that the user can double-click to open. No build step, no dependencies, fully portable into WordPress / Webflow / static hosts.

0 Updated 5 days ago

zenithmetodo

AI & Automation Solid

claude-design

Design one-off HTML artifacts (landing, deck, prototype).

12 Updated 6 days ago

kevinnft