design

Codify a direction-first UI design workflow with token derivation and surface routing.

5|2|Updated Nov 17, 2025

Search Tags:#ui-design #design-tokens #design-systems #oklch #paradigms #direction-first

Ready to run

npx skills add https://github.com/OutlineDriven/odin-gemini-cli-extension --skill design-outlinedriven

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design
Source: https://github.com/OutlineDriven/odin-gemini-cli-extension/tree/main/skills/design
Command: npx skills add https://github.com/OutlineDriven/odin-gemini-cli-extension --skill design-outlinedriven

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Codifies a direction-first UI design workflow to reduce ambiguity in visual direction.

Core Features & Use Cases

Direction-first workflow: choose a paradigm and commit to a registered direction artifact.
Token-driven design: derive OKLCH color tokens, spacing scales, typography from the direction.
Cross-surface guidance: routes to web, tui, cli, and desktop patterns with surface references.
Anti-slop governance: enforces constraints to prevent over-decoration and RLHF-like generic palettes.

Quick Start

Create a surface brief, pick one direction (e.g., post-minimalism), and commit to tokens and density derived from that direction.

Frequently Asked Questions about design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is a direction-first UI design workflow and how does it reduce visual ambiguity?▼

A direction-first UI design workflow requires choosing a visual paradigm upfront and committing to a registered direction artifact. This reduces ambiguity by deriving all subsequent design tokens from that single chosen direction.

How do I derive design tokens using OKLCH color spaces for a design system?▼

You derive OKLCH color tokens by selecting a design paradigm first, which then automatically generates corresponding spacing, typography, radii, and motion tokens to maintain visual consistency across your design system.

Can I use the same design tokens across web, TUI, CLI, and desktop surfaces?▼

Yes, this approach supports cross-runtime surface references. It routes your derived tokens to web, TUI, CLI, and desktop patterns, ensuring consistent visual direction across multiple platforms.

How do I prevent over-decoration and generic palettes when building a UI design system?▼

Anti-slop governance enforces strict constraints to prevent over-decoration and generic RLHF-like palettes. It limits type families to two and mandates token derivation from your chosen paradigm.

What is the best way to start a token-driven design workflow for cross-platform interfaces?▼

Start by creating a surface brief, picking one specific direction like post-minimalism, and committing to the tokens and density derived from that direction to guide all subsequent UI design decisions.

Why does a token-driven UI design approach limit type families to two?▼

Limiting type families to two enforces anti-slop governance constraints. This prevents over-decoration and ensures typography remains strictly derived from the committed visual direction artifact.