create-html

Create HTML

Turn the user's content into one complete HTML file that is calm, readable, and ready to share. Keep the information primary; styling should make the structure easier to scan.

Workflow

1. Confirm the source material, audience, and purpose from the conversation and local files. Do not invent facts to fill empty sections.
2. Decide the information structure before styling. Prefer a short narrative, comparison table, timeline, or paired layout over a grid of generic cards. Read layout-patterns.md when the page has multiple content types, a schedule, a revision, or a decision to request.
3. Copy brief-template.html as the starting point. Keep its stylesheet whole and add only the parts this content needs; do not write a new stylesheet and then patch in the template's tokens. Remove unused components and replace every {{PLACEHOLDER}}. design-rules.md explains why each rule in the stylesheet exists.
4. Write a single self-contained .html file. Keep CSS and small SVG illustrations inline. Do not require a build step, JavaScript framework, CDN, external font, or analytics.
5. Run the checks below and fix every NG line.
6. When the page uses a mechanism the template does not have (a calendar, a new grid, content in the hero), render it at desktop width and around 390 px and run render-checks.md. Look at one screenshot yourself; passing numbers are not the same as having seen the page.

Design contract

• Light mode. One deep-blue gradient as the base, neutral text and lines, gold as the only accent, used as points rather than surfaces. Do not color-code sections with extra hues.
• The gradient appears in five places only: the full-width hero, the 72 px bar on each section divider, the section numbers, the table header, and card header bands. Bands never nest: a table or Before/After inside a card uses a white header with a small pill label.
• Main content about 940 px wide, body text at least 15 px, line height around 1.85.
• Use Japanese system fonts first: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", sans-serif.
• Tables have no vertical rules and no min-width. On phones the delivered page folds narrow tables into stacked cards, so avoid white-space: nowrap on long cells and never shrink text to make a table fit.
• Use semantic headings in order, visible focus styles, sufficient color contrast, and descriptive link text.
• Keep decorative icons minimal. Prefer CSS shapes or inline SVG to emoji-heavy decoration.