agentCLAWHUBUnverified

popular-web-designs

54 production-quality design systems extracted from real websites (Stripe, Linear, Vercel, etc.). Load a template to generate HTML/CSS that matches the visua... Skill: popular-web-designs Owner: minirr890112-byte Summary: 54 production-quality design systems extracted from real websites (Stripe, Linear, Vercel, etc.). Load a template to generate HTML/CSS that matches the visua... Tags: CSS:1.1.0, Frontend:1.1.0, HTML:1.1.0, Templates:1.1.0, Web-Design:1.1.0, css:1.2.0, frontend:1.2.0, html:1.2.0, latest:1.2.0, templates:1.2.0, web-design:1.2.0 Version history: v1.2.0 | 2026-

OpenClaw

Rank

62

Safety

84

Downloads

3.3k

Updated

Oct 9, 2026

Version

1.2.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 3.3K downloads reported by the source. Last updated 10/9/2026.

Avoid when

  • Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor
Clawhubvendor · observed Oct 9, 2026
Protocol compatibility
OpenClawcompatibility · observed Oct 9, 2026
Adoption signal
3.3K downloadsadoption · observed Oct 9, 2026
Latest release
1.2.0release · observed Jun 19, 2026
Handshake status
UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s17427ed5npn3ajarmrt3mmbvx85k73p:popular-web-designs
  1. Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
  2. Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-minirr890112-byte-popular-web-designs/snapshot"

Documentation

CLAWHUB

143,945 characters of source documentation, loaded on request.

Extracted files

4 files captured from the source.

SKILL.md

|---
name: popular-web-designs
description: 54 production-quality design systems extracted from real websites (Stripe, Linear, Vercel, etc.). Load a template to generate HTML/CSS that matches the visual identity of any popular site. Neo-brutalist, SaaS, dashboard, landing page templates included.
version: 1.2.0
author: minirr890112-byte
license: MIT
metadata:
  hermes:
    tags: [Web-Design, HTML, CSS, Templates, Design-Systems, Frontend, UI, Landing-Page]
    homepage: https://github.com/minirr890112-byte/popular-web-designs
---

# Popular Web Designs

## Problem → Solution

**The problem**: You build a tool, write the backend, deploy the API... then spend 3 hours making it "look decent." The result? Generic Tailwind gray. Meanwhile, Stripe and Linear have designers on payroll. You don't.

**The solution**: 54 design systems extracted from production websites. One command loads the visual identity of Stripe, Linear, Vercel, Notion, or GitHub. Your landing page looks like a funded startup in 30 seconds. No designer needed.

448 developers downloaded this. Zero left a star. If you use it, leave one.

## Quick Start

```bash
pip install git+https://github.com/minirr890112-byte/popular-web-designs.git
```

## Templates

| Template | Vibe | Best For |
|---|---|---|
| Stripe-style | Clean, gradients, blue-purple | SaaS landing pages |
| Linear-style | Dark, minimal, mono font | Developer tools |
| Vercel-style | Black/white, geometric | Deployment platforms |
| Notion-style | Serif headings, clean cards | Docs, wikis, blogs |
| GitHub-style | Terminal-green accents | Open source projects |
| Neo-brutalist | Bold borders, primary colors | Indie hacker vibes |
| Dashboard | Data-dense, dark mode | Admin panels |
| ...and 47 more | | |

## Real Example

```bash
$ popular-web-designs load stripe-style --name "MySaaS"

✅ Loaded Stripe-style template
   Components: hero, features, pricing, CTA, footer
   Colors: #635BFF (primary), #0A2540 (dark), #F6F9FC (bg)
   Fonts: Inter, Source Code Pro

📁 Generated: ./MySaaS/
   ├── index.html       (hero + features + pricing + CTA)
   ├── styles.css       (Stripe design tokens)
   └── README.md        (deploy to Vercel in 1 click)
```

## Built For

Developers who need a landing page that doesn't scream "I did the CSS myself." The 448 ClawHub downloads suggest this resonates — if it helped you, star it so others find it.

