skills.rest
OutlineDriven
OutlineDrivenOFFICIAL
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/OutlineDriven/odin-gemini-cli-extension --skill design-outlinedriven
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
sandrasocialsandrasocial
1

shape

Plans UX/UI by interviewing stakeholders and generating a design brief before coding.

Community
Advanced
alongor666alongor666
1

css-design-tokens

Define CSS design tokens for colors, spacing, typography, and theming.

Community
Basic
chicongstchicongst
2

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

Community
Intermediate
MMA-Marketing-ProMMA-Marketing-Pro
1

minimalist-ui

Design minimalist user interfaces with monochrome palettes and bento grid layouts.

Official
Advanced