web-designCSS implementation patterns for layout, typography, color, spacing, and responsive design. Complements ui-design (fundamentals) with code-focused examples.
Install via ClawdBot CLI:
clawdbot install wpank/web-designGrade Good — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://github.com/wpank/ai/tree/main/skills/design-systems/web-designAudited Apr 16, 2026 · audit v1.0
Generated Mar 1, 2026
A B2B SaaS company needs to update its dashboard for better data visualization and user experience. This skill provides CSS Grid for layout structure, typography pairings like DM Sans for readability, and spacing tokens to create a clean, professional interface with consistent rhythm and hierarchy.
A high-end fashion retailer wants a visually striking website to showcase products with editorial flair. The skill offers color palettes with surface layering for depth, typography pairings like Cormorant Garamond for elegance, and spatial composition techniques like intentional asymmetry to create a premium aesthetic.
A freelance designer or agency needs a portfolio site to highlight creative work with expressive visual elements. This skill provides grid stacking for overlapping layouts, typography choices like Syne for bold displays, and responsive design strategies to ensure the site looks polished on all devices.
An online magazine seeks to improve readability and visual appeal for long-form content. The skill offers typography scales with consistent ratios, color contrast guidelines for accessibility, and spacing tokens to create comfortable reading experiences with controlled line lengths and whitespace.
A tech startup building developer tools needs a functional, code-focused interface. This skill provides monospace typography pairings like JetBrains Mono, layout principles using Grid and Flexbox for efficient component arrangement, and color roles for semantic feedback in error or success states.
Offer custom CSS implementation and design system development for clients. Use the skill's patterns to deliver production-grade interfaces quickly, charging per project or hourly rates based on complexity, such as responsive layouts or advanced typography setups.
Build and sell SaaS applications with polished, user-friendly interfaces. Leverage the skill's layout and responsive design principles to create scalable products, generating revenue through subscription models, with tiers based on features or user count.
Provide consulting services to help companies establish or refine their design systems. Use the skill's color, spacing, and typography guidelines to create consistent, maintainable CSS patterns, billing clients on a retainer or per-engagement basis for ongoing support.
💬 Integration Tip
Integrate this skill by first applying layout principles with CSS Grid and Flexbox, then layer in typography and color systems, using spacing tokens for consistency across components.
Scored Apr 19, 2026
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Frontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI.
Use when building Next.js 14/15 applications with the App Router. Invoke for routing, layouts, Server Components, Client Components, Server Actions, Route Handlers, authentication, middleware, data fetching, caching, revalidation, streaming, Suspense, loading states, error boundaries, dynamic routes, parallel routes, intercepting routes, or any Next.js architecture question.
Write Tailwind utility classes with proper responsive design, dark mode, and configuration.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
Look up domain WHOIS/RDAP info and check marketplace listings. Free API, no auth required.