A platform-neutral design skill for high-fidelity HTML design and prototype creation —
works on both Claude Code and OpenAI Codex. Ships with 69 brand design systems
(Stripe, Vercel, Notion, Apple, Tesla, Linear, and more) bundled under
references/design-systems/.
This is an unofficial adaptation that unifies two upstream projects (ZeroZ-lab/cc-design and VoltAgent/awesome-claude-design) into a single skill that runs on either coding agent. See CREDITS.md for full attribution.
The two best open-source design skills are Claude-specific:
- cc-design uses Playwright MCP and Claude's
Skill/AskUserQuestiontools - awesome-claude-design targets Anthropic's Claude Design workspace at
claude.ai/design
OpenAI Codex users could read the files but couldn't use them natively — tool names, invocation syntax, and the skill manifest format differed just enough to break things.
This repo adapts the workflow once so the same directory works in either host:
- SKILL.md uses a neutral
allowed-toolswhitelist - references/verification-protocol.md has side-by-side Claude vs. Codex tool calls
- references/platform-tools.md spells out the full mapping
- agents/openai.yaml expands from the cc-design stub into a real Codex manifest
- AGENTS.md follows OpenAI's AGENTS.md convention
- install-claude.sh / install-codex.sh install into the right directory per host
- 69 brand design systems are pre-fetched so the skill works offline
git clone https://github.com/pnaque/pnaque_codex-universal-design-skill
cd pnaque_codex-universal-design-skill
./install-claude.shThat copies the skill into ~/.claude/skills/codex-universal-design/, runs npm install
on the export scripts, and offers to install Playwright Chromium.
git clone https://github.com/pnaque/pnaque_codex-universal-design-skill
cd pnaque_codex-universal-design-skill
./install-codex.shInstalls into ~/.codex/skills/codex-universal-design/. Codex will auto-discover it
on the next session.
# Claude Code
git clone https://github.com/pnaque/pnaque_codex-universal-design-skill ~/.claude/skills/codex-universal-design
# Codex
git clone https://github.com/pnaque/pnaque_codex-universal-design-skill ~/.codex/skills/codex-universal-design
# Then in either case, for export scripts:
cd <install-path>/scripts && npm install
npx playwright install chromium # optional, for PDF export fallback| Category | Capabilities |
|---|---|
| Output formats | Interactive prototypes, slide decks, landing pages, UI mockups, animated motion studies, wireframes, design systems |
| Brand style cloning | 69 bundled brand design systems (Stripe, Vercel, Notion, Apple, Tesla, Linear, Figma, Spotify, Tesla, Ferrari, and 58 more) |
| Design patterns | Curated catalog of proven layout patterns with case studies |
| Design excellence | Built-in quality framework with emotional tone targeting, hierarchy checks, anti-slop rules |
| Variations | Generates 3+ design directions across layout, interaction, visual intensity, motion axes |
| Prototyping | React + Babel inline JSX with pinned versions, component scope management |
| Tweaks system | In-page design controls with real-time preview and localStorage persistence |
| Verification | Three-phase verification (structural, visual, design excellence) — platform-adaptive |
| Export | PPTX, PDF, and self-contained inline HTML via local Node.js scripts |
The skill activates automatically on design-related requests:
"Design a landing page for our SaaS product"
"Create a 10-slide pitch deck for the Q3 board meeting"
"Build an interactive prototype of the checkout flow"
"Explore 3 visual directions for the new dashboard"
"Make the onboarding screens look good on mobile"
"Create a design system for our product"
Mention a brand — the skill reads the corresponding bundled DESIGN.md:
"Pricing page with Stripe's aesthetic"
"Notion-style kanban board"
"Mix Vercel's minimalism with Linear's purple accents"
"Show me this dashboard in Apple style vs Tesla style"
All 69 brands are listed in references/design-systems/.
Understand → Route → Acquire Context → Design Intent → Build → Verify → Deliver
│ │ │ │ │ │ │
▼ ▼ ▼ ▼ ▼ ▼ ▼
Clarify Load Read 6-question HTML + 3-phase File
questions refs + design checklist React verify: delivered
templates system comps structural,
visual,
excellence
The routing table in SKILL.md maps task types to specific references and templates,
loading only what's required per task. SKILL.md stays under 200 lines; everything else
is progressive-disclosure.
| Platform | Status | Notes |
|---|---|---|
| Claude Code (CLI) | ✅ Primary | Playwright MCP + local scripts |
| OpenAI Codex (CLI / IDE) | ✅ Primary | Delegates browser work to $playwright / $screenshot; local scripts as fallback |
| Claude Design (claude.ai/design) | Use the bundled references/design-systems/<brand>/DESIGN.md file directly — upload it to claude.ai/design |
codex-universal-design/
├── SKILL.md # Platform-neutral skill definition
├── AGENTS.md # Codex instructions
├── agents/openai.yaml # Codex manifest: policy, dependencies, default_prompt
├── EXAMPLES.md # Usage examples (from cc-design)
│
├── references/ # Progressive-disclosure docs
│ ├── design-excellence.md
│ ├── design-patterns.md
│ ├── frontend-design.md
│ ├── design-system-creation.md
│ ├── getdesign-loader.md # On-demand fetch of extra brands
│ ├── react-babel-setup.md
│ ├── starter-components.md
│ ├── interactive-prototype.md
│ ├── tweaks-system.md
│ ├── platform-tools.md # Claude vs Codex tool matrix
│ ├── verification-protocol.md # Three-phase verify, platform-adaptive
│ ├── question-protocol.md
│ ├── case-studies/ # Real-world design references
│ └── design-systems/ # 69 bundled brand DESIGN.md files
│ ├── stripe/DESIGN.md
│ ├── vercel/DESIGN.md
│ ├── notion/DESIGN.md
│ └── … (66 more)
│
├── templates/ # Starter component files
│ ├── deck_stage.js
│ ├── design_canvas.jsx
│ ├── ios_frame.jsx
│ ├── android_frame.jsx
│ ├── macos_window.jsx
│ ├── browser_window.jsx
│ └── animations.jsx
│
├── scripts/ # Export + fetch utilities
│ ├── gen_pptx.js # HTML → PPTX
│ ├── super_inline_html.js # HTML + assets → single file
│ ├── open_for_print.js # HTML → PDF via Playwright
│ ├── fetch_all_design_systems.sh # Re-fetch bundled DESIGN.md files
│ └── package.json
│
├── install-claude.sh # One-shot installer for Claude Code
├── install-codex.sh # One-shot installer for OpenAI Codex
│
├── LICENSE # MIT
├── CREDITS.md # Full attribution
└── README.md # You are here
This repository is an adaptation, not a fork. The original authors are credited in full in CREDITS.md. Summary:
- ZeroZ-lab/cc-design (MIT) — the base skill, references, templates, and export scripts.
- VoltAgent/awesome-claude-design (MIT) — the curated index of 69 brand design systems.
- getdesign.md — the source of each bundled
DESIGN.mdfile (fetched vianpx getdesign@latest add <brand>). - Anthropic Claude Design — the design-as-persistent-system concept.
- OpenAI Codex conventions — the
AGENTS.mdformat and skill directory layout follow the official Codex docs.
All upstream licenses are MIT. If you are one of the upstream authors and would like a change in attribution, please open an issue.
- Keep
SKILL.mdunder 200 lines — move new technical content toreferences/ - When adding a new reference document, add a row to the routing table in
SKILL.md - New brand design systems: add to
scripts/fetch_all_design_systems.shBRANDS list, run the script, commit the result - Test with representative prompts on both Claude Code and Codex before PR
MIT — see LICENSE.