## Why a Star? ⭐

448 downloads, 0 stars. Break the streak → [GitHub](https://github.com/minirr890112-byte/popular-web-designs)

README.md

<picture align="right">
  <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/badge/54-Design_Systems-0075de?style=flat-square">
  <img alt="54 Design Systems" src="https://img.shields.io/badge/54-Design_Systems-0075de?style=flat-square">
</picture>

# popular-web-designs

> 54 production-quality design systems extracted from real websites — every color, font, shadow, border radius, and component spec you need to build pixel-perfect clones.

[![Stars](https://img.shields.io/github/stars/minirr890112-byte/popular-web-designs?style=flat-square&color=f6c242)](https://github.com/minirr890112-byte/popular-web-designs/stargazers)
[![License](https://img.shields.io/badge/license-MIT-green?style=flat-square)](LICENSE)
[![Templates](https://img.shields.io/badge/templates-54-0075de?style=flat-square)](#design-catalog)
[![ClawHub](https://img.shields.io/badge/ClawHub-downloads-1910-ff6b6b?style=flat-square)](https://clawhub.ai/skills/k97322wf)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen?style=flat-square)](CONTRIBUTING.md)

---

## What's Inside

Each of the **54 templates** is a complete design system markdown file containing:

- Color palette & roles (every hex value, semantic roles, interaction states)
- Typography hierarchy (font family, sizes, weights, line-heights, letter-spacing)
- Component stylings (buttons, cards, navs, inputs, badges, modals — with exact CSS)
- Layout principles (spacing scale, grid system, whitespace philosophy)
- Depth & elevation (shadow stacks with layer-by-layer values)
- Responsive behavior (breakpoints, collapsing strategy, touch targets)
- Accessibility specs (focus rings, color contrast ratios, interactive states)
- **Agent prompt guide** — copy-paste prompts to instantly generate pixel-perfect HTML

No guessing. No eyeballing. The exact values used by Stripe, Linear, Notion, Vercel, and 50 more.

## Why This Exists

When an AI generates HTML, it defaults to generic design. Blue links, system fonts, `box-shadow: 0 2px 8px rgba(0,0,0,0.1)`. These templates replace guesswork with precision.

**Without this skill:** you get a generic admin dashboard that looks like 100 other AI-generated demos.

**With this skill:** you get a pixel-accurate Notion page with warm-undertone grays, 4-layer whisper shadows, and compressed-letter-spacing Inter at 64px. You get a Stripe page with blue-purple gradients and weight-300 Source Sans elegance. You get a Linear dark mode UI with Geist Mono code blocks and purple accent glow.

<div align="center">

| Generic AI Output | With This Skill |
|---|---|
| `box-shadow: 0 2px 8px rgba(0,0,0,0.1)` | `rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px` |
| `border: 1px solid #e5e7eb` | `border: 1px solid rgba(0,0,0,0.1)` |
| `font-family: system-ui` | `font-family: 'Inter', -apple-system, system-ui, sans-serif` at exactly 64px/700/-2.125px |
| `background

_meta.json

{
  "ownerId": "kn71cgymfx66r5zs5fd9vyz4cd85kv00",
  "slug": "popular-web-designs",
  "version": "1.2.0",
  "publishedAt": 1781827206319
}

skill-card.md

## Description:

Provides 54 web design system templates that help agents generate HTML, CSS, and UI guidance matching recognizable website visual styles.

This skill is ready for commercial/non-commercial use.

## Publisher:

[minirr890112-byte](https://clawhub.ai/user/minirr890112-byte)

### License/Terms of Use:

MIT-0

## Use Case:

Developers and agents use this skill to select popular web design templates, inspect design tokens, and generate starter HTML/CSS or design guidance for landing pages, dashboards, documentation sites, and frontend prototypes.

### Deployment Geography for Use:

Global

## Known Risks and Mitigations:

Risk: The documented pip install path fetches executable Python from an unpinned GitHub branch.

Mitigation: Review the repository before installation and prefer a pinned commit, signed release, or trusted package version.

Risk: Generated CSS and HTML may closely imitate recognizable third-party website styles.

Mitigation: Review generated assets for brand, trademark, and originality requirements before using them in public or commercial products.

## Reference(s):

- [ClawHub skill page](https://clawhub.ai/minirr890112-byte/skills/popular-web-designs)
- [Project homepage](https://github.com/minirr890112-byte/popular-web-designs)
- [Original design-system source](https://github.com/VoltAgent/awesome-design-md)

## Skill Output:

**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]

**Output Format:** [Markdown guidance, CSS custom properties, and self-contained HTML/CSS snippets or files]

**Output Parameters:** [1D]

**Other Properties Related to Output:** [CLI output can be printed to stdout or written to local CSS and HTML files when an output path is provided.]

## Skill Version(s):

1.2.0 (source: server release evidence, artifact frontmatter, setup.py, and package __version__)

## Ethical Considerations:

Users should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.
Github ReposUpdated 7h agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW
Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW
Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.

MCPOPENCLAW
Github ReposUpdated 7mo agoRank 70

CopilotKit

The Frontend for Agents & Generative UI. React + Angular

OPENCLAW

Machine-readable data

The same record, as JSON, for agents and crawlers.

{
  "facts": [
    {
      "factKey": "vendor",
      "category": "vendor",
      "label": "Vendor",
      "value": "Clawhub",
      "href": "https://clawhub.ai/minirr890112-byte/skills/popular-web-designs",
      "sourceUrl": "https://clawhub.ai/minirr890112-byte/skills/popular-web-designs",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-10-09T08:45:39.173Z",
      "isPublic": true
    },
    {
      "factKey": "protocols",
      "category": "compatibility",
      "label": "Protocol compatibility",
      "value": "OpenClaw",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-minirr890112-byte-popular-web-designs/contract",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-minirr890112-byte-popular-web-designs/contract",
      "sourceType": "contract",
      "confidence": "medium",
      "observedAt": "2026-10-09T08:45:39.173Z",
      "isPublic": true
    },
    {
      "factKey": "traction",
      "category": "adoption",
      "label": "Adoption signal",
      "value": "3.3K downloads",
      "href": "https://clawhub.ai/minirr890112-byte/popular-web-designs",
      "sourceUrl": "https://clawhub.ai/minirr890112-byte/popular-web-designs",
      "sourceType": "profile",
      "confidence": "medium",
      "observedAt": "2026-10-09T08:45:39.173Z",
      "isPublic": true
    },
    {
      "factKey": "latest_release",
      "category": "release",
      "label": "Latest release",
      "value": "1.2.0",
      "href": "https://clawhub.ai/minirr890112-byte/popular-web-designs",
      "sourceUrl": "https://clawhub.ai/minirr890112-byte/popular-web-designs",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-06-19T00:00:06.319Z",
      "isPublic": true
    },
    {
      "factKey": "handshake_status",
      "category": "security",
      "label": "Handshake status",
      "value": "UNKNOWN",
      "href": "https://www.xpersona.co/api/v1/agents/clawhub-minirr890112-byte-popular-web-designs/trust",
      "sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-minirr890112-byte-popular-web-designs/trust",
      "sourceType": "trust",
      "confidence": "medium",
      "observedAt": null,
      "isPublic": true
    }
  ],
  "events": [
    {
      "eventType": "release",
      "title": "Release 1.2.0",
      "description": "v1.2.0: Added ClawHub badge, star CTA, ecosystem links in README",
      "href": "https://clawhub.ai/minirr890112-byte/popular-web-designs",
      "sourceUrl": "https://clawhub.ai/minirr890112-byte/popular-web-designs",
      "sourceType": "release",
      "confidence": "medium",
      "observedAt": "2026-06-19T00:00:06.319Z",
      "isPublic": true
    }
  ]
}

Record generated Oct 10, 2026.

Sponsored

Ads related to popular-web-designs and adjacent AI workflows.