design-systems

Generate topic-specific design directions for web typography, color, motion, and grid.

14|1|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/wpgaurav/WordPress-skills --skill design-systems-wpgaurav
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-systems
Source: https://github.com/wpgaurav/WordPress-skills/tree/main/skills/wordpress/wp-site-creator/design-systems
Command: npx skills add https://github.com/wpgaurav/WordPress-skills --skill design-systems-wpgaurav

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bold aesthetic direction guidance for web design that helps avoid generic "AI slop" aesthetics. It provides a structured framework for decisions around typography, color, motion, spatial composition, and overall visual style.

Core Features & Use Cases

  • Comprehensive guidance for crafting distinctive design systems tailored to a site's topic and audience.
  • Frameworks for typography, color theory, motion, and layout, plus accessibility and brand coherence.
  • Use Case: When designing a tech startup site, generate four topic-grounded design directions with unique color palettes, typography pairings, and layouts.

Quick Start

Create four topic-specific design directions, each with a distinct mood, color palette, typography pairing, and layout concept.

Frequently Asked Questions about design-systems

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

FAQPage Schema
How do I create a web design system that avoids generic AI aesthetics?

To avoid generic AI aesthetics in web design, you need a structured framework for distinctive visual systems that guides typography, color theory, motion, and layout decisions tailored to your site's topic and audience.

What is the best way to generate distinctive color palettes and typography pairings for a website?

The best way to generate distinctive color palettes and typography pairings is to produce multiple topic-specific design directions, each with a unique mood, ensuring brand coherence and aesthetic variety for your website.

How do I ensure accessibility when building a web layout with bold visual styles?

To ensure accessibility with bold visual styles, your design system must satisfy specific accessibility constraints while applying distinctive color theory, typography, and spatial composition strategies to maintain brand coherence.

Can I get multiple mood variations for branding and layout decisions?

Yes, you can generate four topic-grounded design directions for branding and layout decisions, each featuring a distinct mood, unique color palette, typography pairing, and layout concept to guide your visual style.

Does this approach work for designing a tech startup site with specific grid strategies?

Yes, this approach works for a tech startup site by applying comprehensive design system frameworks that generate unique grid strategies, typography pairings, and motion concepts tailored to the startup's audience.

Why does my website design lack brand coherence across different visual elements?

Your website lacks brand coherence because it needs a structured design system that aligns typography, color theory, motion, and spatial composition within a unified aesthetic direction tailored to your topic.