skills.rest
akillness
akillnessCOMMUNITY
Explore all skills by this author →
Website𝕏@akillness0308GitHub

design-system

Generates design system tokens, layout rules, motion guidance, and accessibility checks.

40|9|Updated Jan 4, 2026
Search Tags:#typography#accessibility#layout#ui-design#design-system#motion#design-tokens
One-click install
npx skills add https://github.com/akillness/oh-my-skills --skill design-system-akillness
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/akillness/oh-my-skills/tree/main/.agent-skills/design-system
Command: npx skills add https://github.com/akillness/oh-my-skills --skill design-system-akillness

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Production-grade UI design requires a shared design language to ensure consistency across products and teams, reducing design debt and accelerating development.

Core Features & Use Cases

  • Tokens-driven design system: colors, typography, spacing, motion, and accessibility tokens to ensure a unified UI language.
  • Layout, motion, and accessibility guidelines: predefined grids, components, and motion rules for scalable interfaces with inclusive design.
  • Use cases: creating dashboards, apps, and marketing sites that require consistent visual language and accessible interactions.

Quick Start

Define your tokens and layout goals, then prompt the skill to generate a production-grade UI design system starter.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I create a design system with UI tokens for consistent web app interfaces?▼

Generate a design system by defining color, typography, spacing, and motion tokens alongside layout goals to produce unified UI rules, component specs, and WCAG-aligned accessibility checks for consistent interfaces.

What is the best way to standardize UI typography and spacing tokens across frontend teams?▼

Standardize UI typography and spacing by generating a centralized tokens-driven design system that outputs predefined layout grids and component specs, ensuring a unified visual language across frontend teams.

How do I generate layout grids and component specs for marketing sites and dashboards?▼

Generate layout grids and component specs for marketing sites and dashboards by providing design goals and tokens to produce predefined grids, motion rules, and accessible interaction guidelines.

Does this design system generator include WCAG-aligned accessibility checks for UI components?▼

Yes, the design system generator includes WCAG-aligned accessibility checks, producing accessibility tokens and inclusive design guidance to ensure scalable interfaces meet compliance requirements.

Can I use this to generate motion guidance and rules for scalable interfaces?▼

Yes, you can generate motion guidance by defining your design goals, which produces predefined motion rules and motion tokens to ensure consistent animations across scalable interfaces.

Do I need predefined tokens before generating a production-grade UI design system?▼

You need to define your tokens and layout goals before generating a production-grade UI design system, as the skill uses these inputs to produce component specs, motion rules, and accessibility checks.

Related Skills

Explore More Design & Creative Skills→
forbotsakeforbotsake
5

design-consultation

Propose a complete design system and generate DESIGN.md with typography, color, layout, spacing, and motion tokens.

Official
Advanced
jokken79jokken79
1

frontend-design

Design frontend interfaces with typography, color, layout, motion, and accessibility.

Community
Advanced
dirnbauerdirnbauer
33

frontend-design

Design frontend interfaces with typography, color palettes, motion, and CSS/HTML examples.

Community
Basic
dinoudondinoudon

accessibility-audit

Audit web applications for WCAG 2.2 compliance across seven accessibility categories.

Community
Advanced