design-systems

Guide web design aesthetics with typography, color, motion, and spatial composition.

27|1|Updated Feb 16, 2026
One-click install
npx skills add https://github.com/dr-robert-li/cowork-wordpress-expert --skill design-systems-dr-robert-li
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-systems
Source: https://github.com/dr-robert-li/cowork-wordpress-expert/tree/main/references/design-systems
Command: npx skills add https://github.com/dr-robert-li/cowork-wordpress-expert --skill design-systems-dr-robert-li

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps create distinctive, memorable web designs that avoid generic "AI slop" aesthetics by providing guidance on typography, color, motion, and spatial composition.

Core Features & Use Cases

  • Aesthetic Direction: Guides the creation of unique visual styles grounded in the site's purpose, tone, and audience.
  • Frontend Guidelines: Offers specific recommendations and examples for typography, color palettes, motion design, spatial composition, backgrounds, and iconography.
  • Use Case: When designing a website for a luxury brand, use this Skill to define a sophisticated color palette, select elegant serif fonts, and implement subtle, refined animations that convey exclusivity.

Quick Start

Use the design-systems skill to generate a bold aesthetic direction for a new tech startup website.

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 distinctive web design aesthetic that avoids generic AI visuals?

To create a distinctive web design aesthetic, you need specific strategies for typography, color palettes, motion design, and spatial composition grounded in your site's purpose and tone. This prevents generic outputs by defining rules for visual differentiation.

What is the best way to define a unique visual style for a luxury brand website?

The best way to define a unique visual style for a luxury brand is to establish a sophisticated color palette, select elegant serif typography, and implement subtle motion design that conveys exclusivity through specific frontend guidelines.

How do I choose typography and color palettes that match my website's audience?

To choose typography and color palettes that match your audience, apply a design framework that maps creative decisions to the site's defined purpose, tone, and constraints, yielding specific aesthetic recommendations.

Can I use design systems guidelines for frontend spatial composition and motion design?

Yes, you can use design systems guidelines for frontend spatial composition and motion design. They offer specific recommendations and examples for backgrounds, iconography, and animations to shape unique visual styles.

When should I not use a generic aesthetic framework for web design?

You should not use a generic aesthetic framework when your web design project requires memorable, unique visual styles. If the site needs to differentiate through bold typography, color, and spatial composition, predefined generic outputs will fail.

Do I need predefined rules and constraints to generate a bold aesthetic direction?

Yes, you need predefined rules and constraints to generate a bold aesthetic direction. Establishing specific frameworks for purpose, tone, and audience is required to guide creative decision-making and achieve unique visual styles.