design

Generate design-system documentation and design tokens with accessibility checks.

46|2|Updated Mar 23, 2025
One-click install
npx skills add https://github.com/gracefullight/krds --skill design-gracefullight
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/gracefullight/krds/tree/main/.claude/skills/design
Command: npx skills add https://github.com/gracefullight/krds --skill design-gracefullight

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you create and maintain design-system assets (like DESIGN docs and design tokens) with consistency, anti-pattern prevention, and accessibility-minded validation.

Core Features & Use Cases

  • Design workflow guidance: Step-by-step instructions for producing the KRDS-style design system documentation and token outputs.
  • Anti-pattern enforcement: Applies constraints to reduce inconsistent patterns and common design-system pitfalls.
  • Accessibility checks: Encourages accessible, contrast-friendly decisions during token and system creation.
  • Use case: When you’re building a new government-inspired UI, you can generate a token set and supporting design documentation that keeps typography, spacing, and component behavior consistent across the product.

Quick Start

Use the design skill to follow the steps in .agents/workflows/design.md and generate the design system documentation and design tokens with accessibility and anti-pattern checks.

Frequently Asked Questions about design

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

FAQPage Schema
How do I generate design tokens with accessibility and anti-pattern checks?

To generate design tokens with accessibility and anti-pattern checks, use a guided workflow that enforces contrast-friendly decisions and prevents common design-system pitfalls during token creation and documentation.

What is a KRDS-inspired design system and when do I need it?

A KRDS-inspired design system provides standardized documentation and tokens for government or public service UIs. You need it when building digital services that require strict consistency across typography, spacing, and component behavior.

How do I create design system documentation that prevents inconsistent UI patterns?

Create design-system documentation that prevents inconsistent patterns by applying automated anti-pattern enforcement constraints during the generation of component behaviors, spacing rules, and typography standards.

Can I use this design system workflow for existing web applications?

Yes, you can use this design system workflow for existing web applications to update token sets and supporting documentation while validating accessibility requirements and ensuring design-system consistency.

What are the limitations of enforcing anti-patterns in design tokens?

Limitations of enforcing anti-patterns in design tokens include being constrained to predefined checks for accessibility and consistency, which may require manual overrides for highly custom UI components outside standard KRDS-inspired patterns.

Does the design system workflow require specific dependencies or environments?

The design system workflow requires no external dependencies but relies on executing steps defined in a local workflow file to produce design tokens and documentation outputs with built-in validation.