How do I install the Codex Design System skill?

Run npx skillmds add majiayu000/codex-design-system in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Codex Design System safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Codex Design System?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Codex Design System free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Codex Design System?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Codex Design System by majiayu000 — Agent Skill

Name: Codex Design System
Rating: 4.666666666666667 (3 reviews)
Author: majiayu000

File contents

TL;DR

Load before any UI/frontend task. This skill brings 30 palettes, 21 free font pairings, 20 layout patterns, 15 micro-interactions, composition rules, current trends, and developer-UI anti-pattern fixes. Anti-generic rules: no default blue, no plain white card stacks, no bootstrap look.

Activation

Activate when task involves UI, frontend, styling, component work, or landing-page creation.
Activate on $design or "make it look premium/modern/creative".
Auto-load when frontend-specialist agent is active.

Anti-Generic Rules (HARD)

NEVER use default blue (#007bff, #2196F3, #3B82F6) or default purple (#6C63FF, #7C3AED) unless the chosen palette in references/palettes.md explicitly uses it.
NEVER ship plain white cards with border-radius: 8px and box-shadow: 0 2px 4px rgba(0,0,0,0.1).
NEVER use system fonts or unnamed "sans-serif"; specify exact font families and fallbacks.
NEVER build a fully symmetrical layout without hierarchy through size, spacing, color, or motion.
ALWAYS choose a palette from references/palettes.md before writing UI code.
ALWAYS choose a font pair from references/typography.md.
ALWAYS apply at least one composition principle from references/composition.md.
ALWAYS add at least two micro-interactions from references/micro-interactions.md.

Design Decision Flow

Decide the mood: premium, bold, calm, editorial, playful, technical, or luxury.
Pick one palette from references/palettes.md.
Pick one font pair from references/typography.md.
Pick one or two layout patterns from references/patterns.md.
Pick two or three micro-interactions from references/micro-interactions.md.
Check references/anti-patterns.md before finalizing.
Then write UI code with explicit values for color, type, spacing, radius, and shadow.

Reference Files

references/palettes.md — 30 curated palettes with exact hex tokens, mood, app fit, and contrast ratios.
references/typography.md — 21 free font pairings with imports, weights, style tags, and fallback stacks.
references/patterns.md — 20 layout patterns with structure, responsive CSS, and usage boundaries.
references/micro-interactions.md — 15 production-ready motion patterns with CSS or JS code.
references/composition.md — Visual hierarchy, spacing, grids, storytelling flow, and emphasis rules.
references/trends.md — Current design trends for 2025-2026 with code signatures and fit guidance.
references/anti-patterns.md — 15 developer-UI mistakes with wrong/right code and violated principles.

---name: codex-design-systemdescription: Modern design vocabulary with palettes, typography, layouts, animations, and composition principles. Prevents generic output and injects professional-grade aesthetics.--- ## TL;DR Load before any UI/frontend task. This skill brings 30 palettes, 21 free font pairings, 20 layout patterns, 15 micro-interactions, composition rules, current trends, and developer-UI anti-pattern fixes. Anti-generic rules: no default blue, no plain white card stacks, no bootstrap look. ## Activation 1. Activate when task involves UI, frontend, styling, component work, or landing-page creation. 2. Activate on `$design` or "make it look premium/modern/creative". 3. Auto-load when `frontend-specialist` agent is active. ## Anti-Generic Rules (HARD) - NEVER use default blue (`#007bff`, `#2196F3`, `#3B82F6`) or default purple (`#6C63FF`, `#7C3AED`) unless the chosen palette in `references/palettes.md` explicitly uses it. - NEVER ship plain white cards with `border-radius: 8px` and `box-shadow: 0 2px 4px rgba(0,0,0,0.1)`. - NEVER use system fonts or unnamed "sans-serif"; specify exact font families and fallbacks. - NEVER build a fully symmetrical layout without hierarchy through size, spacing, color, or motion. - ALWAYS choose a palette from `references/palettes.md` before writing UI code. - ALWAYS choose a font pair from `references/typography.md`. - ALWAYS apply at least one composition principle from `references/composition.md`. - ALWAYS add at least two micro-interactions from `references/micro-interactions.md`. ## Design Decision Flow 1. Decide the mood: premium, bold, calm, editorial, playful, technical, or luxury. 2. Pick one palette from `references/palettes.md`. 3. Pick one font pair from `references/typography.md`. 4. Pick one or two layout patterns from `references/patterns.md`. 5. Pick two or three micro-interactions from `references/micro-interactions.md`. 6. Check `references/anti-patterns.md` before finalizing. 7. Then write UI code with explicit values for color, type, spacing, radius, and shadow. ## Reference Files - `references/palettes.md` — 30 curated palettes with exact hex tokens, mood, app fit, and contrast ratios. - `references/typography.md` — 21 free font pairings with imports, weights, style tags, and fallback stacks. - `references/patterns.md` — 20 layout patterns with structure, responsive CSS, and usage boundaries. - `references/micro-interactions.md` — 15 production-ready motion patterns with CSS or JS code. - `references/composition.md` — Visual hierarchy, spacing, grids, storytelling flow, and emphasis rules. - `references/trends.md` — Current design trends for 2025-2026 with code signatures and fit guidance. - `references/anti-patterns.md` — 15 developer-UI mistakes with wrong/right code and violated principles.

Frequently asked questions