More screenshots

    Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+20 more

    design md generator

    1

    Generate a durable DESIGN.md system to lock in visual tokens, prevent AI slop, and export to CSS/Tailwind.

    $5

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    0 installsSecurity scanned

    design md generator

    Example session with this skill installed

    I have a logo with a deep clay red (#A73B24). I want a design system that feels grounded and heavy but modern. Can you lock this in for my Next.js project?

    • Read your context and instructions
    • Compiled the design md generator
    • Generated the design tokens stylesheet

    I have extracted the clay red palette and set the system dials to RHYTHM 3 (grounded) and MOTION 1 (stable). I've verified the contrast for the primary action button.

    DESIGN.md

    • Status: Locked
    • Dial: ENERGY 1 / RHYTHM 3 / MOTION 1
    • Anchor: Traditional pottery / Architecture
    • Differentiator: High-contrast oversized typography paired with earthy, textured backgrounds.

    Tokens

    :root {
  /* Paper & Ink */
  --paper: oklch(0.98 0.01 40); /* Warm bone */
  --ink: oklch(0.25 0.02 40);   /* Near-black clay */
  
  /* Brand */
  --accent: oklch(0.48 0.18 35); /* Clay Red #A73B24 */
  --accent-contrast: oklch(0.99 0.01 40);
  
  /* Scale */
  --space-unit: 4px;
  --radius-base: 2px; /* Sharp, architectural edges */
}

    Decisions

    Typography: Using a heavy serif for headings to lean into the "grounded" feel, with a clean sans-serif for functional UI.

    Color: The clay red is reserved for primary actions and status. Backgrounds use a warm off-white to avoid the sterile look of pure #FFFFFF.

    • Rhythm: Spacing is generous (Scale 3) to give elements room to breathe, mimicking a gallery layout.

    Next steps

    1. Run node scripts/validate_design.mjs to confirm contrast passes for all secondary tokens.
    2. Run node scripts/export_design.mjs --format tailwind to update your @theme block.
    3. Import the generated tokens.css into your root layout file.

    design-md-generator-tokens.css

    CSS · design tokens

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    What you get

    Lock design tokens to prevent AI agents from hallucinating UI styles.Extract palettes and spacing from brand guides or reference images.Automate WCAG 2.1 contrast validation for generated color systems.Export design variables directly to Tailwind, CSS, or shadcn/ui.

    About this skill

    AI agents often drift into "slop" by making inconsistent visual choices or defaulting to generic "modern" aesthetics that look like every other generated site. This skill forces an agent to define, lock, and export a durable visual system that governs every subsequent UI build.

    What it does

    • Enforce visual identity by generating a DESIGN.md file that serves as the source of truth for all UI decisions.
    • Extract design tokens from existing code, brand guides, logos, or screenshots to maintain continuity.
    • Calculate contrast ratios using WCAG 2.1 math for all ink, paper, and accent pairs to ensure accessibility.
    • Detect and prevent slop by identifying saturated anchors (like the "Stripe/Linear look") and requiring unique differentiators.
    • Export to build tools by generating tokens.css, Tailwind v4 @theme blocks, or DTCG-compliant tokens.json.

    How it works

    1. Direction Discovery: Choose to answer an interview, point to a reference site/image, or request a proposal based on the PRD.
    2. Anchor Check: Identify the "saturated" design patterns you want to avoid and commit to a specific differentiator.
    3. System Generation: The skill populates a normative DESIGN.md with dials for energy, rhythm, and motion alongside oklch() tokens.
    4. Validation and Wiring: Run the deterministic validator to catch contrast failures or missing decisions, then export tokens to your frontend stack.

    Frameworks & tools

    Works with any frontend stack via CSS variables. Specific export support for Tailwind CSS, shadcn/ui, and Design Tokens Community Group (DTCG) formats. Includes a Node.js validation script for CI/CD or local checks.

    Why this beats prompting it yourself

    Generic prompts like "make it look clean" result in the model's mean average output, which is the definition of AI slop. This skill uses a structured interview and a strict schema to lock down specific tokens and "dials" that the agent cannot deviate from in future turns, ensuring a cohesive product.

    Use cases

    • Stabilize an agent's visual output so it stops changing button styles on every new page.
    • Convert a client's brand guide or a reference screenshot into a production-ready token system.
    • Audit an existing project for WCAG contrast compliance and token consistency.
    • Scaffold a design system for a new project before the first UI component is written.

    Known limitations

    Does not generate mockups or visual assets; it generates the rules that govern them. Requires a Node.js environment to run the included validation and export scripts.

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean 3 days ago

    • Passed all security checks, Safe to install

    Listed3 days ago

    What's inside

    Frequently Asked Questions