landing-page-from-brief

Instructions

You will receive a product brief and a brand_name. Produce a singlepage, mobilefirst landing site that follows Koder Stack specs:

• Tipografia per specs/fonts/typography.kmd (self-hosted .woff2,

  Inter sans + JetBrains Mono — *orbidden* Google Fonts, jsDelivr, unpkg)

• Tema lightdark per `specsthemes/light-dark.kmd` (default OS;

  CSS vars --kds-*; anti-flash inline script)

• Layout per specs/app-layout/safe-area.kmd (safeareainset envs)
• Download button (if applicable) via <koder-download-button>

  from koder_web_kit per specs/landing-pages/download-button.kmd

• Error reporting hook per specs/errors/reporting.kmd (toggle OFF

  by default)

• OG image + Twitter cards per specs/landing-pages/products.kmd
• Mobile responsiveness per specs/web-apps/responsiveness.kmd

Section structure (omit any irrelevant section, never invent specs the brief doesn't support):

1. Hero        — brand + 1-line value prop + primary CTA
2. Features    — 3-6 features inferred from the brief (icons + 1
                 sentence each); no marketing fluff
3. How it works — 3 steps max
4. CTA strip   — repeat primary CTA
5. Footer     — links, © {{ now-year }} {{ brand_name }}

After rendering, if publish: true:

1. Commit the HTML to the user's Koder Flow repo (auto-created if

   absent) using github or flow tool.

2. Trigger Hub publish via the AIsites endpoint (JET147).
3. Wait up to 60s for the public URL to resolve; return it.

Steps

1. Parse brief → infer brand voice, features, target audience.
2. Render HTML with CSSvarsonly colors (so dark mode just works).
3. Inline all CSS + JS (single file deliverable).
4. Validate output: HTML5 valid, all images have alt, tab order

   sensible, contrast ratios per WCAG AA.

5. If publish=true: commit + publish + return URL.

Examples

*ser:*"Faz uma landing pra meu novo SaaS de gestão de tarefas chamado TaskFlow, cor primária verde-floresta, publish=true" *xpected:*Single .html file + live URL like taskflow-a3f9b2.kapps.koder.dev.

*ser:*"Brief: app de receita médica digital pra clínicas pequenas. Brand: Receituário. publish=false" *xpected:*.html file only; no deployment.

Caveats

• *ever*use Google Fonts CDN or any external font CDN — self-host

  the .woff2 per spec (use Inter from engines/sdk/koder_kit/assets/).

• *ever*add visible "AI generated" watermark (operator's

  preference; aesthetic).

• *ever*mock up testimonials, customer logos, or stats not in the

  brief — fabricated social proof erodes trust.

• If brief is too vague, ask 1 clarifying question before generating

  (per policies/multi-choice-questions.kmd).

• Default visibility = unlisted (per JET-147 first slice); user must

  opt into public explicitly.

References

• HUB121 (oneclick publish — backend)
• JET147 (AIsites subdomain)
• WEBKIT-010 (koderwebkit components)
• specs/landing-pages/products.kmd
• specs/themes/light-dark.kmd
• specs/fonts/typography.kmd
• specs/app-layout/safe-area.kmd
• specs/landing-pages/download-button.kmd