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 16, 2026
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Build or update the BlueBubbles external channel plugin for Clawdbot (extension package, REST send/probe, webhook inbound).
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use...
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architect...