Skills
.Work. You
Rest

design-systems

Official

Craft bold, unique web design aesthetics.

Design & Creative#typography#color palette#design systems#web design#aesthetics#motion design
AuthorAutomattic
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps users avoid generic, uninspired "AI slop" aesthetics by providing frameworks and guidelines for creating distinctive and memorable web designs.

Core Features & Use Cases

  • Aesthetic Direction Guidance: Provides frameworks for making creative decisions about typography, color, motion, and spatial composition.
  • Avoids Generic Output: Helps ensure designs are unique, topic-grounded, and avoid overused AI patterns.
  • Frontend Aesthetics Guidelines: Offers specific advice on typography choices, color strategies, motion techniques, spatial composition, and iconography.
  • Use Case: When designing a website for a luxury brand, use this skill to define a sophisticated color palette, elegant serif typography, and subtle, refined animations that convey exclusivity.

Quick Start

Use the design-systems skill to generate three distinct and bold aesthetic directions for a new tech startup website.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-systems
Download link: https://github.com/Automattic/wordpress-agent-skills/archive/main.zip#design-systems

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.