skills.rest
nikglavin
nikglavinCOMMUNITY
Explore all skills by this author →
GitHub

lyra-design-system

Define a cohesive design system with tokens, typography, color, and spacing.

1|Updated Mar 24, 2026
Search Tags:#typography#documentation#design-system#spacing#color-tokens#design-guidelines#visual-identity
One-click install
npx skills add https://github.com/nikglavin/lyra --skill lyra-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lyra-design-system
Source: https://github.com/nikglavin/lyra/tree/main/skills/lyra-design-system
Command: npx skills add https://github.com/nikglavin/lyra --skill lyra-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Establishes a cohesive design language for UI projects by architecting tokens, typography, color, spacing, and component guidance, so teams can ship consistent experiences.

Core Features & Use Cases

  • Establish visual identity, token architecture, and governance before coding, ensuring a single source of truth across products.
  • Analyze existing projects for design-system gaps, propose a complete system, and generate implementable artifacts (DESIGN.md, CLAUDE.md).
  • Provide a multi-phase workflow (pre-checks, reference reviews, and proposal) to guide design-system creation and evolution.

Quick Start

Validate the current UI project against a design-system brief and generate a complete design-system proposal.

Frequently Asked Questions about lyra-design-system

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

FAQPage Schema
How do I create a cohesive design system for a UI project?▼

To create a cohesive design system, you establish a single source of truth by architecting typography, color tokens, spacing scales, and component behavior, generating implementable guidelines like DESIGN.md and CLAUDE.md.

What is design token architecture and when do I need it for my visual identity?▼

Design token architecture is the structured definition of visual identity variables like color and spacing. You need it when seeking consistent UI experiences across web and marketing surfaces before coding begins.

Can I analyze an existing project for design-system gaps and generate guidelines?▼

Yes, you can analyze existing UI projects to identify design-system gaps. The tool proposes a complete system and generates producible guidelines and governance documents like DESIGN.md and CLAUDE.md.

What's the best way to standardize typography and spacing scales across web surfaces?▼

The best way to standardize typography and spacing scales is through a multi-phase workflow that includes pre-checks, reference reviews, and a structured proposal to govern component behavior across all surfaces.

Does this design-system approach include accessibility considerations and component behavior?▼

Yes, this design-system approach satisfies requirements for documented aesthetics by including accessibility considerations and standardized component behavior alongside typography and color tokens.

How do I set up design governance and a documented aesthetic before coding my product?▼

You set up design governance by defining a documented aesthetic through a multi-phase workflow that establishes token architecture, ensuring a single source of truth before development starts.

Related Skills

Explore More Design & Creative Skills→
ketanswebsiteketanswebsite

ui-ux-design-advisor

Analyze project structure and design system to propose UI/UX design options.

Community
Advanced
zzoohubzzoohub

design-system

Standardize design tokens and component architecture across web and React Native.

Community
Advanced
VidyaBodepudiVidyaBodepudi
2

frontend-ui-engineering

Review web components for accessibility, responsiveness, and performance.

Community
Advanced
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced