DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.

Need a fresh DESIGN.md from scratch?

Use the free explainx.ai DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

explainx.ai

explainx.ai — DESIGN.md | explainx.ai | explainx.ai

DESIGN.md (markdown body)

name	explainx.ai
colors	background: "#fafafa" foreground: "#141418" muted: "#52525b" border: "#d4d4d8" card: "#f4f4f5" accent: "#ededf0" brand: "#0f766e" brand-hover: "#115e59" dark: background: "#09090b" foreground: "#fafafa" muted: "#71717a" border: "#27272a" card: "#111113" accent: "#18181b" brand: "#00ff88" brand-hover: "#5dffc4"
typography	fontFamily: mono: 'var(--font-geist-mono), "Fira Mono", "Courier New", monospace' sans: 'var(--font-geist-sans), ui-sans-serif, system-ui' body: fontFamily: mono fontSize: 14px heading: fontFamily: mono fontWeight: 700
rounded	default: 4px md: 6px lg: 8px

Design System: explainx.ai

Overview

explainx.ai is a terminal-inspired, clean, and highly functional registry for AI agents and skills. The aesthetic is "Modern Terminal" — combining the precision of developer tools with modern web clarity.

Design Philosophy

Developer First: Prioritize monospace fonts, code-like structures, and keyboard-centric metaphors.
High Signal, Low Noise: Use borders instead of shadows for separation. Maintain high contrast.
Reactive Feedback: Use glowing effects (box-shadows with low opacity) for primary interactive elements and focus states.

Colors

Brand Green: The signature color. In light mode, it's a deep teal (#0f766e). In dark mode, it's a vibrant neon mint (#00ff88). This color represents "active" or "powered-on" states.
Surface Colors: Backgrounds and cards use a very clean, near-neutral palette. Dark mode uses a deep "near-black" (#09090b) to make green accents pop.

Typography

Primary (Mono): Geist Mono is the primary font for everything—body, headers, buttons. It reinforces the technical, terminal-like nature of the platform.
Secondary (Sans): Geist Sans is used sparingly for long-form marketing content or specific UI where high-density mono text might become fatiguing.

Components

Buttons

Primary (.btn-green): Solid brand green background. Text color should be dark (#09090b) for high contrast. In dark mode, it features a 0 0 20px var(--green-glow) hover effect.
Ghost/Outline: Transparent or subtle background with a 1px border.

Inputs (`.input-terminal`)

Monospace font.
Subtle background contrast.
Focus state: Brand green border with a glow effect (0 0 12px var(--green-glow)).

Cards

No elevation or drop shadows.
1px border (var(--border)).
Card background (var(--card)).

Visual Effects

Terminal Grid: A subtle 40px linear gradient grid used for hero backgrounds (.grid-bg).
Glows: Used on text, borders, and buttons to simulate a CRT or LED display.
Scanlines: A vertical translation animation used on large containers for aesthetic flair.
Animations: Prefer "Fade Up" entries and "Cursor Blink" for interactive text to simulate terminal loading.

Usage

Copy DESIGN.md into your project or paste it into your IDE agent chat.
Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.

Common questions

What is explainx.ai on explainx.ai?: explainx.ai is a terminal-inspired, clean, and highly functional registry for AI agents and skills. The aesthetic is "Modern Terminal" — combining the precision of developer tools with modern web clarity. Listed under category “Design System”. explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
What is DESIGN.md?: DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?: Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
Where is the source repo?: Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
How current is this DESIGN.md?: Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
Need a fresh DESIGN.md from scratch?: Use the free explainx.ai DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.

Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.

Reference →DESIGN.md generator →Skills registry →

List Your Design.md

Share your design system with AI agents worldwide

Get started →