Design Context BuilderDESIGN.md readiness checklistGenerate a DESIGN.md

DESIGN.md checklist

Use this checklist before giving a design context file to an AI coding agent. A weak file produces generic UI even when the product idea is clear.

Generate and check one

1. Product context

  • Specific user and product type.
  • Primary workflow and desired result.
  • Clear non-goals.

2. Visual system

  • Palette, typography, spacing, radius, and density.
  • Container model and layout rules.
  • What to avoid.

3. Components

  • Buttons, inputs, panels, tables, and generated output.
  • States for hover, focus, empty, loading, and error.
  • Mobile behavior.

4. Agent rules

  • Files or surfaces that may change.
  • What the agent must preserve.
  • When the agent should ask before changing direction.

5. Verification

  • Desktop and mobile browser checks.
  • No horizontal overflow.
  • No console errors in core flow.

6. Proof

  • Example output or screenshots.
  • Known limits.
  • Update date for reusable templates.