design-system-authoring

Define product design system contracts for semantic tokens, typography, spacing, motion, and accessibility.

1|Updated May 26, 2026

Search Tags:#accessibility #design system #design tokens #ux #visual language #component behavior

Ready to run

npx skills add https://github.com/virajp/ai-plugins --skill design-system-authoring

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system-authoring
Source: https://github.com/virajp/ai-plugins/tree/main/plugins/vwf/skills/design-system-authoring
Command: npx skills add https://github.com/virajp/ai-plugins --skill design-system-authoring

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams define a consistent product-wide UX and visual contract so screens do not repeatedly reinvent colors, typography, spacing, motion, accessibility, and component behaviors.

Core Features & Use Cases

Design System Foundations: Establish semantic tokens, typography scales, spacing rules, motion principles, and accessibility standards independent of implementation frameworks.
Component Behavior Guidance: Define reusable interaction patterns, states, and anti-patterns for buttons, forms, overlays, feedback, and navigation.
Use Case: When building a product blueprint, use this Skill to author a design-system document that keeps every screen aligned with shared UX decisions.

Quick Start

Ask the AI to create or update the product design system document with semantic tokens, accessibility requirements, and component behavior rules.

Frequently Asked Questions about design-system-authoring

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

FAQPage Schema

How do I create a design system with semantic tokens and accessibility standards?▼

Defining reusable interaction patterns in a design system involves specifying component states, behaviors, and anti-patterns for elements like buttons, forms, and overlays to enforce consistent UX decisions across all product screens.

What is the best way to document UX standards separate from implementation frameworks?▼

The best way to document framework-independent UX standards is to author a product design system contract that separates visual language decisions from implementation details, ensuring shared design decisions apply across all product screens.

Can I use this design system authoring approach to define component behavior rules for forms and overlays?▼

Yes, design system authoring applies to defining reusable interaction patterns, states, and anti-patterns for buttons, forms, overlays, feedback, and navigation to maintain consistent component behavior guidelines.

Does a design system contract require structured decisions for motion and spacing rules?▼

Yes, a design system contract requires structured design decisions to establish semantic tokens, typography scales, spacing rules, motion principles, and accessibility standards so teams avoid reinventing visual language for each screen.

When do I need to author a product blueprint with a formal design system document?▼

You need to author a product blueprint with a formal design system document when building or maintaining a product-wide UX standard to keep every screen aligned with shared visual language, accessibility, and component behavior decisions.