Web Visual Design System

Trust Score 88/100

A professional web design workflow that generates standardized design specifications (DESIGN.md) before producing high-fidelity, responsive UI code.

triggers:help me make a websitedesign a pagecreate a landing pagemake a design specreference this website

GitHub SKILL.md

What it does

This skill implements a rigorous two-phase workflow for creating high-end websites. It ensures that visual identity is locked in via a DESIGN.md specification before a single line of code is written, preventing iterative drift and ensuring consistency across Landing Pages, Portfolios, and SaaS sites.

When to use it

Use this skill when a user requests a new website, a specific page design, or wants to clone the visual style of an existing URL or screenshot. It is ideal for projects requiring high-fidelity aesthetics and a clear design-to-code pipeline.

What's included

Scripts: Includes a Playwright-based crawler for extracting design tokens and a lightweight token extraction script.
References: Extensive library of design systems for 58 brands, interaction patterns (L1-L3), and style seeds.
Instructions: Detailed procedural knowledge on conducting 'Motion Audits', defining a 9-chapter design spec, and implementing 'signature moments' for cinema-grade scrolling experiences.

Compatible agents

Claude Code

Audit Summary

A comprehensive web design skill that guides agents through a 3-phase workflow: requirements gathering (with URL crawling, screenshot analysis, or PRD parsing), DESIGN.md specification output, and project code generation. Scripts are well-structured tooling — a Playwright-based web crawler, a design token extractor, and a curated Unsplash placeholder generator — but require runtime dependencies (Playwright) and explicit arguments, so they can't run bare in DRY_RUN mode. No security concerns found; all scripts are purpose-built and safe.

Watch Out

Requires playwright + chromium installed for crawl_website.py
Scripts need explicit CLI arguments — not runnable bare in DRY_RUN
SKILL.md references 11+ reference files in references/ directory that aren't bundled as scripts

Missing Dependencies

playwright

Notes

Well-crafted skill with detailed phase-based workflow and quality checklist. The SKILL.md is exceptionally thorough with clear decision trees, fallback chains, and performance constraints. Scripts are utility tools rather than standalone executables — they expect to be invoked with specific args by the agent. The curated Unsplash image list is a nice touch for placeholder generation.

Information

Repository: web-design
Stars: 559

Trust Score

Overall88

Security95

Code Quality82

Architecture78

Usefulness82

Related Skills

Clerk Vue Patterns

Vue 3 integration patterns for Clerk: composables, router guards, and Pinia auth store integration.

Manim Idea to Export

Turn plain-language concepts into production-ready ManimCE scene blueprints, runnable code, preview renders, and final export commands for video assets.

React Development Expert

Provides authoritative React guidance on hooks, state patterns, Server Components, performance optimization, and common architectural patterns.

Office & Design Toolkit

Comprehensive toolkit for processing and producing DOCX, PPTX, XLSX and PDF files plus design guidance and quality checks for professional office documents and

ClearShot — Screenshot UI Analysis

Structured UI screenshot analysis using a 5×5 spatial grid, full element inventory, and design system extraction. Escalates to full implementation blueprint whe

Colorize — Strategic UI Color Introduction

Introduce purposeful color to monochromatic interfaces to improve hierarchy, meaning, and visual engagement while preserving accessibility.

DAUB UI

A drop-in CSS+JS component library with 70+ carefully designed components and 20 theme families for fast, consistent UI building.

dotLottie Web

Guidelines and patterns for implementing performant dotLottie/Lottie animations on the web (vanilla JS and React), including workers, state machines, and themin

Back to Skills