create-design-md

Create DESIGN.md

Create or update DESIGN.md in English only. The document must translate brand strategy into usable design direction for product UI, landing pages, visual systems, and implementation.

The result should be specific enough that designers, frontend developers, and AI coding agents can build consistent screens from it.

Workflow

Step 1: Inspect Existing Context

Before writing, inspect the project for available context.

Prioritize these sources:

1. BRANDING.md as the primary source of truth when it exists.
2. README.md and product docs for product purpose, audience, positioning, and feature scope.
3. Existing UI files, routes, components, and screen names.
4. Theme files, design tokens, CSS variables, global CSS, Tailwind config, UI library config, or React Native theme files.
5. App screenshots, marketing images, logos, icons, or visual assets when available.

Use BRANDING.md to derive practical design rules. Do not duplicate the full brand guide into DESIGN.md.

Common files and patterns to inspect:

BRANDING.md
README.md
DESIGN.md
tailwind.config.*
postcss.config.*
src/**/*.{css,scss,tsx,jsx,ts,js}
app/**/*.{css,scss,tsx,jsx,ts,js}
components/**/*.{css,scss,tsx,jsx,ts,js}
styles/**/*
theme/**/*
tokens/**/*
assets/**/*
public/**/*
*.png, *.jpg, *.jpeg, *.webp, *.svg

Step 2: Ask Only Important Missing Questions

If enough context exists, do not ask questions. Create or update DESIGN.md directly.

If important context is missing, ask 3-6 focused questions. Prefer the most consequential questions from this list:

1. What will this design guide support: landing page, product app UI, marketing assets, or all of the above?
2. What platforms should the design account for: web, mobile app, desktop, tablet, or responsive landing page?
3. Should the product feel more minimal and serious, warm and friendly, playful but refined, premium and polished, or technical and precise?
4. Are there existing brand colors, typography choices, logo directions, or references to preserve?
5. Are there visual styles to avoid, such as corporate SaaS, luxury, crypto, childish mascot, overly colorful, or generic AI design?
6. Should the guide include implementation tokens: CSS variables, Tailwind tokens, React Native theme tokens, or design-only guidance?