Generate design tokens and DESIGN.md for detected UI frameworks.
npx skills add https://github.com/oobagi/jflow --skill design-oobagi
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
Design teams often struggle to create consistent, accessible design systems and maintain UI token governance across projects.
Run the design skill in create mode to scaffold a new system, or in audit mode to evaluate an existing one.
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
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.
AutumnsGroveUpdate UI component inventory and documentation from codebase files.
Intense-VisionsGenerate token-bound web components for React, Vue, or Svelte projects.
tan-yong-shengAnalyze screenshots for visual regressions, design system compliance, and accessibility.
range-etAudit and remediate UI deviations to match design system tokens and patterns.
