Brand-Consistent HTML Output

Use it for

HTML vs. Markdown — Brand-Consistent AI Output

The prompt

=== Stage 1 — Draft in Markdown ===
Draft this as a Markdown document. Structure: [your structure here]. Content: [your topic/brief]. 
Write for [target audience]. Keep it editable — I'll revise before final output.
Do not style. Plain Markdown only.

=== Stage 2 — Convert to HTML ===
Take this Markdown and produce a beautiful, publication-ready HTML document.
Single file. Responsive. Modern typography. Professional visual hierarchy.
Include inline CSS. No external dependencies.

[Paste your Markdown here]

=== Stage 3 — Apply Brand CSS ===

--- Option A ---
Restyle this HTML with my brand colors and typography.
Primary color: [#hex]
Secondary color: [#hex]
Accent: [#hex]
Body font: [Font Name, fallback]
Heading font: [Font Name, fallback]
Visual style: [e.g., "clean and minimal", "bold and direct", "warm and approachable"]

Preserve all content and structure. Only change the styling.

[Paste your HTML here]

--- Option B ---
Read the CSS from my website at [yourwebsite.com]. 
Extract: primary colors, secondary colors, fonts, border-radius preferences, button styles, heading hierarchy.
Then restyle this HTML document to match my website's visual identity exactly.

[Paste your HTML here]

--- Option C ---
Apply the template named "[Your Template Name]" from my Claude Design templates to this HTML document. 
Preserve all content. Match the template's visual style exactly.

[Paste your HTML here]

Worked example

No worked example recorded yet.