design-system

Create and maintain product-wide UX and visual design system blueprints.

1|Updated May 26, 2026

Search Tags:#accessibility #design system #design tokens #ux #product blueprint #visual contract

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams create a unified product-wide UX and visual contract by capturing design decisions before implementation, preventing inconsistent interfaces and unclear design direction.

Core Features & Use Cases

Design Foundation Authoring: Defines semantic tokens, typography, spacing, motion principles, accessibility standards, and component behaviors as code-independent product rules.
Design System Maintenance: Creates or updates the design system blueprint while preserving alignment with product architecture and existing flows.
Use Case: A product team launching a new application can use this Skill to establish reusable UX rules that every future screen blueprint references.

Quick Start

Use the design-system skill to create or update the product design system blueprint based on the current architecture and product decisions.

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 for consistent product UX across my application?▼

Create a design system by documenting semantic tokens, typography, spacing, motion principles, and accessibility standards as code-independent product rules to establish a unified visual contract. This prevents inconsistent interfaces and unclear design direction across your application.

What is a product UX blueprint and when do I need one?▼

A product UX blueprint captures design decisions before implementation to ensure consistent interfaces. You need one when launching a new application or establishing reusable UX rules that every future screen blueprint references across your product architecture.

How do I maintain a design system blueprint while preserving existing product architecture?▼

Maintain your design system blueprint by updating semantic tokens and accessibility requirements while preserving alignment with your current product architecture and existing flows. This ensures cross-product design conventions remain consistent without disrupting established application behavior.

Can I define accessibility requirements and component behaviors as part of my design tokens?▼

Yes, you can define accessibility requirements and component behaviors as code-independent product rules within your design tokens. This includes documenting semantic tokens, typography, spacing, and motion principles to establish a comprehensive visual contract.

What's the best way to document cross-product design conventions for multiple application flows?▼

Document cross-product design conventions by authoring a design foundation that defines semantic tokens, typography, spacing, and motion principles as structured product rules. This creates a unified visual contract that ensures consistent interface standards across all product flows.