New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Argentos Design Md

by ArgentAIOS in ArgentAIOS/argentos-core

Author, validate, diff, and export DESIGN.md files — Google's open-source format spec that gives coding agents a persistent, structured understanding of a design system (tokens + rationale in one…

MITAuto-check passedFrontend & Design

Install Argentos Design Md

skills CLI
$ npx skills add ArgentAIOS/argentos-core --skill argentos-design-md -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ArgentAIOS/argentos-core argentos-design-md --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ArgentAIOS/argentos-core.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/hermes/creative/design-md .claude/skills/argentos-design-md && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
argentos-design-md
GitHub stars
126
Token cost
~2k tokens
SKILL.md length
629 words
Files
2
Skills in repo
7
Repo updated
First seen
Licence
MIT

At a glance

Author, validate, diff, and export DESIGN.md files — Google's open-source format spec that gives coding agents a persistent, structured understanding of a design system (tokens + rationale in one…

  • Works in 8 steps: Overview (alias: Brand & Style) → Colors → Typography → …
  • Building a design system
  • SKILL.md covers When to use this skill, File anatomy, Token types and Canonical section order, plus 4 more sections
  • Calls npx

What it does

Argentos Design Md is an agent skill from ArgentAIOS/argentos-core. Author, validate, diff, and export DESIGN.md files — Google's open-source format spec that gives coding agents a persistent, structured understanding of a design system (tokens + rationale in one file). Use when building a design system, porting style rules between projects, generating UI with consistent brand, or auditing accessibility/contrast.

Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `templates/starter.md`).

It sits in Frontend & Design, covering Design tokens. The repository describes itself as: Your own AI operating system. Self-hosted. Self-improving. One continuous, truthful, self-directed mind. The licence is MIT.

When your agent uses it

  • Building a design system
  • Porting style rules between projects
  • Generating UI with consistent brand
  • Auditing accessibility/contrast

Example prompts

  • “/argentos-design-md”

Requirements

  • Node.js

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  1. Overview (alias: Brand & Style)
  2. Colors
  3. Typography
  4. Layout (alias: Layout & Spacing)
  5. Elevation & Depth (alias: Elevation)
  6. Shapes
  7. Components
  8. Do's and Don'ts

What it can do on your machine

Read from SKILL.md and the folder at commit acbf929. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Argentos Design Md loads about 2k tokens when it runs. Until then it costs about 92 tokens; SKILL.md has 629 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~92
When it runs · the whole SKILL.md, loaded when a task matches
~2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from ArgentAIOS/argentos-core at commit acbf929, republished under its MIT licence (© ArgentAIOS). 629 words, ~1,960 tokens.

Download SKILL.mdSave it as .claude/skills/argentos-design-md/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
argentos-design-md
description
Author, validate, diff, and export DESIGN.md files — Google's open-source format spec that gives coding agents a persistent, structured understanding of a design system (tokens + rationale in one file). Use when building a design system, porting style rules between projects, generating UI with consistent brand, or auditing accessibility/contrast.
version
1.0.0
author
ArgentOS
license
MIT

DESIGN.md Skill

DESIGN.md is Google's open spec (Apache-2.0, google-labs-code/design.md) for describing a visual identity to coding agents. One file combines:

  • YAML front matter — machine-readable design tokens (normative values)
  • Markdown body — human-readable rationale, organized into canonical sections

Tokens give exact values. Prose tells agents why those values exist and how to apply them. The CLI (npx @google/design.md) lints structure + WCAG contrast, diffs versions for regressions, and exports to Tailwind or W3C DTCG JSON.

When to use this skill

  • User asks for a DESIGN.md file, design tokens, or a design system spec
  • User wants consistent UI/brand across multiple projects or tools
  • User pastes an existing DESIGN.md and asks to lint, diff, export, or extend it
  • User asks to port a style guide into a format agents can consume
  • User wants contrast / WCAG accessibility validation on their color palette

For purely visual inspiration or layout examples, use popular-web-designs instead. This skill is for the formal spec file itself.

File anatomy

md
---
version: alpha
name: Heritage
description: Architectural minimalism meets journalistic gravitas.
colors:
  primary: "#1A1C1E"
  secondary: "#6C7278"
  tertiary: "#B8422E"
  neutral: "#F7F5F2"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 3rem
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: Public Sans
    fontSize: 1rem
rounded:
  sm: 4px
  md: 8px
  lg: 16px
spacing:
  sm: 8px
  md: 16px
  lg: 24px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#FFFFFF"
    rounded: "{rounded.sm}"
    padding: 12px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
