skills.rest
windysky
windyskyCOMMUNITY
Explore all skills by this author →
GitHub

agency-design-system

Generate a design-spec.md with color tokens, typography scales, spacing, and layout specs.

Updated Apr 19, 2026
Search Tags:#typography#layout#color#ui-components#design-tokens#visual-identity#brand-consistency
One-click install
npx skills add https://github.com/windysky/snake-game --skill agency-design-system-windysky
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agency-design-system
Source: https://github.com/windysky/snake-game/tree/main/.claude/skills/agency-design-system
Command: npx skills add https://github.com/windysky/snake-game --skill agency-design-system-windysky

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual design decisions for AI Agency projects can be inconsistent across brands and touchpoints; this Skill provides a centralized system to enforce brand-aligned visuals.

Core Features & Use Cases

  • Color tokens, typography scale, spacing system, component specifications, and layout grid that ensure consistent design across products and campaigns.
  • Supports client collaboration by providing a reusable design language that reduces rework and visual drift.
  • Use Case: When starting a new AI Agency project, generate a cohesive design spec (colors, typography, spacing) that can be embedded into design files and UI components.

Quick Start

Provide the brand context and design goals to generate a design-spec.md with tokens, typography, and layout guidelines.

Frequently Asked Questions about agency-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 multiple client projects?▼

To create a cohesive design system, provide brand context and design goals to generate a design-spec.md containing color tokens, typography scales, spacing rules, and layout guidelines for consistent visual identity across projects.

What is included in a design-spec.md for visual identity?▼

A design-spec.md for visual identity includes color tokens, typography scales, spacing systems, component specifications, and layout grids to enforce brand consistency across products and campaigns.

How do I maintain brand consistency across UI components and layouts?▼

You maintain brand consistency by applying centralized design tokens and reusable component guidelines that define static visual rules, reducing visual drift and rework during client collaboration.

Can I use this design system approach for internal tooling and product launches?▼

Yes, this design system governs visual decisions for internal tooling, product launches, and client work by specifying component guidelines and layout specs that align with your brand's visual identity.

Does this design system approach support dynamic evolution of design tokens?▼

Yes, the approach specifies static design-system rules alongside a dynamic evolution zone, allowing your typography scale and color tokens to adapt while maintaining overall brand consistency.

What is the best way to reduce visual drift in agency design projects?▼

The best way to reduce visual drift is to embed a centralized design language with strict spacing and layout grids into your design files and UI components before starting client work.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
brainbrewlabsbrainbrewlabs
7

ui-design

Generate UI component specifications and WCAG 2.1 AA accessibility audits.

Official
Intermediate
gil-kapelgil-kapel
2

ui-design-system

Generates design tokens and documentation for scalable UI systems.

Community
Intermediate
coreymaypraycoreymaypray
1

brand-guardian

Enforce Maycrest Group branding across design, copy, and product surfaces.

Community
Advanced