Designing with AI
AI design tools such as Claude Design and Google Stitch can produce production-quality HTML and CSS from a written brief. Forge makes this straightforward with a standard input format called forge-pattern.md.
The problem: no live data during design
When you design a new content type, the site does not exist yet. There is no live JSON endpoint to hand to a design tool. Forge solves this with forge-pattern.md: a single file that contains your content structure, sample records, design intent, and scope constraints. The design tool uses it as its only input.
What forge-pattern.md contains
A forge-pattern.md has five sections:
1. CMS note: tells the design tool what Forge is and what constraints apply (no JavaScript, plain CSS custom properties, server-side rendered templates) 2. Content type fields: a table of field names, types, and example values 3. content.json: 2-3 realistic sample records the design tool renders 4. Pages to design: which routes to produce (/posts, /posts/{slug}, etc.) 5. Design intent: mood, color palette, typography, and scope constraints
Skills
Two ready-to-use skills are available in the skills/ directory of the Forge repository that generate forge-pattern.md for you:
forge-design.md: Claude Code skill. Reads your Go struct and generates
a forge-pattern.md for you.
forge-design-assistant.md: Claude.ai project instructions. Guides
non-technical users through design intent via conversation and produces a forge-pattern.md without requiring any Go knowledge.
Copy the relevant file into your project to get started.
Creating a forge-pattern.md manually
If you prefer to write it yourself, start from your Go struct. Map each exported field to its json tag: that is the field name in the JSON output. Add 2-3 realistic sample records so the design tool has real content to work with.
The typography section must include an explicit Font: line. If you leave it out, the design tool will choose and may add external dependencies you did not intend.
The scope section is equally important. Design tools fill every unspecified decision with their own choice. List everything that should be absent: nav bar, footer, sidebar, hero image, JavaScript, CSS frameworks, dark mode.
Running the workflow
1. Write forge-pattern.md for your content type 2. Give it to a design tool (Claude Design or Google Stitch work well) 3. Review the HTML and CSS against your design intent 4. Translate the static HTML to Go html/template syntax
The translation step is always separate. Design tools produce static HTML, not Go templates. Replace hardcoded values with template expressions:
<!-- Static HTML from design tool -->
<h1>Why Forge Has Zero Dependencies</h1>
<time>February 28, 2026</time>
<!-- Translated to Go html/template -->
<h1>{{ .Title }}</h1>
<time>{{ .PublishedAt.Format "January 2, 2006" }}</time>Adding reference images
Including 1-2 screenshots of sites with a similar aesthetic sharpens the output significantly. Typography and spacing are described more precisely by an image than by words. If you do not have reference images, describe the aesthetic target more specifically in the Mood section.
Blog example
The Forge blog example ships with a complete forge-pattern.md for the Post content type. It covers the /posts list page and /posts/{slug} show page, and was validated against Claude Design.
You can find it at example/blog/forge-pattern.md in the Forge repository.