Fudge DESIGN.md

Fudge DESIGN.md is a growing library of markdown design guides generated from real websites captured in Fudge, intended to be dropped into a project so a coding agent receives a specific visual direction grounded in a real reference rather than generic styling advice.

What is Fudge DESIGN.md?

Fudge DESIGN.md is a repository of per-domain design guides that summarize how real websites look and are structured. Each guide is produced from pages captured in Fudge, a design reference tool, and published as a markdown file that can be placed directly into a code project. The output is a written design brief covering visual direction, typography, colors, and layout for a specific site.

What does each guide contain?

Every guide summarizes the website's visual direction, typography, colors, and layout, then shows the representative captured pages used to understand the design. Each guide also separates captured details from interpretation, links back to the corresponding Fudge conversation where the capture happened, and links to the captured pages used to build it. That split lets a reader see which statements come from the site itself and which are inferred.

What makes this collection stand out?

• Real-site grounding — every guide derives from pages actually captured in Fudge, not abstract design theory.
• Markdown format — guides exist as plain .md files under a design-md/ path, one per domain, so they can be copied into any project.
• Interpretation separated from capture — captured details and interpretation are kept distinct within each guide.
• Source links — each guide links to its Fudge conversation and to the captured pages used to build it.
• Publishing filter — the collection updates only when a substantial domain guide is accepted and published through Fudge; thin generated drafts are not listed.
• Migration status — a status file tracks every domain in the collection, including blocked jobs and completed replacements.

Who is it for?

• Developers using AI coding agents: drop a DESIGN.md into a project so the agent follows a concrete visual direction instead of generic defaults.
• Designers building references: study how established sites such as Airbnb, Amazon, Al Jazeera, and a16z compose typography, color, and layout.
• Teams standardizing on design tokens: extract typographic and color direction from a guide as a starting point for a design system.

Use cases

• Starting a new landing page: pick a guide for a site with a similar tone and hand it to a coding agent as the visual brief.
• Studying layout patterns: compare how catalog interfaces, editorial pages, and portfolio sites structure hierarchy and spacing.
• Porting a visual style: use a guide's captured typography and color notes to reproduce a look in a different stack.

How does Fudge DESIGN.md work?

Pages from a website are captured in Fudge and used to build a domain guide. A guide is published into the collection only once it is accepted as substantial, and it is listed in an index along with its preview image, summary, and links to the guide file and the Fudge conversation. The repository's status file tracks migration progress for each domain.