design-system

Creates a DESIGN.md brand identity file through a guided interview and syncs values to agentconfig.json.

1|Updated May 13, 2026
One-click install
npx skills add https://github.com/coolrobertj/Agency-Cowork --skill design-system-coolrobertj
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/coolrobertj/Agency-Cowork/tree/main/skills/design-system/skills/design-system
Command: npx skills add https://github.com/coolrobertj/Agency-Cowork --skill design-system-coolrobertj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Visual outputs like slide decks, webpages, and documents often lack consistent branding because colors, fonts, and component styles are decided ad hoc. This Skill establishes a single source of truth for brand identity that all visual output skills read automatically. ## Core Features & Use Cases - Guided Brand Interview: Walks through five phases covering brand identity, color palette, typography, and component preferences with curated options for each. - DESIGN.md Generation: Produces a complete brand design system file covering palette roles, font pairings, component styling, and layout principles. - Config Synchronization: Syncs key colors, fonts, and company name to agentconfig.json so Office skills (PowerPoint, Word, Excel) stay consistent. - Use Case: A user says "set up my brand", picks the Navy Compass palette and Segoe UI + Georgia fonts, and receives an approved DESIGN.md that every future presentation and webpage automatically follows. ## Quick Start Ask your agent to set up my brand and create a DESIGN.md for my project.

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 brand design system for my project?

Ask the agent to set up your brand or create DESIGN.md. The skill runs a five-phase interview covering brand identity, color palette, typography, and component preferences, then writes an approved DESIGN.md to your project root.

How do I update my brand colors or fonts later?

Say "update my brand colors" or "change my fonts" and the skill reads your existing DESIGN.md, skips directly to the relevant phase, regenerates the affected sections, and re-syncs values to agentconfig.json.

What files does the design system skill create?

It creates DESIGN.md at the project root containing palette, typography, components, and layout rules. It also updates office.branding fields in agentconfig.json so Python-based Office skills like PowerPoint and Word use the same values.

Does the skill support both Office and web fonts?

Yes. Phase 3 asks whether outputs target Office documents or web. Office contexts get pairings like Segoe UI + Georgia or Aptos, while web contexts get Google Fonts pairings like Plus Jakarta Sans + Cormorant Garamond.

Can I provide my own custom brand colors?

Yes. During the palette phase you can provide your own hex values or partially override a curated palette. The skill generates semantic color names for custom values using its brand vocabulary reference.