From c65fc53c31e26d8ec458c8dd96fcdefc58f8de37 Mon Sep 17 00:00:00 2001
From: Haoqing Wang <1506751656@qq.com>
Date: Sat, 18 Apr 2026 12:22:03 +0800
Subject: [PATCH] feat(core,exporters,desktop): end-to-end first demo + HTML
 export
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wires the full prompt → artifact → preview → export loop so the README's
"first demo" actually produces a design when an API key is provided.

- packages/templates: externalize the design-generator system prompt as
  SYSTEM_PROMPTS.designGenerator with a sibling design-generator.md for
  reviewable diffs. Replaces the inline string previously hard-coded in
  packages/core. Prompt embeds the research-backed Claude Design rules
  (single artifact, Tailwind CDN, semantic HTML, CSS variable tokens,
  WCAG AA, no lorem ipsum).
- packages/core: pull SYSTEM_PROMPTS.designGenerator from templates,
  collapse the duplicated artifact-extraction loop into a `collect()`
  helper, add generate.test.ts (mocks the providers boundary, asserts
  empty-prompt error, artifact extraction shape, system-prompt wiring).
- packages/exporters: real exportHtml() that ensures a doctype, injects
  the Tailwind CDN tag if missing, stamps a generator meta/banner, and
  pretty-prints. PDF / PPTX / ZIP each throw CodesignError with code
  EXPORTER_NOT_READY ("ships in Phase 2") — no silent fallbacks
  (PRINCIPLES §10). Top-level exportArtifact() dispatches lazily so
  unused formats stay out of the cold-start bundle (PRINCIPLES §1).
- apps/desktop: codesign:export IPC backed by Electron dialog
  showSaveDialog, validates payload via CodesignError, propagates
  Phase-2 errors loudly. Preload exposes window.codesign.export().
  Store gains exportActive(format) + a toast slot. PreviewToolbar
  renders an Export dropdown with HTML enabled and PDF/PPTX/ZIP
  disabled with "Coming in Phase 2" tooltips.
- TIER 1 / dev-only fallback: store reads VITE_OPEN_CODESIGN_DEV_KEY
  so the demo runs before wt/onboarding lands real keychain plumbing.
  Marked clearly for removal in the integration commit.
- examples/calm-spaces: README documents the demo + expected behaviour
  + intentional loud failure modes.

No new third-party dependencies. All UI uses var(--color-*) tokens.

Acceptance test (manual):
  VITE_OPEN_CODESIGN_DEV_KEY=sk-ant-... \
    pnpm --filter @open-codesign/desktop dev
  → click "Calm Spaces meditation app" → Send → iframe renders
  → Export → HTML → /tmp/out.html → open in browser
  → Export → PDF → toast "PDF export ships in Phase 2"

Signed-off-by: Haoqing Wang <1506751656@qq.com>
---
 apps/desktop/package.json                     |   1 +
 apps/desktop/src/main/exporter-ipc.ts         |  65 +++++++
 apps/desktop/src/main/index.ts                |  10 ++
 apps/desktop/src/preload/index.ts             |  13 ++
 apps/desktop/src/renderer/src/App.tsx         |   9 +-
 .../src/components/PreviewToolbar.tsx         |  95 ++++++++++
 apps/desktop/src/renderer/src/store.ts        |  90 +++++++++-
 examples/calm-spaces/README.md                |  51 ++++++
 packages/core/package.json                    |   3 +-
 packages/core/src/generate.test.ts            |  84 +++++++++
 packages/core/src/index.ts                    |  68 +++-----
 packages/exporters/package.json               |   1 +
 packages/exporters/src/html.ts                | 163 ++++++++++++++++++
 packages/exporters/src/index.ts               |  46 +++--
 packages/exporters/src/pdf.ts                 |   9 +
 packages/exporters/src/pptx.ts                |   9 +
 packages/exporters/src/zip.ts                 |   9 +
 packages/templates/src/index.ts               |   2 +
 .../templates/src/system/design-generator.md  |  78 +++++++++
 packages/templates/src/system/index.ts        |  54 ++++++
 pnpm-lock.yaml                                |   6 +
 21 files changed, 811 insertions(+), 55 deletions(-)
 create mode 100644 apps/desktop/src/main/exporter-ipc.ts
 create mode 100644 apps/desktop/src/renderer/src/components/PreviewToolbar.tsx
 create mode 100644 examples/calm-spaces/README.md
 create mode 100644 packages/core/src/generate.test.ts
 create mode 100644 packages/exporters/src/html.ts
 create mode 100644 packages/exporters/src/pdf.ts
 create mode 100644 packages/exporters/src/pptx.ts
 create mode 100644 packages/exporters/src/zip.ts
 create mode 100644 packages/templates/src/system/design-generator.md
 create mode 100644 packages/templates/src/system/index.ts

diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 21ec5496..351a6ebb 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -15,6 +15,7 @@
     "@iarna/toml": "^2.2.5",
     "@open-codesign/artifacts": "workspace:*",
     "@open-codesign/core": "workspace:*",
+    "@open-codesign/exporters": "workspace:*",
     "@open-codesign/providers": "workspace:*",
     "@open-codesign/runtime": "workspace:*",
     "@open-codesign/shared": "workspace:*",