---

## Overview

Architectural Minimalism meets Journalistic Gravitas...

## Colors

- **Primary (#1A1C1E):** Deep ink for headlines and core text.
- **Tertiary (#B8422E):** "Boston Clay" — the sole driver for interaction.

## Typography

Public Sans for everything except small all-caps labels...

## Components

`button-primary` is the only high-emphasis action on a page...

Token types

TypeFormatExample
Color# + hex (sRGB)"#1A1C1E"
Dimensionnumber + unit (px, em, rem)48px, -0.02em
Token reference{path.to.token}{colors.primary}
Typographyobject with fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, fontFeature, fontVariationsee above

Component property whitelist: backgroundColor, textColor, typography, rounded, padding, size, height, width. Variants (hover, active, pressed) are separate component entries with related key names (button-primary-hover), not nested.

Canonical section order

Sections are optional, but present ones MUST appear in this order. Duplicate headings reject the file.

  1. Overview (alias: Brand & Style)
  2. Colors
  3. Typography
  4. Layout (alias: Layout & Spacing)
  5. Elevation & Depth (alias: Elevation)
  6. Shapes
  7. Components
  8. Do's and Don'ts

Unknown sections are preserved, not errored. Unknown token names are accepted if the value type is valid. Unknown component properties produce a warning.

Workflow: authoring a new DESIGN.md

  1. Ask the user (or infer) the brand tone, accent color, and typography direction. If they provided a site, image, or vibe, translate it to the token shape above.
  2. Write DESIGN.md in their project root using write_file. Always include name: and colors:; other sections optional but encouraged.
  3. Use token references ({colors.primary}) in the components: section instead of re-typing hex values. Keeps the palette single-source.
  4. Lint it (see below). Fix any broken references or WCAG failures before returning.
  5. If the user has an existing project, also write Tailwind or DTCG exports next to the file (tailwind.theme.json, tokens.json).
Show full SKILL.md (239 more words)Show less

Workflow: lint / diff / export

The CLI is @google/design.md (Node). Use npx — no global install needed.

bash
# Validate structure + token references + WCAG contrast
npx -y @google/design.md lint DESIGN.md

# Compare two versions, fail on regression (exit 1 = regression)
npx -y @google/design.md diff DESIGN.md DESIGN-v2.md

# Export to Tailwind theme JSON
npx -y @google/design.md export --format tailwind DESIGN.md > tailwind.theme.json

# Export to W3C DTCG (Design Tokens Format Module) JSON
npx -y @google/design.md export --format dtcg DESIGN.md > tokens.json

# Print the spec itself — useful when injecting into an agent prompt
npx -y @google/design.md spec --rules-only --format json

All commands accept - for stdin. lint returns exit 1 on errors. Use the --format json flag and parse the output if you need to report findings structurally.

Lint rule reference (what the 7 rules catch)
  • broken-ref (error) — {colors.missing} points at a non-existent token
  • duplicate-section (error) — same ## Heading appears twice
  • invalid-color, invalid-dimension, invalid-typography (error)
  • wcag-contrast (warning/info) — component textColor vs backgroundColor ratio against WCAG AA (4.5:1) and AAA (7:1)
  • unknown-component-property (warning) — outside the whitelist above

When the user cares about accessibility, call this out explicitly in your summary — WCAG findings are the most load-bearing reason to use the CLI.

Pitfalls

  • Don't nest component variants. button-primary.hover is wrong; button-primary-hover as a sibling key is right.
  • Hex colors must be quoted strings. YAML will otherwise choke on # or truncate values like #1A1C1E oddly.
  • Negative dimensions need quotes too. letterSpacing: -0.02em parses as a YAML flow — write letterSpacing: "-0.02em".
  • Section order is enforced. If the user gives you prose in a random order, reorder it to match the canonical list before saving.
  • version: alpha is the current spec version (as of Apr 2026). The spec is marked alpha — watch for breaking changes.
  • Token references resolve by dotted path. {colors.primary} works; {primary} does not.

Spec source of truth

© ArgentAIOS, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in skills/hermes/creative/design-md of ArgentAIOS/argentos-core.

  • SKILL.md
  • templates/starter.md

Open the folder on GitHubat commit acbf929

Compare with similar skills

Argentos Design Md next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Argentos Design Md compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Argentos Design Md this skillArgentAIOS/argentos-core126—~2kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
MCP Developmentcoollabsio/coolify63k1 repos~949Automated safety check: PassMIT
Design SystemOhh-889/skyroc79511 repos~1.7kAutomated safety check: PassMIT
Design Dnazanwei/design-dna1.9k1 repos~2.1kAutomated safety check: PassMIT

Similar skills

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Figma use_figma Plugin API Rules

    warpdotdev/warp

    Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • MCP Development

    coollabsio/coolify

    A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 1 repo~949 tokens
    Frontend & DesignAuto-check passed

  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Frontend & DesignAuto-check passed

  • Design Dna

    zanwei/design-dna

    Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…

    1.9k GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

  • Figma Design to Code

    warpdotdev/warp

    Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.

    65k GitHub starsUsed in 4 repos~2.9k tokens
    Frontend & DesignAuto-check passed

More from ArgentAIOS/argentos-core

  • Argentos Dev Ops

    ArgentAIOS/argentos-core

    ArgentOS development operations workflow — Linear tracking, CodeRabbit reviews, Blacksmith CI, GitHub branch protection, and inter-agent handoff protocol.

    126 GitHub stars~1k tokensUpdated 3 mo ago
    Auto-check passed

  • Community Google Workspace

    ArgentAIOS/argentos-core

    Gmail, Calendar, Drive, Contacts, Sheets, and Docs integration for community skills.

    126 GitHub stars~2.8k tokensUpdated 3 mo ago
    Auto-check passed

  • Argentos Release Checklist

    ArgentAIOS/argentos-core

    End-to-end release checklist for ArgentOS across all repos and services.

    126 GitHub stars~906 tokensUpdated 3 mo ago
    Auto-check passed

  • Argentos Repo Inventory

    ArgentAIOS/argentos-core

    Complete inventory of ArgentOS repos, databases, services, and infrastructure.

    126 GitHub stars~1.6k tokensUpdated 3 mo ago
    Auto-check passed

  • Argentos Spotify

    ArgentAIOS/argentos-core

    Control Spotify — play music, search the catalog, manage playlists and library, inspect devices and playback state.

    126 GitHub stars~1.7k tokensUpdated 3 mo ago
    Auto-check passed

  • Workforce Setup

    ArgentAIOS/argentos-core

    Guide the operator through creating a workforce role, drafting the relationship contract, choosing the target family/primary agent, and starting the worker in the correct staged mode.

    126 GitHub stars~1.1k tokensUpdated 3 mo ago
    Auto-check passed

Categories

Questions about Argentos Design Md

What does Argentos Design Md do?

Author, validate, diff, and export DESIGN.md files — Google's open-source format spec that gives coding agents a persistent, structured understanding of a design system (tokens + rationale in one…. Argentos Design Md is an agent skill from ArgentAIOS/argentos-core.md files — Google's open-source format spec that gives coding agents a persistent, structured understanding of a design system (tokens + rationale in one file).

When should I use Argentos Design Md?

Argentos Design Md fits situations like: building a design system; porting style rules between projects; generating UI with consistent brand; auditing accessibility/contrast.

How do I install Argentos Design Md in Claude Code?

Run `npx skills add ArgentAIOS/argentos-core --skill argentos-design-md -a claude-code`. Or copy the skill folder (skills/hermes/creative/design-md in ArgentAIOS/argentos-core) into .claude/skills/argentos-design-md in your project. Claude Code loads it when a task matches its description.

How do I install Argentos Design Md in Codex?

Run `npx skills add ArgentAIOS/argentos-core --skill argentos-design-md -a codex`. Or copy the skill folder (skills/hermes/creative/design-md in ArgentAIOS/argentos-core) into .agents/skills/argentos-design-md in your project. Codex loads it when a task matches its description.

Can I use Argentos Design Md in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ArgentAIOS/argentos-core --skill argentos-design-md -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/argentos-design-md, .gemini/skills/argentos-design-md, .github/skills/argentos-design-md and .opencode/skills/argentos-design-md in your project.

What does Argentos Design Md need to run?

Going by SKILL.md and its folder, Argentos Design Md needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Argentos Design Md access the network?

SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.

Is Argentos Design Md safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Argentos Design Md use?

Argentos Design Md is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Argentos Design Md use?

About 2k tokens (SKILL.md is roughly 7.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Argentos Design Md?

Skills that share tags, products or a category with Argentos Design Md: Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), MCP Development (coollabsio/coolify, 63k stars) and Design System (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Argentos Design Md?

ArgentAIOS (a GitHub organization) maintains it in ArgentAIOS/argentos-core, which has 126 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on July 9, 2026.

Source: ArgentAIOS/argentos-core on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.