| name | community-popular-web-designs |
| description | 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. |
| version | 1.0.0 |
| author | Community Skills + Teknium (design systems sourced from VoltAgent/awesome-design-md) |
| license | MIT |
| tags | ["design","css","html","ui","web-development","design-systems","templates"] |
| 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"] |
| metadata | {"upstream_import":{"original_name":"popular-web-designs","source":"community catalog active profile ~/.argent/skills"}} |
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:
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 community skills 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>
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet" />
<style>
{
: ;
: ;
: ;
}
{
: , system-ui, sans-serif;
: (--color-text);
: (--color-bg);
}
