design-system

Generate a unified design system document with color, typography, and component rules.

1|Updated Feb 20, 2026
One-click install
npx skills add https://github.com/october-academy/agnt --skill design-system-october-academy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/october-academy/agnt/tree/main/skills/design-system
Command: npx skills add https://github.com/october-academy/agnt --skill design-system-october-academy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts informal visual choices and scattered notes into a single, actionable Design System document so landing pages, product UI, OG/meta ads and marketing assets read as one cohesive product.

Core Features & Use Cases

  • Structured document output: Generates docs/design-system.md with Brand Summary, Design Principles, Color System, Typography, Components, Layout & Motion, Asset Rules and Anti-Patterns.
  • Guided decision workflow: Asks targeted questions to capture product impression, visual style, accent tones, typography, component rules and forbidden tones, then consolidates answers into curated rules rather than raw transcripts.
  • Project integration & tracking: Reads AGNT_DIR state.json, ensures schema and project preconditions, updates artifacts.design_system_defined and artifacts.design_system_versions, writes or replaces journey-brief.md, and queues or submits practice events for MCP.
  • Use case: Run before a launch or creative campaign to lock visual tone and provide designers, marketers and engineers with a single source of truth for assets and UI.

Quick Start

Create a design system for my project that sets a bold, trustworthy tone, defines color/typography/component rules, and writes the result to docs/design-system.md.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I create a reusable design system for landing pages and ad assets?

To create a reusable design system, consolidate informal visual choices into a single document defining color, typography, components, and asset rules for landing pages, product UI, and ads. This ensures all marketing assets read as one cohesive product.

What is a design system document and what should it include for a product launch?

A design system document is a single source of truth for visual tone that includes a brand summary, design principles, color system, typography, components, layout, motion, asset rules, and anti-patterns. It guides designers and engineers during launches or rebrands.

How do I generate a style guide that aligns my product UI with marketing assets?

Generate a style guide by answering targeted questions about visual style, accent tones, typography, and component rules. The process consolidates your answers into curated rules rather than raw transcripts, producing a unified style guide document.

Can I define brand guidelines and forbidden color tones for my creative campaign?

Yes, you can define brand guidelines and forbidden color tones for creative campaigns. The guided workflow asks targeted questions to capture product impressions, accent tones, and explicitly forbidden tones, consolidating them into actionable asset rules.

When should I build a design system before a product rebrand?

You should build a design system before a product launch or creative campaign to lock the visual tone. Doing so provides designers, marketers, and engineers with a single source of truth for all UI and marketing assets before production begins.

What's the best way to maintain consistency between product UI and ad creative assets?

The best way to maintain consistency is to apply a unified design system document that specifies shared color systems, typography, and component rules. This structured approach ensures landing pages, product UI, and OG/meta ads read cohesively.