design-systems

This skill guides agents to create distinctive web designs by establishing bold aesthetic directions grounded in the site's purpose, industry, and audience.

by AutomatticOfficial publisherNot reviewed

Identity proven by GitHub's verified organisation badge (Automattic)

Agents: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode, claude.ai and API
License: No license stated
Pin: ea902bdpinned Oct 9, 2026
Context cost: about 2,500 tokenswhen the skill loads
GitHub stars: 115on automattic/wordpress-agent-skills
Scripts: None found

What it does

“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.”

The author's description, from SKILL.md

Generated summary from the skill's own text

This skill guides agents to create distinctive web designs by establishing bold aesthetic directions grounded in the site's purpose, industry, and audience. It provides frameworks for typography, color, motion, spatial composition, and visual details that avoid generic AI-generated aesthetics, along with specific CSS patterns and implementation guidance.

When to use it

Designing website frontends and choosing cohesive visual systems
Creating multiple design variations with meaningful differentiation
Developing motion and animation strategies for web interfaces
Selecting typography and color palettes that feel authentic to a brand

When not to

Projects requiring compliance with strict, predefined brand standards
Rapid prototyping where aesthetic distinctiveness is not a priority
Non-visual design work like UX flow or information architecture

Review

Not reviewed by a person yet. The trust card below shows what our automated checks found at the pinned commit.

Trust card

What our automated checks found

At commit ea902bd8301564fa33e336c34114ab121f24c800, checked Oct 8, 2026.

License: No license statedno license file, field or repository license
Scripts: None found
Network domains: None found
allowed-tools: None requested
Unpinned packages: None found
Spec issues: None found
Files: 1 file, 10 KB in totalLargest: SKILL.md (10 KB)
Context cost: Description: 206 characters, in context whenever the agent runs.Body: about 2,500 tokens, in context when the skill loads.
Warnings: License not statedno license file, field or repository license

Automated checks look for known patterns and can be bypassed. They decide what a reviewer reads first. This is not a guarantee.

Pins

Pin history

ea902bdOct 9, 2026Current

Install

No license stated: install from the publisher's repository, and ask the author before you reuse or share it.

These commands install from the publisher's repository and need no account.

skills CLI

npx skills add automattic/wordpress-agent-skills --skill design-systems

Installs from the repository's default branch, which may have changed since the commit we checked.

GitHub CLI 2.90 or later

gh skill install automattic/wordpress-agent-skills design-systems@ea902bd8301564fa33e336c34114ab121f24c800

Installs the commit we checked (ea902bd).

Copy by hand

Download the folder at ea902bd and put it in .claude/skills/design-systems for Claude Code and in .agents/skills/design-systems for Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

Skill folder on GitHub at ea902bd

Claude Code plugin

/plugin install build-with-wordpress@claude-plugins-official

The publisher's plugin in Claude's official marketplace. It may hold more than this skill, and we have not pinned it.

Copy for your agent

A prompt for any coding agent. It installs this skill from GitHub at the pinned commit, copies the files as they are, and runs nothing unless you ask.

Prompt

Install the agent skill "design-systems" by Automattic.

Source, pinned to commit ea902bd8301564fa33e336c34114ab121f24c800:
https://github.com/automattic/wordpress-agent-skills/tree/ea902bd8301564fa33e336c34114ab121f24c800/claude-cowork/wp-site-creator/skills/design-systems

1. Download that folder at exactly this commit. Do not use the default branch.
2. Copy every file unchanged, keeping the folder structure, into .claude/skills/design-systems/ for Claude Code and .agents/skills/design-systems/ for Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. Create the folders if they do not exist.
3. Do not edit the files, and do not run any script in the folder unless I ask you to.
4. When you are done, list the files you copied and where you put them.

Its license is restricted or not stated. Show me the license terms from the repository before you copy anything.

Listing and checks: https://www.agentnative.dev/skills/automattic/design-systems

SKILL.md at the pin

The license of this skill does not let us show its files here.

View SKILL.md on GitHub at ea902bd

Files

SKILL.md10 KB · c235a42fcc5b

1 file, 10 KB in total. Each file has a sha256 in the pin's manifest; the first 12 characters are shown.

Skill folder on GitHub at ea902bd

All 31 skills from Automattic

design-systems

What it does

When to use it

When not to

Install

Copy for your agent

SKILL.md at the pin

Files

More from Automattic

annotate

block-content

hosting-plans-helper

imagery

liberate

need-for-speed

next-bundle-optimizer

next-cache-components-optimizer

next-partial-prefetching-adoption

remotion-interactivity

remotion-interactivity

remotion-maps

What it does

When to use it

When not to

Install

Copy for your agent

SKILL.md at the pin

Files

More from Automattic

Related in Frontend and design