# Caffeinated Whale Design

> Use this skill to generate well-branded interfaces and assets for Caffeinated Whale (the cwcli CLI and Caffeinated Whale Desktop), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.

- Skill: `karotkriss/caffeinated-whale-design-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add karotkriss/caffeinated-whale-design-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/karotkriss/caffeinated-whale-design-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: karotkriss (https://skillmd.com/u/karotkriss)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/karotkriss/caffeinated-whale-design-2

---


The canonical Caffeinated Whale design system lives in this repo at `design/` (committed source of truth; do not duplicate it here).

Start by reading `../../../design/readme.md`, then explore the rest of `../../../design/`:

- `../../../design/tokens/` - the CSS custom-property tokens (colors, type, spacing, radius, elevation, motion, fonts); `../../../design/styles.css` imports them all.
- `../../../design/components/` - 26 JSX components in 7 groups (core, data, feedback, forms, icons, navigation, status), each with a `.d.ts` and a `.prompt.md`; `../../../design/components/*/**.card.html` are live preview cards.
- `../../../design/guidelines/` - the guideline cards (colors, type, spacing, radius, elevation, motion, iconography, brand mark, states).
- `../../../design/assets/` - the whale mark (`logo-whale.png`) plus 48 vendored Lucide icons under `assets/icons/`.
- `../../../design/ui_kits/` - full-screen reference kits (`desktop/` Console + splash, `cli/` terminal).
- `../../../design/_adherence.oxlintrc.json` - the adherence lint policy (raw-hex/raw-px/font/component-prop rules); `desktop/README.md` owns its deferred runner and CI wiring.

If creating visual artifacts (slides, mocks, throwaway prototypes), copy assets out of `../../../design/` and build static HTML for the user to view. If working on production code (the Tauri Console/shell), read the rules in `../../../design/` to design with this brand and derive styling from its tokens.

If the user invokes this skill without other guidance, ask them what they want to build or design, ask a few questions, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need.