skills.rest
Automattic
AutomatticOFFICIAL
Explore all skills by this author →
Website𝕏@automatticengGitHub

design-systems

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

107|14|Updated Feb 13, 2026
Search Tags:#typography#color palette#design systems#web design#aesthetics#motion design
One-click install
npx skills add https://github.com/Automattic/wordpress-agent-skills --skill design-systems-automattic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-systems
Source: https://github.com/Automattic/wordpress-agent-skills/tree/main/claude-cowork/wp-site-creator/skills/design-systems
Command: npx skills add https://github.com/Automattic/wordpress-agent-skills --skill design-systems-automattic

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about design-systems

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

FAQPage Schema
How do I avoid generic AI web design aesthetics and create a distinctive website?▼

To avoid generic AI web design aesthetics, use frameworks that ground your typography, color palettes, and motion design in the site's unique purpose and audience, ensuring distinctive visual styles.

What are the best practices for choosing typography and color palettes in frontend design?▼

Best practices for frontend design typography and color palettes involve making creative decisions based on specific rules that align with the brand, avoiding overused AI patterns to deliver a memorable aesthetic.

How do I create a bold aesthetic direction for a tech startup website?▼

Create a bold aesthetic direction for a tech startup website by defining specific font preferences, spatial composition strategies, and animation techniques that reflect the brand's unique identity and target audience.

When do I need a design system to guide my web design choices?▼

You need a design system to guide web design choices when your frontend requires specific rules for motion design and iconography to prevent uninspired outputs and maintain a consistent visual language.

Can I use these spatial composition and motion design guidelines for a luxury brand?▼

Yes, you can apply these spatial composition and motion design guidelines for a luxury brand by selecting elegant serif typography, sophisticated color strategies, and subtle animations to convey exclusivity.

Related Skills

Explore More Design & Creative Skills→
LerianStudioLerianStudio
205

positioning-development

Develop a differentiated market position with category and competitive analysis.

Official
Advanced
atrislabsatrislabs
67

atris-design

Apply the Atris design policy to frontend typography, color, layout, motion, and backgrounds.

Official
Advanced
timequitytimequity
6

frontend-design

Design production-grade frontend interfaces with bold aesthetic direction.

Official
Advanced
adilkalamadilkalam
2

frontend-aesthetics

Apply project design-dna tokens to frontend UI decisions.

Community
Advanced