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.