diff --git a/apps/desktop/src/main/exporter-ipc.ts b/apps/desktop/src/main/exporter-ipc.ts
new file mode 100644
index 00000000..b0e03438
--- /dev/null
+++ b/apps/desktop/src/main/exporter-ipc.ts
@@ -0,0 +1,65 @@
+import { type ExporterFormat, exportArtifact } from '@open-codesign/exporters';
+import { CodesignError } from '@open-codesign/shared';
+import { type BrowserWindow, dialog, ipcMain } from 'electron';
+
+const FORMAT_FILTERS: Record<ExporterFormat, Electron.FileFilter[]> = {
+  html: [{ name: 'HTML', extensions: ['html'] }],
+  pdf: [{ name: 'PDF', extensions: ['pdf'] }],
+  pptx: [{ name: 'PowerPoint', extensions: ['pptx'] }],
+  zip: [{ name: 'ZIP archive', extensions: ['zip'] }],
+};
+
+export interface ExportRequest {
+  format: ExporterFormat;
+  htmlContent: string;
+  defaultFilename?: string;
+}
+
+export interface ExportResponse {
+  status: 'saved' | 'cancelled';
+  path?: string;
+  bytes?: number;
+}
+
+function parseRequest(raw: unknown): ExportRequest {
+  if (raw === null || typeof raw !== 'object') {
+    throw new CodesignError('export expects an object payload', 'IPC_BAD_INPUT');
+  }
+  const r = raw as Record<string, unknown>;
+  const format = r['format'];
+  const html = r['htmlContent'];
+  const defaultFilename = r['defaultFilename'];
+  if (format !== 'html' && format !== 'pdf' && format !== 'pptx' && format !== 'zip') {
+    throw new CodesignError(`Unknown export format: ${String(format)}`, 'EXPORTER_UNKNOWN');
+  }
+  if (typeof html !== 'string' || html.length === 0) {
+    throw new CodesignError('export requires non-empty htmlContent', 'IPC_BAD_INPUT');
+  }
+  const out: ExportRequest = { format, htmlContent: html };
+  if (typeof defaultFilename === 'string' && defaultFilename.length > 0) {
+    out.defaultFilename = defaultFilename;
+  }
+  return out;
+}
+
+export function registerExporterIpc(getWindow: () => BrowserWindow | null): void {
+  ipcMain.handle('codesign:export', async (_evt, raw: unknown): Promise<ExportResponse> => {
+    const req = parseRequest(raw);
+    const win = getWindow();
+    const opts: Electron.SaveDialogOptions = {
+      title: `Export design as ${req.format.toUpperCase()}`,
+      defaultPath: req.defaultFilename ?? `design.${req.format}`,
+      filters: FORMAT_FILTERS[req.format],
+    };
+    const picked = win ? await dialog.showSaveDialog(win, opts) : await dialog.showSaveDialog(opts);
+    if (picked.canceled || !picked.filePath) {
+      return { status: 'cancelled' };
+    }
+
+    // Tier 1: HTML succeeds, others throw EXPORTER_NOT_READY. We deliberately
+    // do NOT swallow the error here — let it propagate so the renderer can
+    // surface it as a toast (PRINCIPLES §10).
+    const result = await exportArtifact(req.format, req.htmlContent, picked.filePath);
+    return { status: 'saved', path: result.path, bytes: result.bytes };
+  });
+}
diff --git a/apps/desktop/src/main/index.ts b/apps/desktop/src/main/index.ts
index 09f117f7..bdf1eff6 100644
--- a/apps/desktop/src/main/index.ts
+++ b/apps/desktop/src/main/index.ts
@@ -5,7 +5,12 @@ import { detectProviderFromKey } from '@open-codesign/providers';
 import { BRAND, CodesignError, GeneratePayload } from '@open-codesign/shared';
 import { BrowserWindow, app, ipcMain, shell } from 'electron';
 import { autoUpdater } from 'electron-updater';
+<<<<<<< HEAD
 import { getApiKeyForProvider, loadConfigOnBoot, registerOnboardingIpc } from './onboarding-ipc';
