design-systems

Name: design-systems
Author: Automattic

106stars12forks

How to install design-systems?

automattic/wordpress-agent-skills/design-systems

$npx -y skills add Automattic/wordpress-agent-skills --skill design-systems

Installs into the current project.

Summary

Bold aesthetic direction guidance for web design. Use when making creative decisions about typography, color, motion, spatial composition, and overall visual style. Helps avoid generic "AI slop" aesthetics.

Files · 1

View on GitHub

SKILL.md

1	# Design Systems Skill
2
3	Frameworks for creating distinctive, memorable web designs that avoid generic "AI slop" aesthetics.
4
5	## Absolute Rules
6
7	- NO EMOJIS: Never use emojis anywhere in generated content - not in headings, paragraphs, button text, or any other text.
8
9	## Design Thinking Framework
10
11	Before designing, understand the context and commit to a BOLD aesthetic direction:
12
13	### 1. Purpose
14	- What problem does this design solve?
15	- Who uses it?
16	- What action should users take?
17
18	### 2. Tone
19	Do NOT pick from a fixed list of generic styles. Instead, derive every direction from the site's topic, industry, culture, and audience:
20
21	- Think like a specialist designer who has been hired for exactly this brief. What visual references would you research? What mood boards would you create? What real-world spaces, objects, materials, or cultural artefacts inform the aesthetic?
22	- Ground each direction in the topic. For a traditional restaurant, directions might explore rustic warmth, refined elegance, or cultural heritage — never brutalist concrete. For a tech startup, directions might explore clean precision, bold disruption, or data-driven minimalism — never cozy farmhouse.
23	- Ensure authentic diversity. The 4 directions should vary meaningfully in color palette, typography, layout approach, and mood — but every one must feel like a plausible, thoughtful design for this specific type of site. Diversity comes from exploring different facets of the topic, not from importing unrelated aesthetics.
24	- Name each direction specifically. Titles should reflect the topic-grounded concept (e.g., "Warm Heritage" or "Alpine Elegance" for a Swiss chalet site), not generic labels like "Minimalist" or "Bold".
25
26
27	### 3. Constraints
28	- Technical requirements (framework, performance, accessibility)
29	- Brand guidelines (if any)
30	- Content requirements
31
32	### 4. Differentiation
33	What makes this UNFORGETTABLE? What's the one thing someone will remember?
34
35	## Frontend Aesthetics Guidelines
36
37	You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight.
38
39	### Typography
40
41	Choose fonts that are beautiful, unique, and interesting.
42
43	AVOID (overused/generic):
44	- Inter
45	- Roboto
46	- Arial
47	- System fonts
48	- Space Grotesk (overused by AI)
49
50	PREFER (distinctive choices):
51	- Pair a distinctive display font with a refined body font
52	- Consider: Fraunces, Clash Display, Cabinet Grotesk, Satoshi, Outfit, Syne, DM Serif Display, Playfair Display, Cormorant Garamond, Archivo
53	- Match font personality to brand (tech: geometric sans; luxury: refined serif; creative: display fonts)
54	- Unexpected, characterful font choices that elevate the frontend's aesthetics
55
56	Typography scale:
57	- Use a consistent scale (1.25 or 1.333 ratio)
58	- Headings should command attention
59	- Body text should be comfortable to read (16-18px minimum)
60
61	### Color & Theme
62
63	Commit to a cohesive aesthetic. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
64
65	Strategies:
66	- Monochromatic with accent: Single color family + one pop color
67	- Complementary contrast: Two opposing colors (careful with saturation)
68	- Analogous harmony: Adjacent colors on the wheel
69	- Dark mode: Not just inverted - design specifically for dark
70
71	AVOID:
72	- Purple gradients on white backgrounds (cliched AI aesthetic)
73	- Evenly distributed rainbow palettes
74	- Low-contrast, washed-out schemes
75	- Generic blue (#007bff) as primary
76	- Timid, evenly-distributed palettes
77
78	Color proportions:
79	- 60% dominant (backgrounds, large areas)
80	- 30% secondary (containers, sections)
81	- 10% accent (CTAs, highlights)
82
83	### Motion & Animation
84
85	Motion is a design system element like color and typography — it should be intentional, cohesive, and matched to the site's personality. Prioritize CSS-only solutions.
86
87	Technique palette — choose from these categories to create a rich, dynamic experience:
88
89	\| Category \| Techniques \|
90	\|----------\|-----------\|
91	\| Entrance animations \| Fade-up, slide-in, scale-up, clip-path reveals — with staggered delays for groups \|
92	\| Hover/focus transitions \| Card lifts, button transforms, underline grows, color shifts, shadow deepens \|
93	\| Continuous subtle motion \| Floating elements, pulsing accents, slow-rotating decorative shapes, gradient shifts \|
94	\| Scroll-triggered reveals \| Sections/elements animate as they enter the viewport \|
95	\| Background animation \| Gradient color cycling, pattern movement, ambient drift \|
96	\| Text effects \| Letter-spacing transitions, weight shifts, color wipes on headings \|
97
98	CSS animation patterns:
99	```css
100	/* Staggered fade-up entrance */
101	.fa

People who liked this also viewed

6 picks

Type

design-systems

106stars12forks

View on GitHub

How to install design-systems?

automattic/wordpress-agent-skills/design-systems

$npx -y skills add Automattic/wordpress-agent-skills --skill design-systems

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Design Systems Skill
2
3	Frameworks for creating distinctive, memorable web designs that avoid generic "AI slop" aesthetics.
4
5	## Absolute Rules
6
7	- NO EMOJIS: Never use emojis anywhere in generated content - not in headings, paragraphs, button text, or any other text.
8
9	## Design Thinking Framework
10
11	Before designing, understand the context and commit to a BOLD aesthetic direction:
12
13	### 1. Purpose
14	- What problem does this design solve?
15	- Who uses it?
16	- What action should users take?
17
18	### 2. Tone
19	Do NOT pick from a fixed list of generic styles. Instead, derive every direction from the site's topic, industry, culture, and audience:
20
21	- Think like a specialist designer who has been hired for exactly this brief. What visual references would you research? What mood boards would you create? What real-world spaces, objects, materials, or cultural artefacts inform the aesthetic?
22	- Ground each direction in the topic. For a traditional restaurant, directions might explore rustic warmth, refined elegance, or cultural heritage — never brutalist concrete. For a tech startup, directions might explore clean precision, bold disruption, or data-driven minimalism — never cozy farmhouse.
23	- Ensure authentic diversity. The 4 directions should vary meaningfully in color palette, typography, layout approach, and mood — but every one must feel like a plausible, thoughtful design for this specific type of site. Diversity comes from exploring different facets of the topic, not from importing unrelated aesthetics.
24	- Name each direction specifically. Titles should reflect the topic-grounded concept (e.g., "Warm Heritage" or "Alpine Elegance" for a Swiss chalet site), not generic labels like "Minimalist" or "Bold".
25
26
27	### 3. Constraints
28	- Technical requirements (framework, performance, accessibility)
29	- Brand guidelines (if any)
30	- Content requirements
31
32	### 4. Differentiation
33	What makes this UNFORGETTABLE? What's the one thing someone will remember?
34
35	## Frontend Aesthetics Guidelines
36
37	You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight.
38
39	### Typography
40
41	Choose fonts that are beautiful, unique, and interesting.
42
43	AVOID (overused/generic):
44	- Inter
45	- Roboto
46	- Arial
47	- System fonts
48	- Space Grotesk (overused by AI)
49
50	PREFER (distinctive choices):
51	- Pair a distinctive display font with a refined body font
52	- Consider: Fraunces, Clash Display, Cabinet Grotesk, Satoshi, Outfit, Syne, DM Serif Display, Playfair Display, Cormorant Garamond, Archivo
53	- Match font personality to brand (tech: geometric sans; luxury: refined serif; creative: display fonts)
54	- Unexpected, characterful font choices that elevate the frontend's aesthetics
55
56	Typography scale:
57	- Use a consistent scale (1.25 or 1.333 ratio)
58	- Headings should command attention
59	- Body text should be comfortable to read (16-18px minimum)
60
61	### Color & Theme
62
63	Commit to a cohesive aesthetic. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
64
65	Strategies:
66	- Monochromatic with accent: Single color family + one pop color
67	- Complementary contrast: Two opposing colors (careful with saturation)
68	- Analogous harmony: Adjacent colors on the wheel
69	- Dark mode: Not just inverted - design specifically for dark
70
71	AVOID:
72	- Purple gradients on white backgrounds (cliched AI aesthetic)
73	- Evenly distributed rainbow palettes
74	- Low-contrast, washed-out schemes
75	- Generic blue (#007bff) as primary
76	- Timid, evenly-distributed palettes
77
78	Color proportions:
79	- 60% dominant (backgrounds, large areas)
80	- 30% secondary (containers, sections)
81	- 10% accent (CTAs, highlights)
82
83	### Motion & Animation
84
85	Motion is a design system element like color and typography — it should be intentional, cohesive, and matched to the site's personality. Prioritize CSS-only solutions.
86
87	Technique palette — choose from these categories to create a rich, dynamic experience:
88
89	\| Category \| Techniques \|
90	\|----------\|-----------\|
91	\| Entrance animations \| Fade-up, slide-in, scale-up, clip-path reveals — with staggered delays for groups \|
92	\| Hover/focus transitions \| Card lifts, button transforms, underline grows, color shifts, shadow deepens \|
93	\| Continuous subtle motion \| Floating elements, pulsing accents, slow-rotating decorative shapes, gradient shifts \|
94	\| Scroll-triggered reveals \| Sections/elements animate as they enter the viewport \|
95	\| Background animation \| Gradient color cycling, pattern movement, ambient drift \|
96	\| Text effects \| Letter-spacing transitions, weight shifts, color wipes on headings \|
97
98	CSS animation patterns:
99	```css
100	/* Staggered fade-up entrance */
101	.fa

People who liked this also viewed

6 picks

Type