design-system

Name: design-system
Availability: InStock
Author: Firzus

Create a validated design system from a project brief and record decisions in DESIGN.md and PAGES.md.

1|Updated May 12, 2026

Search Tags:#design system #navigation #design tokens #theme #ui consistency #page scope

Ready to run

npx skills add https://github.com/Firzus/agent-skills --skill design-system-firzus

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/Firzus/agent-skills/tree/main/skills/web/design-system
Command: npx skills add https://github.com/Firzus/agent-skills --skill design-system-firzus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams turn an early design brief into a coherent, reusable design system so later UI work stays consistent, validated, and easy to extend.

Core Features & Use Cases

Design read and direction-setting: Interprets project type, audience, vibe, and constraints into a clear visual direction.
Token and theme definition: Establishes color, typography, spacing, sizing, radius, elevation, and motion decisions in a theme source.
Page scoping and structure: Lays out the page set and navigation so downstream design and implementation can follow a shared plan.
Validation-ready workflow: Records the system in DESIGN.md and prepares a PAGES.md skeleton for later review and build phases.

Quick Start

Use the design-system skill to create a design direction, token set, and page scope for my project and record the result in DESIGN.md.

Frequently Asked Questions about design-system

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

FAQPage Schema

How do I turn a project brief into a validated design system?▼

To turn a project brief into a validated design system, you need to interpret the project type, audience, and constraints to establish a clear visual direction, define design tokens, and scope pages. This ensures future UI work stays consistent.

What is the best way to define design tokens and theme decisions for a SaaS app?▼

Defining design tokens and theme decisions for a SaaS app involves establishing color, typography, spacing, sizing, radius, elevation, and motion choices in a centralized theme source to maintain UI consistency across all surfaces.

How do I scope pages and plan navigation for a marketing site or e-commerce flow?▼

Scoping pages and planning navigation for marketing sites or e-commerce flows requires laying out the complete page set and navigation structure into a shared plan, ensuring downstream design and implementation follow a unified structure.

Do I need structured documentation to maintain design system consistency across web surfaces?▼

You need structured documentation to maintain design system consistency across web surfaces. Recording validated design intent, theme decisions, and page scopes in files like DESIGN.md and PAGES.md ensures future UI work remains aligned and easy to extend.

Can I create a reusable design system for multiple project types like SaaS and e-commerce?▼

You can create a reusable design system for multiple project types including SaaS apps, marketing sites, and e-commerce flows. The process captures shared design tokens, page scoping, and navigation planning to keep all surfaces consistent.

Why does my UI lose visual consistency when extending to new pages?▼

Your UI loses visual consistency when extending to new pages due to a lack of documented design tokens and theme decisions. Establishing a validated design system with recorded page scopes prevents divergence during future implementation phases.