design-system-agent

design-system-agent is a skill for Claude Code, Codex from Andytoizer/gtm-brain-builder. It costs 45 tokens per session (754 once invoked), scanned A, original, MIT.

A workflow for creating a design system: the shared visual rules, brand materials, and interface components used across a product or company. It prepares a source-backed brief and guides work in design tools such as Claude.ai/design or Codex.

In plain words
What is it for?
Use it to plan a brand kit, design system, presentation style, landing-page direction, social templates, component library, or coded interface. It can update related brand documents and add implementation notes for code, CSS, slides, or website assets.
Why use it?
It organizes scattered company information and visual references into a reviewable design brief. It also helps keep design decisions aligned with approved claims, brand voice, and the operator's feedback.

Skill for Claude CodeCodex

Written for Claude Code and Codex: shipped in a Claude Code plugin, but also agents/openai.yaml present. Also seen: mentions Codex.

Part of the gtm-brain-builder plugin — 11 skills, 9 agents shipped together

Good fit Use it to plan a brand kit, design system, presentation style, landing-page direction, social templates, component library, or coded interface. It can update related brand documents and add implementation notes for code, CSS, slides, or website assets.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/andytoizer/gtm-brain-builder/design-system-agent
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add Andytoizer/gtm-brain-builder --skill design-system-agent
Clone the repo
git clone --depth 1 https://github.com/Andytoizer/gtm-brain-builder

Made for: Claude Code, Codex.

Or install gtm-brain-builder, the plugin that ships this one along with the rest of its 11 skills, 9 agents.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for design-system-agent

README.md
[![agentmods](https://agentmods.dev/badge/skills/andytoizer/gtm-brain-builder/design-system-agent.svg)](https://agentmods.dev/skills/andytoizer/gtm-brain-builder/design-system-agent)
Your own site
<a href="https://agentmods.dev/skills/andytoizer/gtm-brain-builder/design-system-agent"><img src="https://agentmods.dev/badge/skills/andytoizer/gtm-brain-builder/design-system-agent.svg" alt="Measured on agentmods" height="20"></a>
Per session 45 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 754 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00045 $0.00754
Opus 5 $0.00023 $0.00377
Sonnet 5 $0.00009 $0.00151
Haiku 4.5 $0.00005 $0.00075

Measured 8d ago against content hash ed1958130c44, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-07, from the pricing page.

Security

Grade A, and why

design-system-agent scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/design-system-agent/SKILL.md · 83 lines

How it starts

The opening of the file, as written. The whole thing — 83 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Design System Agent

Use this when the operator wants help creating a design system, preparing the right prompt/brief for a design tool, or importing design outputs into the GTM Brain.

Owns brand/design-system-brief.md, the visual-system parts of brand/brandkit.md, and design project notes in brand/design-resources.md.

Inputs

  • company/product-truth.md
  • company/approved-claims.md
  • icp/
  • messaging/
  • customers/proof-approval.md
  • brand/brandkit.md
  • brand/design-resources.md
  • brand/voice-system.md
  • Existing website, app screenshots, logo files, decks, Figma, Canva, social posts, and public docs
  • Operator/accountable-owner taste review

Outputs

  • brand/design-system-brief.md
  • Updated brand/brandkit.md
  • Updated brand/design-resources.md
  • Optional implementation notes for Codex when the design system needs to become code, components, CSS tokens, slides, or website assets

Walkthrough

  1. Read the smallest source-backed context needed for the design decision.
  2. Ask the operator what they are trying to make: brand kit, design system, deck style, landing page direction, social templates, component library, or coded UI.
  3. Build a design-system brief before generation:
    • audience and category
    • desired perception
    • brand personality and tone boundaries
    • product truths and approved claims
    • proof constraints and do-not-claim rules
    • visual references and anti-references
    • required outputs
    • review checklist
  4. If using Claude.ai/design, tell the operator to open https://claude.ai/design, create a brand-kit or design-system project, paste the brief, and upload only approved assets.
  5. If using Codex to implement or import the design system, convert the approved design brief into implementation instructions: tokens, typography, component rules, asset paths, responsive behavior, accessibility notes, and files to update.
  6. Review generated output with Grill-me before treating it as durable taste.
  7. Import approved decisions:
    • brand/brandkit.md: stable visual rules, tokens, typography, logo usage, layout rules, examples, and do/don't guidance
    • brand/design-resources.md: project links, prompts, uploaded inputs, exports, asset locations, and owner review state
    • brand/voice-system.md: only the voice implications, not visual rules
    • implementation notes: where Codex should apply tokens/components when building downstream assets

Read the full file on GitHub · 83 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 8d ago First seen · 83 lines · 45 tokens per session scan A ed1958130c44

Subscribe to this mod's changes

design-system-agent is a skill published in the GitHub repository Andytoizer/gtm-brain-builder (8 stars, last pushed 4mo ago), licensed MIT. It adds 45 tokens to every session and 754 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

openkb-html-critic

Use to review a generated HTML deck or single-page artifact for visual quality and structural correctness. Especially good at catching CSS specificity bugs where slide-modifier classes (.divider, .center, .q, .flow etc.) accidentally override the base .slide{display:none} and cause one slide to stack on top of every…

VectifyAI/OpenKB · 132 tokens

eval-graphics

Turn an eval study's numbers into on-brand, publish-ready figures using the Newsjack chart room (the eval design system), then validate them with Playwright. For producing the charts in a published eval/data study.

elvisun/newsjack · 47 tokens

design-system-gtm

Define brand-context for AI agents — visual identity systems, voice/tone guides, color palettes with hex/RGB/HSL, typography systems with font stacks and type scales, logo usage rules, asset templates, and brand guardrails. Use when creating a design system for AI-generated GTM content, ensuring brand consistency…

LeadMagic/gtm-skills · 90 tokens

ui-ux-gtm

Design GTM UI/UX patterns — landing pages (hero, proof, CTA), forms (progressive disclosure, inline validation), signup flows (activation, time-to-value), dashboards (KPI hierarchy, trend indicators), and accessibility (WCAG 2.2 AA). Use when designing or auditing GTM tool interfaces, landing pages, conversion flows…

LeadMagic/gtm-skills · 96 tokens

graphic-design-gtm

Create GTM visual assets — social graphics, ad creatives, pitch deck design, one-pager layouts, email images, data visualization, and brand-consistent templates. Use when creating visual content for GTM, designing social media graphics, building ad creatives, or establishing visual identity for campaigns. Triggers on…

LeadMagic/gtm-skills · 115 tokens

brand-kit

Build a complete brand kit for B2B SaaS — logo design and usage, color palette, typography, voice and tone, visual identity, brand guidelines, and asset templates. Use when creating a brand from scratch, rebranding, or building consistent visual identity. Triggers on: "brand kit", "brand identity", "logo design"…

LeadMagic/gtm-skills · 98 tokens