design-master

Create a design system blueprint with tokens, components, and accessibility rules.

30|2|Updated Apr 28, 2026
One-click install
npx skills add https://github.com/hawkyre/hawk-skills --skill design-master-hawkyre
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-master
Source: https://github.com/hawkyre/hawk-skills/tree/main/skills/design-master
Command: npx skills add https://github.com/hawkyre/hawk-skills --skill design-master-hawkyre

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps design teams build and maintain a world-class design system with a cohesive visual language, scalable token governance, and clear guidance for consistent product interfaces.

Core Features & Use Cases

  • A structured design spine covering color, typography, spacing, tokens, and a one-signature element to define identity.
  • Design tokens as the source of truth enabling theming, accessibility considerations, and cross-platform consistency.
  • Comprehensive component design rules including interactive states, accessibility, and layout guidance for products, marketing sites, and internal tooling.
  • Real-world use case: creating a scalable system for a suite of apps with unified typography, spacing, and component behavior across web and mobile.

Quick Start

Provide a design brief with goals, audience, and constraints to kick off a master-class design system blueprint.

Frequently Asked Questions about design-master

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

FAQPage Schema
What is a design token and how does it govern a design system?▼

Design tokens are the source of truth for a design system, storing visual attributes as data to enable theming, ensure accessibility, and maintain cross-platform consistency across products.

How do I create a scalable design system for web and mobile apps?▼

To create a scalable design system, provide a design brief with goals, audience, and constraints to generate a structured blueprint covering typography, spacing, tokens, and cross-platform component rules.

Can I use this to define component states and accessibility constraints?▼

Yes, this defines comprehensive component design rules including interactive states, accessibility constraints, and layout guidance to ensure consistent component behavior across products and marketing sites.

What's the best way to establish a cohesive brand language across multiple products?▼

Establish a cohesive brand language by defining a structured design spine covering color, typography, spacing, and tokens, alongside a one-signature element to define a unified product identity.

Does this design system approach work for internal tooling and marketing sites?▼

Yes, the generated design system blueprint provides component design rules and layout guidance specifically built to scale across internal tooling, marketing sites, and core product interfaces.

Why do I need design tokens for cross-team adoption?▼

Design tokens provide a shared source of truth for visual attributes, enabling cross-team adoption by ensuring consistent theming, accessibility, and unified design rules across different platforms.