shipkit-design-system

A design-system setup guide that turns a project's context into visual principles, design tokens, and an evolving component-library plan. Design tokens are named values such as colors, spacing, and font sizes.

In plain words
What is it for?
Use it to define brand guidelines, visual direction, design principles, and reusable interface rules for a project with a user interface.
Why use it?
It gives the interface a consistent visual direction based on the project instead of leaving appearance decisions scattered or generic.

Skill for Claude CodeCodex

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.

agentmods
npx agentmods add skills/stefan-stepzero/shipkit/shipkit-design-system
Any agent
npx skills add stefan-stepzero/shipkit --skill shipkit-design-system
Clone the repo
git clone --depth 1 https://github.com/stefan-stepzero/shipkit

Made for: Claude Code, Codex.

Per session 46 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,707 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
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.

ModelPer sessionOnce invoked
Fable 5 $0.00046 $0.03707
Opus 5 $0.00023 $0.01853
Sonnet 5 $0.00009 $0.00741
Haiku 4.5 $0.00005 $0.00371

Measured 2d ago against content hash 6e57c09c1827, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

shipkit-design-system 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 2d ago.

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.

install/skills/shipkit-design-system/SKILL.md · 350 lines

How it starts

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

shipkit-design-system — Tiered Design System

Synthesizes design direction from upstream project context and scaffolds a design system that grows with the product — from tokens + principles on day 1 to a governed component library at maturity.

Combines two approaches:

  • Creative direction (inspired by Anthropic's frontend-design plugin) — opinionated aesthetic guidance, but derived from YOUR project context instead of generic defaults
  • Structural scaffolding (from the maturity-tiered model) — principles, tokens, maturity tracking that persist across sessions

When to Invoke

User triggers:

  • "Set up design system", "Design tokens", "Brand guidelines"
  • "Visual direction", "Design principles", "How should this look?"

Workflow position:

  • After /shipkit-engineering-definition (needs stack direction, component structure)
  • Before /shipkit-product-goals and /shipkit-engineering-goals (goals can reference design criteria)
  • Also useful standalone at any point for projects with UI

Prerequisites

Required (fail gracefully if missing):

  • .shipkit/why.json — vision, tone, brand identity (drives principles and direction)

Recommended (enrich the output):

  • .shipkit/product-discovery.json — personas, accessibility needs
  • .shipkit/product-definition.json — features, UX patterns
  • .shipkit/engineering-definition.json — stack direction, component structure
  • .shipkit/goals/strategic.json — project stage

Optional:

  • .shipkit/stack.json — tech stack (token format detection)
  • .shipkit/codebase-index.json — existing code patterns

If why.json is missing, tell the user: "Run /shipkit-why-project first — I need to understand the project vision to derive design direction." and stop.


Process

Completion Tracking

After reading prerequisites, create tasks:

  • TaskCreate: "Synthesize design direction from project context"
  • TaskCreate: "Generate 3-5 verb-based design principles"
  • TaskCreate: "Scaffold token file (CSS or Tailwind)"
  • TaskCreate: "Write MATURITY.md and DIRECTION.md"
  • TaskCreate: "Update architecture.json with designSystem section"

Read the full file on GitHub · 350 lines

Files

What ships with it

3 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.

  1. 2d ago First seen · 350 lines · 46 tokens per session scan A 6e57c09c1827

Subscribe to this mod's changes

shipkit-design-system is a skill published in the GitHub repository stefan-stepzero/shipkit (1 stars, last pushed 1mo ago), licensed MIT. It adds 46 tokens to every session and 3,707 once invoked, about $0.0002 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-08-31.