Design Context BuilderFree DESIGN.md resources Generate a DESIGN.md

DESIGN.md templates for AI coding agents

These free templates give Codex, Cursor, Claude Code, and similar agents concrete visual rules before they build or restyle a page.

Starter templates

Copy one template or load the homepage generator for a more specific version.

SaaS tool template

For input-to-output tools, AI utilities, and compact product workspaces.

# DESIGN.md

## Product Context
- Product type: SaaS tool
- Target user: AI coding users building a focused web tool
- Design tone: quiet professional

## Global Style
- Use a practical workspace, not a marketing hero.
- Show input, generated result, and quality checks in one flow.
- Keep controls compact, readable, and stable on mobile.

## Components
- Primary button: short verb plus icon.
- Output panel: monospace, high contrast, copy/download actions.
- Checklist: concrete pass/fail items.

## Verification
- Generate once.
- Copy or download the result.
- Check desktop and mobile overflow.

Dashboard template

For status-heavy products where users scan metrics, rows, and detail panels.

# DESIGN.md

## Product Context
- Product type: dashboard
- Target user: technical operator or founder
- Design tone: technical and dense

## Layout
- Use a stable grid with clear status rows.
- Keep filters and primary actions visible.
- Avoid card-heavy marketing composition.

## Components
- Tables need fixed row rhythm and clear empty states.
- Status labels use muted semantic colors.
- Detail panels should not resize the whole page.

Directory site template

For resource libraries, tool directories, compatibility lists, and comparison pages.

# DESIGN.md

## Product Context
- Product type: directory site
- Target user: evaluator comparing options
- Design tone: utility-first minimal

## Layout
- Start with search/filter controls and transparent criteria.
- Each entry needs an update date and evidence link.
- Low-quality entries should be hidden or noindexed.

## Internal Links
- Directory -> detail -> comparison -> generator.
- Related entries should link by use case, not random tags.