npx claudepluginhub outlinedriven/odin-claude-plugin --plugin odinThis skill uses the workspace's default tool permissions.
Direction first, tokens second, code last. Restraint is the default posture; ONE intentional moment per surface earns the lift.
references/anti-slop.mdreferences/chinese.mdreferences/cjk.mdreferences/cli.mdreferences/cognitive-load.mdreferences/design-systems.mdreferences/desktop.mdreferences/diversity.mdreferences/interaction-design.mdreferences/japanese.mdreferences/korean.mdreferences/motion.mdreferences/paradigms.mdreferences/personas.mdreferences/qt.mdreferences/react.mdreferences/soul.mdreferences/tui.mdreferences/ux-writing.mdreferences/web.mdGenerates distinctive, production-grade frontend code for web components, pages, and apps with bold, creative UX designs in styles like brutalist or retro-futuristic, avoiding generic AI aesthetics.
Provides UI/UX design guidance for unique, accessible web interfaces covering colors, typography, layouts. Always asks before decisions; activates for building web components, pages, apps.
Generates distinctive production-grade frontend UIs for web components, pages, and apps with bold creative designs avoiding generic AI aesthetics.
Share bugs, ideas, or general feedback.
Direction first, tokens second, code last. Restraint is the default posture; ONE intentional moment per surface earns the lift.
Direction precedes tokens; tokens precede code. The picked direction is the contract — palette, type, spacing, motion all derive from it, not the other way around. Restraint is the default; reach for decoration only when a named surface goal demands it. Posture rests on references/soul.md (design philosophy) — load when the user asks "why this look" or when the model is tempted to add decoration to compensate for a thin idea.
Balance, not maximalism. ODIN's "don't hold back" (borrowed from the <design> block above) means conviction, not volume. The two failure modes catalogued in the anti-slop charter below are reciprocals — AI-generic timidity (Side A) and decorative overkill (Side B) both come from the same fear of commitment. Balance simplicity and verbosity per surface; restraint as the default, the one intentional moment as the lift, neither timid nor loud.
<design> block — LOAD-BEARINGQuoted verbatim from output-styles/odin.md lines 254–262.
<design>
Modern, elegant UI/UX. Don't hold back.
**Tokens:** MUST use design system tokens, not hardcoded values.
**Density:** 2-3x denser. Spacing: 4/8/12/16/24/32/48/64px. Medium-high density default. Ask preference when ambiguous.
**Paradigms:** Post-minimalism [default] | Neo-brutalism | Glassmorphism | Material 3 | Fluent. Avoid naive minimalism.
**Forbidden:** Purple-blue/purple-pink | `transition: all` | `font-family: system-ui` | Pure purple/red/blue/green | Self-generated palettes | Gradients (unless explicitly requested, NEVER on buttons/titles)
**Gate:** Design excellence >= 95%
</design>
Every design surface is brand (marketing, landing, campaign, long-form content, portfolio — design IS the product) or product (app UI, admin, dashboard, tool — design SERVES the product). Identify before designing.
Detection rule. First match wins:
/marketing/* vs. /app/*).AGENTS.md, CLAUDE.md, brand brief).Brand register opens neo-brutalism / glassmorphism / M3 Expressive with Committed / Full palette / Drenched color strategies; product register defaults to Restrained + post-minimalism / Fluent 2. Full matrix in references/paradigms.md §0.
Two-sided ban-list. Each row: ban — WHY in one line. Depth in references/anti-slop.md.
Side A — slop tells (the AI-generic look):
rounded-lg uniform on every element — radius without hierarchy is decoration, not signal.shadow-md uniform across the surface — elevation that conveys nothing.transition: all — animates layout, color, and transform together; jank guaranteed.font-family: system-ui — abdicates the type decision; reads as "did not pick".Side B — overkill compensation (slop's louder cousin):
Color strategy axis (commitment level). Pick the strategy before picking colors. Each tier is deliberate, not a fallback.
The "one accent ≤10%" cap applies only to Restrained. Committed / Full palette / Drenched exceed it on purpose; treat the cap as direction-conditional, not universal.
Six steps. Do not skip the divergence step.
Frame the surface. Capture: surface (landing / dashboard / settings / docs / one-screen tool), primary user, density target, motion budget in ms. Then write one sentence of physical scene (who, where, ambient light, mood) that FORCES the dark/light decision. Category names alone do not force the answer — "observability dashboard" fails; "SRE glancing at incident severity on a 27-inch monitor at 2am in a dim room" succeeds. Consult references/soul.md for the philosophical anchor — why this design must feel a certain way before deciding how. Surface answers before generating directions; designing on assumed callers wastes the parallel budget.
Diverge: 3-4 directions in parallel via Verbalized Sampling. Dispatch one Explore agent per direction with a constraint that forces contrast (post-minimalism vs neo-brutalism vs Material 3 vs Fluent, or named taste anchors that pull in opposite directions). Reject converged outputs; re-dispatch with sharpened constraints if two directions read alike. See references/diversity.md for the six diversity-engineering techniques (verbalized sampling, actor-critic per candidate, persona injection, temperature, most-unlikely reframing, anti-pattern catalog).
Per direction, return a fixed shape. Each direction states: name (one or two words), 1-2 taste anchors (Linear / Stripe / Things 3 / Rosé Pine / Are.na — name the references), OKLCH palette stub (4-6 swatches, never the default Tailwind ramp), type pair (display + text, named families), spacing scale subset committed (e.g., 4/8/16/24/48), motion budget in ms with one easing curve.
Pick via per-axis single-select. Each axis (direction, density, motion budget, type pair) is its own single-select question; the recommended option carries (Recommended) and is placed first. Ticking (Recommended) is accepting the default. Never use multiSelect for axis-with-default override semantics — that shape collapses N independent decisions into one ambiguous checklist; reserve multiSelect for additive picks only (feature toggles, optional sub-tasks).
Derive DTCG-shaped tokens from the picked direction. Color, type, space, radius, shadow, motion — each a token, each referenced not hardcoded. Tokens precede component code; component code references tokens.
Route to the surface reference. Pick the row in §6 that matches the runtime; load that reference for surface-specific patterns and pitfalls.
| Runtime | Reference |
|---|---|
| Vanilla CSS / static HTML | references/web.md |
| React / Tailwind / shadcn | references/react.md |
| Bubble Tea / Ratatui / Textual | references/tui.md |
| clap / cobra / cmdliner / typer | references/cli.md |
| Tauri / Slint / egui / Iced | references/desktop.md |
| Qt / QML | references/qt.md |
| Cross-platform tokens | references/design-systems.md |
| Motion across runtimes (timing / easing / reduced motion) | references/motion.md |
These references are runtime-agnostic — load them when the task fits the trigger, alongside whatever surface reference is already loaded.
| Reference | Load when… |
|---|---|
references/interaction-design.md | Designing or auditing interactive elements (states, focus rings, dropdowns, modals, popovers, keyboard navigation) — applies across web / React / desktop / Qt. |
references/cognitive-load.md | Auditing a surface for mental-effort overhead (working-memory rule, the eight common violations, the cognitive-load checklist). |
references/personas.md | Running a persona-based design audit (Alex / Jordan / Sam / Riley / Casey, plus project-specific personas derived from PRD / brand brief). |
references/ux-writing.md | Drafting UI labels, error messages, empty states, confirmation dialogs, and any user-facing copy — copy is design. |
references/diversity.md | Generating diverse direction candidates in step 2 (Diverge) of the workflow — six techniques to defeat centroid convergence. |
references/cjk.md | Designing for Chinese / Japanese / Korean content — locale tagging, Pan-CJK fonts, vertical writing / ruby, locale-specific glyphs. Routes into korean.md / japanese.md / chinese.md for per-locale production trends and DS landscape. |
transition: all is forbidden — name the properties (transition: opacity 120ms ease, transform 120ms ease) so layout and paint do not animate together.<nav> / <main> / <article> first; utility classes second. Class soup over weak structure is slop.<design> block above (tokens / density / paradigm / forbidden list).git grep for raw hex, raw px values in component code; should be empty.references/cognitive-load.md checklist (≤1 failure); shipped surfaces have been read against ≥2 of the references/personas.md archetypes.