skills.rest
agtktID
agtktIDCOMMUNITY
Explore all skills by this author →
GitHub

popular-web-designs

Generates HTML/CSS pages styled after 54 real-world design systems like Stripe, Linear, and Vercel.

1|Updated Aug 6, 2026
Search Tags:#typography#ui#templates#html#css#design systems#web design
One-click install
npx skills add https://github.com/agtktID/indagis-agent --skill popular-web-designs-agtktid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: popular-web-designs
Source: https://github.com/agtktID/indagis-agent/tree/main/skills/creative/popular-web-designs
Command: npx skills add https://github.com/agtktID/indagis-agent --skill popular-web-designs-agtktid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating the visual language of well-known websites requires manually reverse-engineering color palettes, typography scales, spacing systems, and component styles. This Skill provides 54 ready-made design system templates so generated HTML/CSS matches a target brand's look without manual inspection. ## Core Features & Use Cases - 54 Design System Templates: Each template captures a site's color palette, typography hierarchy, component styles, spacing, shadows, and responsive behavior with exact CSS values. - Font Substitution Mapping: Proprietary fonts are mapped to Google Fonts CDN substitutes with ready-to-paste link tags and CSS font stacks. - Agent Prompt Guides: Templates include example component prompts and iteration guides for generating accurate HTML artifacts. - Use Case: A user asks for a landing page styled like Linear. Load templates/linear.app.md, apply its dark palette, purple accent, and typography tokens, write the HTML file, and verify the result visually. ## Quick Start Ask the agent to build a landing page that looks like Stripe using the popular-web-designs skill and verify the rendered result in the browser.

Frequently Asked Questions about popular-web-designs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a web page look like Stripe or Linear?▼

Load the corresponding template file from the design catalog, then apply its color palette as CSS custom properties, its typography hierarchy, and its component specs when generating the HTML. Each template includes exact CSS values and example component prompts.

What design systems are included in the template catalog?▼

The catalog contains 54 templates across AI tools, developer platforms, infrastructure, design tools, fintech, and consumer brands, including Stripe, Linear, Vercel, Apple, Airbnb, Figma, Notion, Spotify, and Supabase.

How are proprietary fonts handled when generating HTML?▼

Each template maps proprietary fonts to Google Fonts substitutes, such as DM Sans for Airbnb Cereal or Source Sans 3 for Stripe's sohne-var. Templates provide a ready-to-paste link tag and CSS font-family stacks for primary and monospace text.

Can I verify the generated page matches the target design?▼

Yes. The recommended workflow writes the HTML with write_file, serves it through the generative-widgets skill via a cloudflared tunnel, and checks visual accuracy with browser_vision after generation.

When should I use design-md instead of these templates?▼

Use design-md when the deliverable is a formal DESIGN.md token specification file rather than a rendered HTML artifact. Use these templates when you need actual HTML/CSS output styled after a specific known brand.

Related Skills

Explore More Design & Creative Skills→
Hive-AcademyHive-Academy
28

ui-ux-designer

Define brand visual identity through structured discovery and reference analysis.

Official
Intermediate
ZardLi1115ZardLi1115
4

gitnexus-explorer

Index a git codebase into a navigable knowledge graph with a web UI.

Community
Intermediate
ehadziabdicehadziabdic

document-skills-frontend-design

Guides distinctive visual design decisions for building or reshaping web UI.

Community
Intermediate
rafifosrafifos
6

design-md

Analyze Stitch projects to generate a semantic DESIGN.md design system document.

Community
Intermediate