God Output

God Output

Choose the format

HTML/CSS baseline (copy into every page)

htmlCopy code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Specific page title · Brand</title>
<meta name="description" content="One specific sentence.">
<meta property="og:image" content="/og.png"><!-- 1200×630 -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=...&display=swap" rel="stylesheet">
<style>
  :root { color-scheme: light dark; /* tokens from god-tokens */ }
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; font-family: var(--font-body);
         color: var(--color-text); background: var(--color-bg);
         -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  :focus-visible { outline: 2px solid var(--color-focus, currentColor); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important;
      transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header>…</header><main id="main">…</main><footer>…</footer>
</body></html>

Tailwind prototypes: <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> plus a <style type="text/tailwindcss">@theme { … }</style> block. For production, install tailwindcss with the Vite/PostCSS plugin.

React + shadcn/ui notes

• Map tokens to shadcn's CSS variables (--background, --foreground, --primary, --primary-foreground, --muted, --border, --ring, --radius) in globals.css. Then restyle. Default shadcn styling with zero changes is a slop tell.
• Keep components presentational and accept className. Use cva for variants.
• Use next/font (Next.js) to self-host Google Fonts with zero layout shift.

Render HTML/SVG → PNG/PDF

bashCopy code
npx -y playwright@latest install chromium                    # once
# PNG at an exact size (2x scale by default)
node skills/god-output/scripts/render.mjs poster.html poster.png 1080 1350
# PDF, one page per slide/section
node skills/god-output/scripts/render.mjs deck.html deck.pdf 1920 1080

(The script uses Playwright if installed and otherwise prints the manual command.)

Export settings

File naming: brand_asset_variant_size@scale.ext → godofdesign_logo_horizontal_dark@2x.png.

Figma handoff

1. Create Variables collections: Primitives (raw colours, spacing), Semantic (roles) with modes Light/Dark, mirroring god-tokens names.
2. Text styles for each type-scale step; effect styles for shadows.
3. Components with auto layout (padding = spacing tokens), variants for states, and properties for text/icon toggles.
4. Frames at real device sizes, layout grids matching god-layout.
5. Annotate: spacing, behaviour, breakpoints, motion specs (duration/easing), accessibility notes (heading levels, focus order, alt text).
6. If a Figma MCP/API is available, read existing variables and components first and reuse them. Never duplicate the system.

Canva handoff

1. Use custom dimensions matching the platform spec (e.g. 1080×1350 px for an IG portrait).
2. Set up a Brand Kit: logos (SVG/PNG), colours (hex), fonts (upload brand fonts or choose the closest Canva fonts), plus a brand template.
3. Provide a content sheet (CSV: one row per design, columns per text/image field) for Bulk Create or Autofill (Canva Connect API / Canva MCP autofill-design with a brand template).
4. Keep text as live text (editable). Avoid flattening into images.
5. If the Canva MCP is connected: search brand templates → get the dataset (field names) → autofill with your content → export PNG/PDF. Always confirm with the user before publishing or sharing anything.