A design-system planning and implementation guide for frontend projects. A design system is a shared set of visual rules, reusable components, and accessibility practices for building consistent user interfaces.

Use it to define colors, typography, spacing, and shadows; organize component libraries; set up theming; document components; and apply WCAG accessibility patterns.

It helps teams make interface decisions consistent across screens and contributors. It also provides guidance for accessibility and alternate themes such as dark mode.

design-plan — Skill for Codex by Dannykkh

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add Dannykkh/skill-olympus --skill design-plan

Clone the repo

git clone --depth 1 https://github.com/Dannykkh/skill-olympus

Made for: Codex.

Or install skill-olympus, the plugin that ships this one along with the rest of its 98 skills, 7 commands, 42 agents, 5 MCP servers.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/dannykkh/skill-olympus/design-plan.svg)](https://agentmods.dev/skills/dannykkh/skill-olympus/design-plan)

Your own site

<a href="https://agentmods.dev/skills/dannykkh/skill-olympus/design-plan"><img src="https://agentmods.dev/badge/skills/dannykkh/skill-olympus/design-plan.svg" alt="Measured on agentmods" height="20"></a>

Per session 108 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 8,059 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits

NVIDIA SkillSpector pass 7 Sept 2026

How audits are shown

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00108	$0.08059
Opus 5	$0.00054	$0.04029
Sonnet 5	$0.00022	$0.01612
Haiku 4.5	$0.00011	$0.00806

Measured 4d ago against content hash 14621ad1e282, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-07, from the pricing page.

Security

Grade A, and why

design-plan scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

The scan reads SKILL.md. This mod also ships 2 executable files (scripts/test_validate_experience_contract.py, scripts/validate_experience_contract.py), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/design-plan/SKILL.md · 526 lines

How it starts

The opening of the file, as written. The whole thing — 526 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Aphrodite — Experience-led Frontend Design

아프로디테는 색과 컴포넌트를 고르는 스킬이 아닙니다. 사용자가 이해하고 행동하고 신뢰하고 실패에서 회복하는 흐름을 아름다운 시각 언어로 구현하는 디자인 하네스입니다.

Quick Start

/aphrodite
/aphrodite --plan-only
/aphrodite --review-only
/aphrodite --benchmark <URL-or-file>
/aphrodite --product-design
/aphrodite --stitch

내부 소스 모듈 해석 계약 (필수)

frontend-design, mermaid-diagrams, ui-ux-auditor, web-design-guidelines는 모든 관련 실행에서 사용하는 핵심 source-only 내부 모듈입니다. design-system-starter, stitch, skill-evolve, autoresearch도 등록 스킬을 호출하는 것이 아니라, 해당 선택 경로가 실제로 요청됐을 때만 직접 읽는 조건부 source-only 모듈입니다. 각 이름에 대해 해석된 SKILL.md 절대경로를 MODULE_SKILL[name], 그 부모 디렉터리를 MODULE_ROOT[name]으로 기록합니다. 조건부 모듈은 다음 경계에서만 해석합니다.

design-system-starter: 사용자가 상세 디자인 시스템 scaffold를 명시적으로 요청했을 때
stitch: --stitch 또는 명시적인 Stitch 실행 요청이 있을 때, Phase 5 진입 직전
skill-evolve: Phase 7에서 전역 규칙 변경을 사용자가 명시적으로 승인한 뒤
autoresearch: 승인된 skill-evolve 절차가 대조 실험을 요구할 때

각 모듈을 처음 쓰기 전에 다음 순서로 해석합니다.

프로젝트 루트의 skills/<name>/SKILL.md가 실제 파일로 존재하고 frontmatter의 name이 정확히 <name>일 때만 그 절대경로를 사용합니다. 없거나 이름이 다르면 프로젝트의 다른 경로를 추측하지 않고 2번으로 갑니다.
없으면 현재 런타임의 활성 루트에서 정확한 skills/<name>/SKILL.md를 확인합니다. Codex는 $CODEX_HOME/skills(미설정이면 ~/.codex/skills), Claude와 Grok 호환 표면은 ~/.claude/skills, Antigravity는 ~/.gemini/antigravity-cli/skills입니다. 파일 존재와 frontmatter 이름이 모두 일치할 때만 사용하고, 아니면 3번으로 갑니다.
없으면 현재 런타임의 전역 SKILLS-CATALOG.md를 읽습니다. Codex는 $CODEX_HOME/SKILLS-CATALOG.md(미설정이면 ~/.codex/SKILLS-CATALOG.md), Claude와 Grok 호환 표면은 ~/.claude/SKILLS-CATALOG.md, Antigravity는 ~/.gemini/antigravity-cli/SKILLS-CATALOG.md입니다. 첫 번째 셀이 정확히 <name>인 행 (| <name> | ... | ... | <읽을 경로> |) 하나를 찾아 읽을 경로의 절대 SKILL.md를 그대로 사용합니다. 정확한 이름의 행이 0개이거나 2개 이상이면 해석 실패이며 다른 행이나 레지스트리 경로를 추측하지 않습니다.
해석한 파일의 존재를 확인하고 SKILL.md 전체를 읽은 뒤에만 그 모듈의 기준을 적용합니다. 참조 파일은 MODULE_ROOT[name]/references/..., 스크립트는 MODULE_ROOT[name]/scripts/...로부터 절대경로를 만듭니다.

이 과정은 모듈 읽기이지 스킬 호출이 아닙니다. /frontend-design, /mermaid-diagrams, /ui-ux-auditor, /web-design-guidelines, /design-system-starter, /stitch, /skill-evolve, /autoresearch를 호출하거나 스킬 레지스트리에 등록됐다고 가정하지 않습니다. 프로젝트·활성 루트 파일도 없고 카탈로그의 정확한 행·읽을 경로·필수 참조 중 하나라도 없으면 완료 증거의 Module Coverage에 경로와 이유를 기록하고 다음 한정된 native fallback을 사용합니다. fallback도 실행할 수 없는 검사는 NOT RUN, UNVERIFIED, 또는 BLOCKED로 남기며 통과로 바꾸지 않습니다. 요청되지 않은 조건부 모듈은 NOT REQUESTED이며 완료 누락으로 계산하지 않습니다.

Read the full file on GitHub · 526 lines

Files

What ships with it

9 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

4d ago First seen · 526 lines · 108 tokens per session scan A 14621ad1e282

Subscribe to this mod's changes

design-plan is a skill published in the GitHub repository Dannykkh/skill-olympus (5 stars, last pushed today), licensed MIT. It adds 108 tokens to every session and 8,059 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

CSS and styling Claude Code Design and UX Frontend ai-agent ai-automation ai-coding claude-code-agents claude-code-hooks

polish

Frontend quick wins to wow effects (6 dimensions). Use when: "polish", "beautify", "improve", "wow", "improve design", "enhance", "quick wins".

claude-hangar/claude-hangar · 44 tokens

factory-design

Design-system discipline distilled across builds. Semantic token vocabulary (name intent, not palette position), CSS variables bridged into Tailwind, dark/light as a variable swap, single- vs two-layer token systems, component primitives as token consumers, when to promote a repeated utility cluster into a primitive…

nonlinear-xyz/factory-kit · 100 tokens

design-plan