skills.rest
VKirill
VKirillCOMMUNITY
Explore all skills by this author →
GitHub

design-system-2026

Generate 2026-ready design system specifications with OKLCH palettes and DESIGN.md tokens.

15|2|Updated May 23, 2026
Search Tags:#design tokens#oklch#DESIGN.md#container queries#bento grid#typography pairing#accessibility contrast
One-click install
npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill design-system-2026
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-2026
Source: https://github.com/VKirill/antigravity-for-claude-code/tree/main/skills/design-system-2026
Command: npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill design-system-2026

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the problem of inconsistent, ad-hoc UI design by providing a single, accessibly verified blueprint for color, typography, layout, and tokens that can be instantiated into a project-ready DESIGN.md.

Core Features & Use Cases

  • OKLCH color system foundations: perceptually-even ramps and contrast verification guidance for palettes and semantic roles.
  • Typography + fluid scale planning: stable, CLS-safe font pairings with fluid clamp-based sizing and readability rules.
  • Layout systems for modern UI: bento grids, subgrid alignment, container-query responsiveness, and fluid spacing.
  • 3-layer token architecture + DESIGN.md authoring: integrates a structured design token contract aligned to DTCG/DTCG-like tooling workflows.
  • Visual style taxonomy + art-direction recipes: maps a brand archetype into a coherent art-direction plan.
  • Palette/type selection procedure: a deliberate select → justify → instantiate workflow that prevents “color soup” failures.

Quick Start

Use this skill to create a project DESIGN.md by selecting one palette from the vetted palette-schemes menu, one type pairing from type-pairings, and instantiating their roles into docs/plans/<slug>/DESIGN.md while recording the rationale in art-direction.md.

Frequently Asked Questions about design-system-2026

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

FAQPage Schema
How do I generate an OKLCH design system for my project?▼

You generate an OKLCH design system by selecting a palette from a vetted menu, justifying the archetype choice, and instantiating color roles into a project-ready DESIGN.md. This process ensures perceptually-even color ramps and verified contrast for your UI.

What is the 3-layer design token architecture for UI components?▼

The 3-layer design token architecture organizes styles into primitives, semantics, and components. This structured contract aligns with DTCG-like tooling workflows to translate brand intent into consistent, scalable variables for your design system.

How do I ensure WCAG accessibility contrast when creating color palettes?▼

You ensure WCAG accessibility contrast by applying contrast verification guidance during palette selection. The workflow evaluates perceptually-even OKLCH ramps against WCAG and APCA standards to prevent inaccessible color combinations.

Can I use container queries and bento grids in a modern layout system?▼

Yes, you can use container queries and bento grids in a modern layout system. The skill defines fluid spacing, subgrid alignment, and container-query responsiveness rules to instantiate robust, adaptive UI layouts.

What is the best way to plan fluid typography scales with font pairings?▼

The best way to plan fluid typography scales is to select a type pairing from a vetted menu and apply fluid clamp-based sizing. This method ensures CLS-safe readability and stable visual hierarchy across screen sizes.

How do I avoid color soup failures when translating brand intent into tokens?▼

You avoid color soup failures by following a deliberate select, justify, and instantiate workflow. This palette-selection-procedure maps brand archetypes into coherent art-direction recipes before writing any design tokens.

Related Skills

Explore More Design & Creative Skills→
pckienuitpckienuit

game-art

Define game art direction including visual style, asset pipeline, animation principles, and organization standards for 2D/3D projects.

Community
Intermediate
Devsoul2026Devsoul2026
150

design-md

Lint, diff, and export DESIGN.md token specs to Tailwind or DTCG JSON.

Community
Intermediate
fusenginefusengine
22

responsive-system

Implement mobile-first responsive layouts with Tailwind CSS breakpoints and container queries.

Community
Intermediate
KyaniteLabsKyaniteLabs
3

color-system

Generate OKLCH color ramps and semantic token systems with WCAG 2.x contrast verification.

Official
Advanced