design

Generate design tokens and DESIGN.md for detected UI frameworks.

Updated Aug 23, 2026

Search Tags:#design #accessibility #audit #tokens #design-system #ui-patterns

Ready to run

npx skills add https://github.com/oobagi/jflow --skill design-oobagi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design
Source: https://github.com/oobagi/jflow/tree/main/skills/design
Command: npx skills add https://github.com/oobagi/jflow --skill design-oobagi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to create consistent, accessible design systems and maintain UI token governance across projects.

Core Features & Use Cases

Create mode generates a new design system with colors, typography, components, and layout patterns.
Audit mode reviews an existing design for consistency, accessibility, and token governance.
Supports context-aware generation and auditing for CLI/GUI projects.

Quick Start

Run the design skill in create mode to scaffold a new system, or in audit mode to evaluate an existing one.

Frequently Asked Questions about design

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

FAQPage Schema

How do I generate design tokens for an existing codebase?▼

To generate design tokens for an existing codebase, run the design skill in audit mode to detect framework patterns like Tailwind, CSS, or SwiftUI and produce framework-specific tokens. It outputs a component inventory and a DESIGN.md file documenting your system.

Can I scaffold a new design system with accessibility tokens from scratch?▼

Yes, you can scaffold a new design system with accessibility tokens from scratch by running the design skill in create mode. It generates colors, typography, components, and layout patterns while ensuring consistency and accessibility compliance.

Does the design audit work with React Native and Godot projects?▼

The design audit does work with React Native and Godot projects. It detects your project's UI framework patterns to generate context-aware tokens, document patterns, and review accessibility and token governance.

What is the best way to audit UI pattern consistency across projects?▼

The best way to audit UI pattern consistency across projects is to use the design skill's audit mode. It evaluates your existing codebase for token governance and accessibility, producing a DESIGN.md file alongside a component inventory.

How does detecting framework patterns improve design system governance?▼

Detecting framework patterns improves design system governance by automatically tailoring generated tokens to your specific stack. It ensures that color and typography tokens apply correctly to frameworks like Tailwind, CSS, SwiftUI, React Native, and Godot.

Do I need to manually identify my UI framework to generate a DESIGN.md file?▼

You do not need to manually identify your UI framework to generate a DESIGN.md file. The design skill automatically detects framework patterns within your project to produce the correct tokens and document your layout patterns.