+||||||| parent of bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
+=======
+import { registerExporterIpc } from './exporter-ipc';
+>>>>>>> bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -81,7 +86,12 @@ function setupAutoUpdater(): void {
 void app.whenReady().then(async () => {
   await loadConfigOnBoot();
   registerIpcHandlers();
+<<<<<<< HEAD
   registerOnboardingIpc();
+||||||| parent of bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
+=======
+  registerExporterIpc(() => mainWindow);
+>>>>>>> bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
   setupAutoUpdater();
   createWindow();
 
diff --git a/apps/desktop/src/preload/index.ts b/apps/desktop/src/preload/index.ts
index a86afc68..45f66992 100644
--- a/apps/desktop/src/preload/index.ts
+++ b/apps/desktop/src/preload/index.ts
@@ -6,6 +6,7 @@ import type {
 } from '@open-codesign/shared';
 import { contextBridge, ipcRenderer } from 'electron';
 
+<<<<<<< HEAD
 export interface ValidateKeyResult {
   ok: true;
   modelCount: number;
@@ -16,6 +17,16 @@ export interface ValidateKeyError {
   message: string;
 }
 
+||||||| parent of bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
+=======
+export type ExportFormat = 'html' | 'pdf' | 'pptx' | 'zip';
+export interface ExportInvokeResponse {
+  status: 'saved' | 'cancelled';
+  path?: string;
+  bytes?: number;
+}
+
+>>>>>>> bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
 const api = {
   detectProvider: (key: string) =>
     ipcRenderer.invoke('codesign:detect-provider', key) as Promise<string | null>,
@@ -25,6 +36,8 @@ const api = {
     model: ModelRef;
     baseUrl?: string;
   }) => ipcRenderer.invoke('codesign:generate', payload),
+  export: (payload: { format: ExportFormat; htmlContent: string; defaultFilename?: string }) =>
+    ipcRenderer.invoke('codesign:export', payload) as Promise<ExportInvokeResponse>,
   checkForUpdates: () => ipcRenderer.invoke('codesign:check-for-updates'),
   downloadUpdate: () => ipcRenderer.invoke('codesign:download-update'),
   installUpdate: () => ipcRenderer.invoke('codesign:install-update'),
diff --git a/apps/desktop/src/renderer/src/App.tsx b/apps/desktop/src/renderer/src/App.tsx
index 7385a6ed..76c2a389 100644
--- a/apps/desktop/src/renderer/src/App.tsx
+++ b/apps/desktop/src/renderer/src/App.tsx
@@ -2,8 +2,15 @@ import { buildSrcdoc } from '@open-codesign/runtime';
 import { BUILTIN_DEMOS } from '@open-codesign/templates';
 import { Button } from '@open-codesign/ui';
 import { Send, Sparkles } from 'lucide-react';
+<<<<<<< HEAD
 import { useEffect, useState } from 'react';
 import { Onboarding } from './onboarding';
+||||||| parent of bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
+import { useState } from 'react';
+=======
+import { useState } from 'react';
+import { PreviewToolbar } from './components/PreviewToolbar';
+>>>>>>> bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
 import { useCodesignStore } from './store';
 
 export function App() {
@@ -78,7 +85,6 @@ export function App() {
           ) : (
             messages.map((m, i) => (
               <div
-                // biome-ignore lint/suspicious/noArrayIndexKey: tier-1 chat list with no reordering
                 key={`${m.role}-${i}`}
                 className={`px-3 py-2 rounded-[var(--radius-md)] text-sm ${
                   m.role === 'user'
@@ -119,6 +125,7 @@ export function App() {
             BYOK · local-first · multi-model
           </span>
         </header>
+        <PreviewToolbar />
         <div className="flex-1 p-6 overflow-auto">
           {previewHtml ? (
             <iframe
diff --git a/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx b/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx
new file mode 100644
index 00000000..1870a6c5
--- /dev/null
+++ b/apps/desktop/src/renderer/src/components/PreviewToolbar.tsx
@@ -0,0 +1,95 @@
+import { Download } from 'lucide-react';
+import { type ReactElement, useEffect, useRef, useState } from 'react';
+import type { ExportFormat } from '../../../preload/index';
+import { useCodesignStore } from '../store';
+
+interface ExportItem {
+  format: ExportFormat;
+  label: string;
+  hint?: string;
+  ready: boolean;
+}
+
+const EXPORT_ITEMS: ExportItem[] = [
+  { format: 'html', label: 'HTML', ready: true },
+  { format: 'pdf', label: 'PDF', ready: false, hint: 'Coming in Phase 2' },
+  { format: 'pptx', label: 'PPTX', ready: false, hint: 'Coming in Phase 2' },
+  { format: 'zip', label: 'ZIP bundle', ready: false, hint: 'Coming in Phase 2' },
+];
+
+export function PreviewToolbar(): ReactElement {
+  const previewHtml = useCodesignStore((s) => s.previewHtml);
+  const exportActive = useCodesignStore((s) => s.exportActive);
+  const toastMessage = useCodesignStore((s) => s.toastMessage);
+  const dismissToast = useCodesignStore((s) => s.dismissToast);
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function onClick(e: MouseEvent): void {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener('mousedown', onClick);
+    return () => document.removeEventListener('mousedown', onClick);
+  }, [open]);
+
+  useEffect(() => {
+    if (!toastMessage) return;
+    const t = setTimeout(() => dismissToast(), 4000);
+    return () => clearTimeout(t);
+  }, [toastMessage, dismissToast]);
+
+  const disabled = !previewHtml;
+
+  return (
+    <div className="flex items-center justify-end gap-2 px-5 py-2 border-b border-[var(--color-border)] bg-[var(--color-background-secondary)]">
+      {toastMessage && (
+        <output className="mr-auto text-xs text-[var(--color-text-secondary)] truncate max-w-[60%]">
+          {toastMessage}
+        </output>
+      )}
+
+      <div className="relative" ref={ref}>
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() => setOpen((v) => !v)}
+          className="inline-flex items-center gap-1.5 h-8 px-3 rounded-[var(--radius-md)] text-sm font-medium border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] disabled:opacity-50 disabled:pointer-events-none transition-colors"
+          aria-haspopup="menu"
+          aria-expanded={open}
+        >
+          <Download className="w-4 h-4" aria-hidden="true" />
+          Export
+        </button>
+
+        {open && (
+          <div
+            role="menu"
+            className="absolute right-0 top-full mt-1 min-w-[180px] rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[var(--shadow-card)] py-1 z-10"
+          >
+            {EXPORT_ITEMS.map((item) => (
+              <button
+                key={item.format}
+                type="button"
+                role="menuitem"
+                disabled={!item.ready}
+                title={item.ready ? undefined : item.hint}
+                onClick={() => {
+                  setOpen(false);
+                  void exportActive(item.format);
+                }}
+                className="w-full flex items-center justify-between gap-3 px-3 py-2 text-sm text-left text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] disabled:opacity-50 disabled:hover:bg-transparent disabled:cursor-not-allowed transition-colors"
+              >
+                <span>{item.label}</span>
+                {!item.ready && (
+                  <span className="text-xs text-[var(--color-text-muted)]">{item.hint}</span>
+                )}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/desktop/src/renderer/src/store.ts b/apps/desktop/src/renderer/src/store.ts
index d98d7b21..421650bc 100644
--- a/apps/desktop/src/renderer/src/store.ts
+++ b/apps/desktop/src/renderer/src/store.ts
@@ -5,7 +5,7 @@ import type {
   SupportedOnboardingProvider,
 } from '@open-codesign/shared';
 import { create } from 'zustand';
-import type { CodesignApi } from '../../preload/index';
+import type { CodesignApi, ExportFormat } from '../../preload/index';
 
 declare global {
   interface Window {
@@ -13,16 +13,31 @@ declare global {
   }
 }
 
+// TIER 1 / DEV ONLY. The renderer reads `VITE_OPEN_CODESIGN_DEV_KEY` so the
+// "first demo" path works before `wt/onboarding` lands real keychain plumbing.
+// Once onboarding ships, this constant + the !apiKey branch in sendPrompt go
+// away in the integration commit. Vite inlines `import.meta.env.*` at build
+// time, so a missing var resolves to `undefined`.
+const DEV_API_KEY: string =
+  (import.meta.env['VITE_OPEN_CODESIGN_DEV_KEY'] as string | undefined) ?? '';
+
 interface CodesignState {
   messages: ChatMessage[];
   previewHtml: string | null;
   isGenerating: boolean;
   errorMessage: string | null;
+<<<<<<< HEAD
   config: OnboardingState | null;
   configLoaded: boolean;
   loadConfig: () => Promise<void>;
   completeOnboarding: (next: OnboardingState) => void;
+||||||| parent of bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
+=======
+  toastMessage: string | null;
+>>>>>>> bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
   sendPrompt: (prompt: string) => Promise<void>;
+  exportActive: (format: ExportFormat) => Promise<void>;
+  dismissToast: () => void;
 }
 
 function modelRef(provider: SupportedOnboardingProvider, modelId: string): ModelRef {
@@ -34,6 +49,7 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
   previewHtml: null,
   isGenerating: false,
   errorMessage: null,
+<<<<<<< HEAD
   config: null,
   configLoaded: false,
 
@@ -52,6 +68,10 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
   completeOnboarding(next: OnboardingState) {
     set({ config: next });
   },
+||||||| parent of bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
+=======
+  toastMessage: null,
+>>>>>>> bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
 
   async sendPrompt(prompt: string) {
     if (get().isGenerating) return;
@@ -72,6 +92,44 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
       errorMessage: null,
     }));
 
+<<<<<<< HEAD
+||||||| parent of bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
+    // Tier 1 wiring: hardcoded provider/model and key-from-env until the
+    // onboarding flow lands. The real flow will read from the keychain.
+    const apiKey = '';
+    if (!apiKey) {
+      set((s) => ({
+        messages: [
+          ...s.messages,
+          {
+            role: 'assistant',
+            content:
+              'No API key configured yet. Onboarding flow coming in v0.1 — see docs/research/06-api-onboarding-ux.md.',
+          },
+        ],
+        isGenerating: false,
+      }));
+      return;
+    }
+
+=======
+    const apiKey = DEV_API_KEY;
+    if (!apiKey) {
+      set((s) => ({
+        messages: [
+          ...s.messages,
+          {
+            role: 'assistant',
+            content:
+              'No API key configured yet. Set VITE_OPEN_CODESIGN_DEV_KEY for dev, or wait for the onboarding flow (wt/onboarding) to land.',
+          },
+        ],
+        isGenerating: false,
+      }));
+      return;
+    }
+
+>>>>>>> bca116c (feat(core,exporters,desktop): end-to-end first demo + HTML export)
     try {
       const result = await window.codesign.generate({
         prompt,
@@ -94,4 +152,34 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
       }));
     }
   },
+
+  async exportActive(format: ExportFormat) {
+    const html = get().previewHtml;
+    if (!html) {
+      set({ toastMessage: 'No design to export yet.' });
+      return;
+    }
+    if (!window.codesign) {
+      set({ errorMessage: 'Renderer is not connected to the main process.' });
+      return;
+    }
+    try {
+      const stamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
+      const res = await window.codesign.export({
+        format,
+        htmlContent: html,
+        defaultFilename: `codesign-${stamp}.${format}`,
+      });
+      if (res.status === 'saved' && res.path) {
+        set({ toastMessage: `Exported to ${res.path}` });
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Unknown error';
+      set({ toastMessage: msg, errorMessage: msg });
+    }
+  },
+
+  dismissToast() {
+    set({ toastMessage: null });
+  },
 }));
diff --git a/examples/calm-spaces/README.md b/examples/calm-spaces/README.md
new file mode 100644
index 00000000..26112604
--- /dev/null
+++ b/examples/calm-spaces/README.md
@@ -0,0 +1,51 @@
+# Demo · Calm Spaces meditation app
+
+The "Calm Spaces" mobile prototype is the headline first demo for open-codesign,
+mirroring the marquee Claude Design example (see `docs/research/01-claude-design-teardown.md`).
+
+## What it generates
+
+A single self-contained HTML artifact rendering a phone-frame mockup of a
+meditation app home screen — meditation list, play button, soft greens/blues
+palette, and tunable design tokens via CSS custom properties on `:root`.
+
+## Run it
+
+```bash
+# 1. Provide a dev API key (Anthropic key works out of the box).
+export VITE_OPEN_CODESIGN_DEV_KEY=sk-ant-...
+
+# 2. Boot the desktop app from the repo root.
+pnpm install
+pnpm --filter @open-codesign/desktop dev
+```
+
+Then in the app:
+
+1. Click the **Calm Spaces meditation app** starter in the left sidebar.
+2. Press **Send** (or `Enter`).
+3. Within ~30 s the iframe on the right renders the design.
+4. Open the **Export** menu in the preview toolbar → choose **HTML** → pick a
+   destination → **Save**.
+5. `open <chosen-path>` in the browser shows the same design without the app.
+
+## Expected behaviour
+
+- The model emits exactly one `<artifact identifier="design-1" type="html" …>`
+  block. The orchestrator extracts it via `@open-codesign/artifacts` and feeds
+  the HTML into the sandbox iframe.
+- Tailwind is loaded via the official CDN (`https://cdn.tailwindcss.com`). The
+  HTML exporter inlines the CDN tag if the model forgot to.
+- All colors, spacing, and font sizes are CSS variables — that's what the slider
+  tier (Phase 2) will hook into.
+
+## Failure modes (loud, by design)
+
+- **No key** → assistant message tells you to set `VITE_OPEN_CODESIGN_DEV_KEY`.
+- **PDF / PPTX / ZIP export** → throws `CodesignError` with code
+  `EXPORTER_NOT_READY` and the toast reads "PDF export ships in Phase 2".
+- **Network / provider error** → propagates as a `CodesignError` with code
+  `PROVIDER_ERROR`; surfaced as the assistant's reply prefixed with `Error:`.
+
+There are deliberately no silent fallbacks anywhere in this path
+(see PRINCIPLES §10).
diff --git a/packages/core/package.json b/packages/core/package.json
index 8962c4fe..f30cc8a5 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -15,7 +15,8 @@
   "dependencies": {
     "@open-codesign/artifacts": "workspace:*",
     "@open-codesign/providers": "workspace:*",
-    "@open-codesign/shared": "workspace:*"
+    "@open-codesign/shared": "workspace:*",
+    "@open-codesign/templates": "workspace:*"
   },
   "devDependencies": {
     "typescript": "^5.7.2",
diff --git a/packages/core/src/generate.test.ts b/packages/core/src/generate.test.ts
new file mode 100644
index 00000000..ff09ba51
--- /dev/null
+++ b/packages/core/src/generate.test.ts
@@ -0,0 +1,84 @@
+import type { ChatMessage, ModelRef } from '@open-codesign/shared';
+import { CodesignError } from '@open-codesign/shared';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+const completeMock = vi.fn();
+
+vi.mock('@open-codesign/providers', () => ({
+  complete: (...args: unknown[]) => completeMock(...args),
+}));
+
+import { generate } from './index';
+
+const MODEL: ModelRef = { provider: 'anthropic', modelId: 'claude-sonnet-4-6' };
+
+const SAMPLE_HTML = `<!doctype html><html lang="en"><body><h1>Hi</h1></body></html>`;
+
+const RESPONSE = `Here is your design.
+
+<artifact identifier="design-1" type="html" title="Hello world">
+${SAMPLE_HTML}
+</artifact>`;
+
+afterEach(() => {
+  completeMock.mockReset();
+});
+
+describe('generate()', () => {
+  it('throws CodesignError on empty prompt', async () => {
+    await expect(
+      generate({ prompt: '   ', history: [], model: MODEL, apiKey: 'sk-test' }),
+    ).rejects.toBeInstanceOf(CodesignError);
+    expect(completeMock).not.toHaveBeenCalled();
+  });
+
+  it('extracts the artifact body and the surrounding text', async () => {
+    completeMock.mockResolvedValueOnce({
+      content: RESPONSE,
+      inputTokens: 12,
+      outputTokens: 34,
+      costUsd: 0.0001,
+    });
+
+    const result = await generate({
+      prompt: 'design a meditation app',
+      history: [],
+      model: MODEL,
+      apiKey: 'sk-test',
+    });
+
+    expect(result.artifacts).toHaveLength(1);
+    const first = result.artifacts[0];
+    if (!first) throw new Error('expected one artifact');
+    expect(first.id).toBe('design-1');
+    expect(first.type).toBe('html');
+    expect(first.content.trim()).toBe(SAMPLE_HTML);
+    expect(result.message).toContain('Here is your design.');
+    expect(result.inputTokens).toBe(12);
+    expect(result.outputTokens).toBe(34);
+    expect(result.costUsd).toBeCloseTo(0.0001);
+  });
+
+  it('passes the design-generator system prompt by default', async () => {
+    completeMock.mockResolvedValueOnce({
+      content: RESPONSE,
+      inputTokens: 0,
+      outputTokens: 0,
+      costUsd: 0,
+    });
+
+    await generate({
+      prompt: 'design a meditation app',
+      history: [],
+      model: MODEL,
+      apiKey: 'sk-test',
+    });
+
+    const messages = completeMock.mock.calls[0]?.[1] as ChatMessage[];
+    const system = messages[0];
+    if (!system) throw new Error('expected system message');
+    expect(system.role).toBe('system');
+    expect(system.content).toContain('open-codesign');
+    expect(system.content).toContain('artifact');
+  });
+});
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 5ed00cb7..931845b3 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,7 +1,8 @@
-import { createArtifactParser } from '@open-codesign/artifacts';
+import { type ArtifactEvent, createArtifactParser } from '@open-codesign/artifacts';
 import { complete } from '@open-codesign/providers';
 import type { Artifact, ChatMessage, ModelRef } from '@open-codesign/shared';
 import { CodesignError } from '@open-codesign/shared';
+import { SYSTEM_PROMPTS } from '@open-codesign/templates';
 
 export interface GenerateInput {
   prompt: string;
@@ -20,14 +21,27 @@ export interface GenerateOutput {
   costUsd: number;
 }
 
-const DEFAULT_SYSTEM_PROMPT = `You are a UI designer. When the user asks for a visual design, output a single self-contained HTML artifact wrapped in:
-
-<artifact identifier="design-1" type="html" title="Short title">
-<!doctype html>
-<html>...</html>
-</artifact>
+interface Collected {
+  text: string;
+  artifacts: Artifact[];
+}
 
-Use Tailwind via the CDN script <script src="https://cdn.tailwindcss.com"></script>. Use semantic HTML, modern aesthetics (warm neutrals, generous whitespace, subtle shadows). Use CSS custom properties for tunable values (colors, spacing, font sizes) so the user can tweak them later.`;
+function collect(events: Iterable<ArtifactEvent>, into: Collected): void {
+  for (const ev of events) {
+    if (ev.type === 'text') {
+      into.text += ev.delta;
+    } else if (ev.type === 'artifact:end') {
+      into.artifacts.push({
+        id: ev.identifier || `design-${into.artifacts.length + 1}`,
+        type: 'html',
+        title: 'Design',
+        content: ev.fullContent,
+        designParams: [],
+        createdAt: new Date().toISOString(),
+      });
+    }
+  }
+}
 
 /**
  * Generate one design artifact in response to a user prompt.
@@ -40,7 +54,7 @@ export async function generate(input: GenerateInput): Promise<GenerateOutput> {
   }
 
   const messages: ChatMessage[] = [
-    { role: 'system', content: input.systemPrompt ?? DEFAULT_SYSTEM_PROMPT },
+    { role: 'system', content: input.systemPrompt ?? SYSTEM_PROMPTS.designGenerator },
     ...input.history,
     { role: 'user', content: input.prompt },
   ];
@@ -51,39 +65,13 @@ export async function generate(input: GenerateInput): Promise<GenerateOutput> {
   });
 
   const parser = createArtifactParser();
-  const artifacts: Artifact[] = [];
-  let textBuffer = '';
-
-  for (const ev of parser.feed(result.content)) {
-    if (ev.type === 'text') textBuffer += ev.delta;
-    if (ev.type === 'artifact:end') {
-      artifacts.push({
-        id: ev.identifier || `design-${artifacts.length + 1}`,
-        type: 'html',
-        title: 'Design',
-        content: ev.fullContent,
-        designParams: [],
-        createdAt: new Date().toISOString(),
-      });
-    }
-  }
-  for (const ev of parser.flush()) {
-    if (ev.type === 'text') textBuffer += ev.delta;
-    if (ev.type === 'artifact:end') {
-      artifacts.push({
-        id: ev.identifier || `design-${artifacts.length + 1}`,
-        type: 'html',
-        title: 'Design',
-        content: ev.fullContent,
-        designParams: [],
-        createdAt: new Date().toISOString(),
-      });
-    }
-  }
+  const collected: Collected = { text: '', artifacts: [] };
+  collect(parser.feed(result.content), collected);
+  collect(parser.flush(), collected);
 
   return {
-    message: textBuffer.trim(),
-    artifacts,
+    message: collected.text.trim(),
+    artifacts: collected.artifacts,
     inputTokens: result.inputTokens,
     outputTokens: result.outputTokens,
     costUsd: result.costUsd,
diff --git a/packages/exporters/package.json b/packages/exporters/package.json
index f0ff262c..dd5bd560 100644
--- a/packages/exporters/package.json
+++ b/packages/exporters/package.json
@@ -7,6 +7,7 @@
   "types": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
+    "./html": "./src/html.ts",
     "./pdf": "./src/pdf.ts",
     "./pptx": "./src/pptx.ts",
     "./zip": "./src/zip.ts"
diff --git a/packages/exporters/src/html.ts b/packages/exporters/src/html.ts
new file mode 100644
index 00000000..01c0b3d6
--- /dev/null
+++ b/packages/exporters/src/html.ts
@@ -0,0 +1,163 @@
+import type { ExportResult } from './index';
+
+const TAILWIND_CDN = 'https://cdn.tailwindcss.com';
+const TAILWIND_TAG = `<script src="${TAILWIND_CDN}"></script>`;
+
+export interface ExportHtmlOptions {
+  /** Inject the Tailwind CDN script if missing. Defaults to true. */
+  injectTailwind?: boolean;
+  /** Prettify with two-space indentation. Defaults to true. */
+  prettify?: boolean;
+  /** Comment banner injected at the top of the file. */
+  bannerComment?: string;
+}
+
+/**
+ * Export an HTML artifact to disk as a single self-contained file.
+ *
+ * Tier 1 inlines what we can do without parsing the DOM: the Tailwind CDN
+ * tag, a doctype, a viewport meta, and a small comment banner. Anything that
+ * needs a real HTML parser (font subsetting, SVG inlining, JS bundling) waits
+ * for Tier 2 — and is loud about it: never silently skip work the caller
+ * believed we did.
+ */
+export async function exportHtml(
+  htmlContent: string,
+  destinationPath: string,
+  opts: ExportHtmlOptions = {},
+): Promise<ExportResult> {
+  const fs = await import('node:fs/promises');
+  const final = buildHtmlDocument(htmlContent, opts);
+  await fs.writeFile(destinationPath, final, 'utf8');
+  const stat = await fs.stat(destinationPath);
+  return { bytes: stat.size, path: destinationPath };
+}
+
+export function buildHtmlDocument(htmlContent: string, opts: ExportHtmlOptions = {}): string {
+  const injectTailwind = opts.injectTailwind ?? true;
+  const prettify = opts.prettify ?? true;
+  const banner =
+    opts.bannerComment ??
+    'Generated by open-codesign — https://github.com/OpenCoworkAI/open-codesign';
+
+  let out = ensureDocumentShell(htmlContent);
+  if (injectTailwind && !hasTailwindScript(out)) {
+    out = injectIntoHead(out, TAILWIND_TAG);
+  }
+  out = injectIntoHead(out, `<meta name="generator" content="open-codesign" />`);
+  out = `<!-- ${banner} -->\n${out}`;
+  if (prettify) out = prettifyHtml(out);
+  return out;
+}
+
+function ensureDocumentShell(html: string): string {
+  const trimmed = html.trim();
+  if (/^<!doctype/i.test(trimmed)) return trimmed;
+  if (/<html[\s>]/i.test(trimmed)) return `<!doctype html>\n${trimmed}`;
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>open-codesign export</title>
+</head>
+<body>
+${trimmed}
+</body>
+</html>`;
+}
+
+function hasTailwindScript(html: string): boolean {
+  return /cdn\.tailwindcss\.com/i.test(html);
+}
+
+function injectIntoHead(html: string, tag: string): string {
+  if (/<head[\s>]/i.test(html)) {
+    return html.replace(/<head([^>]*)>/i, (m) => `${m}\n  ${tag}`);
+  }
+  if (/<html[^>]*>/i.test(html)) {
+    return html.replace(/<html([^>]*)>/i, (m) => `${m}\n<head>\n  ${tag}\n</head>`);
+  }
+  return `${tag}\n${html}`;
+}
+
+/**
+ * Indentation-only prettifier. Splits inline tags onto fresh lines and
+ * reflows indentation. We deliberately avoid pulling in `prettier` /
+ * `js-beautify` (would blow the dep budget) — Tier 2 can swap this out.
+ */
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: HTML formatting is inherently branchy; refactoring would obscure the state machine
+function prettifyHtml(html: string): string {
+  const tokens = html.replace(/>\s+</g, '><').replace(/></g, '>\n<').split('\n');
+
+  const voidElements = new Set([
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr',
+  ]);
+  const inline = new Set(['script', 'style', 'pre', 'textarea']);
+
+  let depth = 0;
+  let inInline: string | null = null;
+  const lines: string[] = [];
+
+  for (const raw of tokens) {
+    const line = raw.trim();
+    if (!line) continue;
+
+    if (inInline) {
+      lines.push(line);
+      if (new RegExp(`</${inInline}\\s*>`, 'i').test(line)) {
+        inInline = null;
+        depth = Math.max(0, depth - 1);
+      }
+      continue;
+    }
+
+    const closing = /^<\//.test(line);
+    const selfClosing = /\/>\s*$/.test(line) || isVoidTag(line, voidElements);
+    const isComment = /^<!--/.test(line);
+    const isDoctype = /^<!doctype/i.test(line);
+
+    if (closing) depth = Math.max(0, depth - 1);
+
+    lines.push(`${'  '.repeat(depth)}${line}`);
+
+    const tagName = openTagName(line);
+    if (tagName && inline.has(tagName) && !selfClosing) {
+      const sameLine = new RegExp(`</${tagName}\\s*>`, 'i').test(line);
+      if (!sameLine) {
+        inInline = tagName;
+        depth += 1;
+      }
+      continue;
+    }
+
+    if (!closing && !selfClosing && !isComment && !isDoctype && tagName) {
+      depth += 1;
+    }
+  }
+
+  return `${lines.join('\n')}\n`;
+}
+
+function openTagName(line: string): string | null {
+  const m = /^<([a-zA-Z][a-zA-Z0-9-]*)/.exec(line);
+  return m ? (m[1] as string).toLowerCase() : null;
+}
+
+function isVoidTag(line: string, voids: Set<string>): boolean {
+  const name = openTagName(line);
+  return name !== null && voids.has(name);
+}
diff --git a/packages/exporters/src/index.ts b/packages/exporters/src/index.ts
index 5b08ec51..6dd95932 100644
--- a/packages/exporters/src/index.ts
+++ b/packages/exporters/src/index.ts
@@ -1,11 +1,13 @@
 /**
- * Exporter entry point — each format lives in its own subpath export and
- * MUST be imported via dynamic import() to keep the cold-start bundle lean.
+ * Exporter entry point. Each format lives in its own subpath export and is
+ * loaded lazily so the cold-start bundle stays lean (PRINCIPLES §1).
  *
- * Tier 1: not implemented yet. Stub re-exports so the desktop app can wire
- * the menu items that surface "coming soon" UI.
+ * Tier 1 ships HTML. PDF / PPTX / ZIP throw `CodesignError` with code
+ * `EXPORTER_NOT_READY` — never silently succeed (PRINCIPLES §10).
  */
 
+import { CodesignError } from '@open-codesign/shared';
+
 export const EXPORTER_FORMATS = ['html', 'pdf', 'pptx', 'zip'] as const;
 export type ExporterFormat = (typeof EXPORTER_FORMATS)[number];
 
@@ -23,16 +25,36 @@ export function isExporterReady(format: ExporterFormat): boolean {
   return format === 'html';
 }
 
-/**
- * Export a single HTML artifact to disk. Tier 1: writes the raw HTML.
- * Tier 2 will inline external assets, embed fonts, run optimization.
- */
+export type { ExportHtmlOptions } from './html';
+
 export async function exportHtml(
   htmlContent: string,
   destinationPath: string,
+  opts?: import('./html').ExportHtmlOptions,
+): Promise<ExportResult> {
+  const mod = await import('./html');
+  return mod.exportHtml(htmlContent, destinationPath, opts);
+}
+
+export async function exportArtifact(
+  format: ExporterFormat,
+  htmlContent: string,
+  destinationPath: string,
 ): Promise<ExportResult> {
-  const fs = await import('node:fs/promises');
-  await fs.writeFile(destinationPath, htmlContent, 'utf8');
-  const stat = await fs.stat(destinationPath);
-  return { bytes: stat.size, path: destinationPath };
+  if (format === 'html') {
+    return exportHtml(htmlContent, destinationPath);
+  }
+  if (format === 'pdf') {
+    const mod = await import('./pdf');
+    return mod.exportPdf();
+  }
+  if (format === 'pptx') {
+    const mod = await import('./pptx');
+    return mod.exportPptx();
+  }
+  if (format === 'zip') {
+    const mod = await import('./zip');
+    return mod.exportZip();
+  }
+  throw new CodesignError(`Unknown exporter format: ${format as string}`, 'EXPORTER_UNKNOWN');
 }
diff --git a/packages/exporters/src/pdf.ts b/packages/exporters/src/pdf.ts
new file mode 100644
index 00000000..2982f63f
--- /dev/null
+++ b/packages/exporters/src/pdf.ts
@@ -0,0 +1,9 @@
+import { CodesignError } from '@open-codesign/shared';
+
+/**
+ * Tier 2 — Chromium print-to-PDF via Electron's offscreen `webContents`.
+ * Throws loudly so callers cannot mistake "not yet shipped" for "succeeded silently".
+ */
+export async function exportPdf(): Promise<never> {
+  throw new CodesignError('PDF export ships in Phase 2', 'EXPORTER_NOT_READY');
+}
diff --git a/packages/exporters/src/pptx.ts b/packages/exporters/src/pptx.ts
new file mode 100644
index 00000000..1bead260
--- /dev/null
+++ b/packages/exporters/src/pptx.ts
@@ -0,0 +1,9 @@
+import { CodesignError } from '@open-codesign/shared';
+
+/**
+ * Tier 2 — wired through `dom-to-pptx` once research/04 is implemented.
+ * Throws loudly so callers cannot mistake "not yet shipped" for "succeeded silently".
+ */
+export async function exportPptx(): Promise<never> {
+  throw new CodesignError('PPTX export ships in Phase 2', 'EXPORTER_NOT_READY');
+}
diff --git a/packages/exporters/src/zip.ts b/packages/exporters/src/zip.ts
new file mode 100644
index 00000000..11c3b0fb
--- /dev/null
+++ b/packages/exporters/src/zip.ts
@@ -0,0 +1,9 @@
+import { CodesignError } from '@open-codesign/shared';
+
+/**
+ * Tier 2 — bundle artifact + assets + README into a portable ZIP.
+ * Throws loudly so callers cannot mistake "not yet shipped" for "succeeded silently".
+ */
+export async function exportZip(): Promise<never> {
+  throw new CodesignError('ZIP export ships in Phase 2', 'EXPORTER_NOT_READY');
+}
diff --git a/packages/templates/src/index.ts b/packages/templates/src/index.ts
index e9469a34..7909cf79 100644
--- a/packages/templates/src/index.ts
+++ b/packages/templates/src/index.ts
@@ -3,6 +3,8 @@
  * we committed to replicate (see docs/VISION.md).
  */
 
+export { SYSTEM_PROMPTS, type SystemPromptId } from './system/index';
+
 export interface DemoTemplate {
   id: string;
   title: string;
diff --git a/packages/templates/src/system/design-generator.md b/packages/templates/src/system/design-generator.md
new file mode 100644
index 00000000..4083a5ac
--- /dev/null
+++ b/packages/templates/src/system/design-generator.md
@@ -0,0 +1,78 @@
+# Design generator system prompt
+
+Canonical, human-readable copy of the system prompt used by `@open-codesign/core`
+to drive `designGenerator`. The TypeScript constant in `./index.ts` MUST stay
+byte-for-byte in sync with the prose below; tests assert this. Keeping the prompt
+in Markdown lets reviewers diff prompt changes without scanning a quoted string.
+
+---
+
+You are **open-codesign**, an AI design partner. The user describes a thing they
+want to look at — a landing page, a mobile screen, a one-page case study, a slide
+deck — and you respond with a single, self-contained, production-quality HTML
+artifact they can export and ship.
+
+## Output contract
+
+Wrap the entire HTML document in exactly one artifact tag. Nothing else may
+appear inside the tag, and no second artifact may follow.
+
+```
+<artifact identifier="design-1" type="html" title="Short descriptive title">
+<!doctype html>
+<html lang="en">
+  ... the design ...
+</html>
+</artifact>
+```
+
+Outside the artifact tag you may write at most one short paragraph (≤ 2
+sentences) describing what you produced. Never narrate the HTML — the user can
+see it.
+
+## Construction rules
+
+1. **Single shot, single file.** No external CSS, no external JS, no `<link>` to
+   custom stylesheets. The only permitted external script is Tailwind from the
+   official CDN: `<script src="https://cdn.tailwindcss.com"></script>`. The only
+   permitted external font source is `fonts.googleapis.com`.
+2. **Tailwind is the styling engine.** Compose with utility classes; reach for
+   inline `<style>` only for `:root` custom properties and the handful of rules
+   Tailwind utilities cannot express cleanly (keyframes, complex selectors).
+3. **Tunable design tokens.** Every load-bearing value — primary color, accent
+   color, surface, text, base radius, base font size, spacing scale — MUST be a
+   CSS custom property declared on `:root`. Use these variables inside Tailwind
+   via the arbitrary-value syntax (`bg-[var(--color-accent)]`). This is what
+   makes the slider tier work later; bake it in from day one.
+4. **Semantic HTML.** `<header>`, `<main>`, `<section>`, `<article>`, `<nav>`,
+   `<footer>` where appropriate. Headings in correct order. Images have `alt`
+   text. Buttons are `<button>`, links are `<a>`.
+5. **Responsive by default.** Mobile-first; layout adapts at `sm`, `md`, `lg`.
+   Use CSS grid or flex — never absolute positioning for layout.
+6. **Modern aesthetic.** Generous whitespace, restrained color palette
+   (neutrals + one or two accents), confident typography hierarchy, soft
+   shadows, subtle motion only where it earns its keep. Never use the default
+   Tailwind blue. Pick a palette that fits the brief.
+7. **Real content.** No `lorem ipsum`. Write copy that fits the product the
+   user described — short, specific, on-brand. Use realistic names, numbers,
+   and dates.
+8. **Accessibility.** Color contrast meets WCAG AA. Interactive elements are
+   reachable by keyboard. Decorative SVGs get `aria-hidden="true"`.
+9. **No external assets you can't guarantee.** Inline SVGs for icons; never
+   `<img src="https://…/photo.jpg">`. If you need a hero image, render an
+   abstract SVG composition or a CSS gradient block.
+10. **Self-contained mockup.** The artifact is a finished design surface, not a
+    working app. Don't wire up routes, fetch data, or include build tooling.
+
+## Failure modes to avoid
+
+- Multi-file output, ZIP descriptions, or "see attached".
+- Asking the user clarifying questions before producing anything. If the brief
+  is ambiguous, make a confident choice and note the assumption in the
+  one-paragraph summary.
+- Wrapping the HTML in Markdown code fences instead of the artifact tag.
+- Emitting more than one artifact.
+- Referencing files or images that don't exist.
+
+When the user follows up to tweak the design, regenerate the full artifact —
+the artifact is the canonical state.
diff --git a/packages/templates/src/system/index.ts b/packages/templates/src/system/index.ts
new file mode 100644
index 00000000..afd4ac9e
--- /dev/null
+++ b/packages/templates/src/system/index.ts
@@ -0,0 +1,54 @@
+/**
+ * System prompts shipped with open-codesign.
+ *
+ * Each prompt is exported both as a TypeScript constant (for runtime use) and
+ * mirrored in a sibling `.md` file (for human review in PR diffs). The string
+ * below MUST stay in sync with `./design-generator.md`.
+ *
+ * We embed the prompt as a TS constant rather than `?raw` importing the .md so
+ * Tier 1 packages don't depend on Vite's raw loader.
+ */
+
+const designGenerator = `You are open-codesign, an AI design partner. The user describes a thing they want to look at — a landing page, a mobile screen, a one-page case study, a slide deck — and you respond with a single, self-contained, production-quality HTML artifact they can export and ship.
+
+# Output contract
+
+Wrap the entire HTML document in exactly one artifact tag. Nothing else may appear inside the tag, and no second artifact may follow.
+
+<artifact identifier="design-1" type="html" title="Short descriptive title">
+<!doctype html>
+<html lang="en">
+  ... the design ...
+</html>
+</artifact>
+
+Outside the artifact tag you may write at most one short paragraph (≤ 2 sentences) describing what you produced. Never narrate the HTML — the user can see it.
+
+# Construction rules
+
+1. Single shot, single file. No external CSS, no external JS, no <link> to custom stylesheets. The only permitted external script is Tailwind from the official CDN: <script src="https://cdn.tailwindcss.com"></script>. The only permitted external font source is fonts.googleapis.com.
+2. Tailwind is the styling engine. Compose with utility classes; reach for inline <style> only for :root custom properties and the handful of rules Tailwind utilities cannot express cleanly (keyframes, complex selectors).
+3. Tunable design tokens. Every load-bearing value — primary color, accent color, surface, text, base radius, base font size, spacing scale — MUST be a CSS custom property declared on :root. Use these variables inside Tailwind via the arbitrary-value syntax (bg-[var(--color-accent)]). This is what makes the slider tier work later; bake it in from day one.
+4. Semantic HTML. <header>, <main>, <section>, <article>, <nav>, <footer> where appropriate. Headings in correct order. Images have alt text. Buttons are <button>, links are <a>.
+5. Responsive by default. Mobile-first; layout adapts at sm, md, lg. Use CSS grid or flex — never absolute positioning for layout.
+6. Modern aesthetic. Generous whitespace, restrained color palette (neutrals + one or two accents), confident typography hierarchy, soft shadows, subtle motion only where it earns its keep. Never use the default Tailwind blue. Pick a palette that fits the brief.
+7. Real content. No lorem ipsum. Write copy that fits the product the user described — short, specific, on-brand. Use realistic names, numbers, and dates.
+8. Accessibility. Color contrast meets WCAG AA. Interactive elements are reachable by keyboard. Decorative SVGs get aria-hidden="true".
+9. No external assets you can't guarantee. Inline SVGs for icons; never <img src="https://…/photo.jpg">. If you need a hero image, render an abstract SVG composition or a CSS gradient block.
+10. Self-contained mockup. The artifact is a finished design surface, not a working app. Don't wire up routes, fetch data, or include build tooling.
+
+# Failure modes to avoid
+
+- Multi-file output, ZIP descriptions, or "see attached".
+- Asking the user clarifying questions before producing anything. If the brief is ambiguous, make a confident choice and note the assumption in the one-paragraph summary.
+- Wrapping the HTML in Markdown code fences instead of the artifact tag.
+- Emitting more than one artifact.
+- Referencing files or images that don't exist.
+
+When the user follows up to tweak the design, regenerate the full artifact — the artifact is the canonical state.`;
+
+export const SYSTEM_PROMPTS = {
+  designGenerator,
+} as const;
+
+export type SystemPromptId = keyof typeof SYSTEM_PROMPTS;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d98e3b3d..39facade 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
       '@open-codesign/core':
         specifier: workspace:*
         version: link:../../packages/core
+      '@open-codesign/exporters':
+        specifier: workspace:*
+        version: link:../../packages/exporters
       '@open-codesign/providers':
         specifier: workspace:*
         version: link:../../packages/providers
@@ -130,6 +133,9 @@ importers:
       '@open-codesign/shared':
         specifier: workspace:*
         version: link:../shared
+      '@open-codesign/templates':
+        specifier: workspace:*
+        version: link:../templates
     devDependencies:
       typescript:
         specifier: ^5.7.2