skills.rest
moonzff
moonzffCOMMUNITY
Explore all skills by this author →
GitHub

design-md-authoring

Create and audit DESIGN.md visual design system files for AI-assisted UI generation.

1|Updated May 6, 2026
Search Tags:#frontend#design system#visual consistency#style guide#design tokens#ui design#design.md
One-click install
npx skills add https://github.com/moonzff/Codex_up --skill design-md-authoring-moonzff
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md-authoring
Source: https://github.com/moonzff/Codex_up/tree/main/skills/global-installed/design-md-authoring
Command: npx skills add https://github.com/moonzff/Codex_up --skill design-md-authoring-moonzff

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI coding and design agents lack a persistent, agent-readable source of visual design rules, so UI output drifts across sessions and loses brand consistency. This Skill turns visual direction into a project-local DESIGN.md that any agent can read before building UI. ## Core Features & Use Cases - DESIGN.md Authoring: Draft a structured visual spec covering design tokens, components, page patterns, accessibility, and forbidden patterns. - Three Design Modes: Choose new-brand creation, codify-existing to convert current UI into rules, or audit to compare a UI against an existing DESIGN.md. - Safety-First Brand Handling: Translate brand inspiration into original, non-infringing design principles instead of copying protected trademarks or assets. - Use Case: A team starting a new frontend project uses this Skill to produce a DESIGN.md with color tokens, typography rules, and a QA checklist, so every subsequent agent-generated page follows the same visual system. ## Quick Start Use the design-md-authoring skill to create a DESIGN.md visual spec for my web app project.

Frequently Asked Questions about design-md-authoring

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a DESIGN.md file for AI coding agents?▼

Gather existing sources like screenshots, Figma files, brand notes, or CSS tokens, then choose a design mode: new-brand, codify-existing, or audit. Draft the DESIGN.md using the provided template covering tokens, components, page patterns, accessibility, and a QA checklist.

What is the difference between DESIGN.md and AGENTS.md?▼

AGENTS.md holds engineering rules for coding agents, while DESIGN.md holds visual system rules such as color, typography, spacing, and component patterns. The two files complement each other so agents get both technical and visual guidance.

Can I use DESIGN.md to copy a famous brand's design?▼

No. The workflow explicitly forbids copying logos, mascots, icons, screenshots, or trademarked identity marks. Instead, translate brand inspiration into original, non-infringing design principles and record provenance for any external fonts or assets.

Does DESIGN.md replace Figma or design tokens?▼

No. DESIGN.md is a Markdown summary layer, not a replacement for Figma files, design token pipelines, accessibility checks, or responsive QA. Connect to Figma only after the user provides a target file URL and write confirmation.

How do I audit an existing UI against a DESIGN.md?▼

Select the audit design mode, which compares the current UI against the rules in an existing DESIGN.md. For frontend implementation work, require screenshot or browser QA after changes to verify visual consistency.

Related Skills

Explore More Design & Creative Skills→
cromesdkcromesdk

figma-make-angular20-tailwind4-implementation

Implement Figma Make UI designs into Angular 20 and Tailwind CSS v4 projects.

Official
Advanced
lucidlabs-hqlucidlabs-hq
2

screenshot

Capture UI screenshots of web pages for visual verification.

Official
Intermediate
HellKaiser45HellKaiser45

frontend-design-review

Analyze UI implementations against design system tokens and accessibility guidelines.

Community
Advanced
TechsioCZTechsioCZ
2

component-to-figma

Map code-native components to Figma with strict token inheritance.

Official
Advanced