skills.rest
JEO-tech-ai
JEO-tech-aiCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Generate UI design systems with tokens, layout rules, motion guidance, and accessibility checks.

8|Updated Mar 9, 2026
Search Tags:#typography#accessibility#layout#tokens#ui-design#design-system#motion
One-click install
npx skills add https://github.com/JEO-tech-ai/oh-my-unity3d --skill design-system-jeo-tech-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/JEO-tech-ai/oh-my-unity3d/tree/main/.unity-skills/design-system
Command: npx skills add https://github.com/JEO-tech-ai/oh-my-unity3d --skill design-system-jeo-tech-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Production teams often struggle with inconsistent UI across platforms. This skill provides a structured design system with tokens, layout rules, motion guidance, and accessibility checks to enforce consistency and speed up UI development.

Core Features & Use Cases

  • Design Tokens: defines colors, typography, spacing, radii, and shadows to ensure a unified visual language.
  • Layout & UX Guidelines: provides responsive rules and component composition for scalable interfaces.
  • Accessibility & Handoff: includes accessibility checks and practical handoff artifacts for engineering teams.
  • Use Case: A design team delivers a new dashboard by reusing tokens and layout specs to maintain consistency across views.

Quick Start

Provide a design brief and I will generate tokens, layout plans, and a ready-to-implement UI design system.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I generate a UI design system from a prompt?▼

To generate a UI design system from a prompt, provide your design brief to receive structured tokens, layout plans, responsive rules, and motion guidance ready for implementation.

What design tokens are needed for a production-grade UI?▼

Production-grade UI design tokens define colors, typography, spacing, radii, and shadows to establish a unified visual language across web and mobile platforms.

How do I ensure UI accessibility and smooth design handoff?▼

Ensure UI accessibility and design handoff by applying automated accessibility checks and generating practical handoff artifacts for engineering teams to enforce consistency.

Can I use this layout and motion guidance for responsive web projects?▼

Yes, you can apply this layout and motion guidance to responsive web projects to provide scalable component composition and consistent interface rules.

What is the best way to maintain visual consistency across mobile and web apps?▼

The best way to maintain visual consistency across mobile and web apps is by reusing predefined design tokens and layout specifications across all views and platforms.

Related Skills

Explore More Design & Creative Skills→
ovachieverovachiever
52

ui-design-system

Generate design tokens from brand colors in JSON, CSS, or SCSS.

Community
Advanced
toddmoytoddmoy
1

modernist

Generate Swiss Design and Bauhaus UI layouts with CSS/TSX design tokens.

Community
Advanced
PeterHddPeterHdd
27

cleanui

Improve AI-generated user interfaces with design best practices and layout intelligence.

Community
Advanced
baasith6baasith6

using-ui-stack

Enforce design system rules for UI component generation.

Community
Intermediate