13 KiB
13 KiB
| phase | plan | type | wave | depends_on | files_modified | autonomous | requirements | must_haves | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 43-documents-branding | 02 | execute | 2 |
|
|
true |
|
|
Purpose: Enable full brand identity generation from a single conversation — produces logo, avatars, social platform images, email signature, letterhead, guidelines PDF, and a downloadable ZIP of everything. Output: Working brand-renderer.ts with job-runner wiring and tests.
<execution_context> @$HOME/.claude/get-shit-done/workflows/execute-plan.md @$HOME/.claude/get-shit-done/templates/summary.md </execution_context>
@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/43-documents-branding/43-RESEARCH.md @.planning/phases/43-documents-branding/43-01-SUMMARY.md@server/src/services/renderers/types.ts @server/src/services/content-job-runner.ts @server/src/services/renderers/diagram-renderer.ts @server/src/services/renderers/icon-renderer.ts @server/src/services/puter-inference.ts
From server/src/services/renderers/types.ts (after Plan 01):
export interface BrandKitBundle {
type: "brand-kit-bundle";
spec: { name: string; tagline: string; primaryColor: string; secondaryColor: string; fontStyle: string; industry: string; };
logoSvgBase64: string;
avatarPngs: Record<string, string>; // "512"|"256"|"128"|"64"|"32" -> base64
socialImages: Record<string, string>; // "twitter-profile"|"twitter-banner"|"linkedin-profile"|"linkedin-banner"|"instagram-profile" -> base64
signatureHtml: string;
letterheadHtml: string;
guidelinesPdfBase64: string;
zipBase64: string;
}
export interface RenderResult { filename: string; contentType: string; buffer: Buffer; }
From server/src/services/renderers/diagram-renderer.ts:
export function resolveBrowserPath(): string;
From server/src/services/renderers/icon-renderer.ts:
export function validateAndCleanSvg(raw: string): { svg: string; warnings: string[] };
From server/src/services/puter-inference.ts:
export async function puterChatComplete(messages: ChatMessage[], model?: string): Promise<string>;
From server/src/services/renderers/wallpaper-renderer.ts:
export const PLATFORM_DIMENSIONS: Record<string, { width: number; height: number }>;
// Includes twitter-profile (400x400), twitter-banner (1500x500), linkedin-profile (400x400), linkedin-banner (1584x396), instagram-1080 (1080x1080)
**BrandSpec interface** (local, not exported — matches BrandKitBundle.spec shape):
```typescript
interface BrandSpec {
name: string; tagline: string; primaryColor: string; secondaryColor: string;
fontStyle: string; industry: string; logoDescription: string;
}
```
**extractBrandSpec(prompt)** — LLM call with system prompt instructing JSON output with the BrandSpec fields. Parse JSON from response (strip markdown fences first). If parsing fails, provide sensible defaults.
**generateLogoSvg(spec)** — LLM call asking for a simple, clean SVG logo mark based on spec.logoDescription, spec.primaryColor, spec.secondaryColor. System prompt: "Output ONLY valid SVG. No text explanations. Simple geometric shapes. viewBox 0 0 512 512. Use only the provided colors." Clean output with validateAndCleanSvg from icon-renderer.
**rasterizeAvatars(logoSvg)** — Use sharp to resize the SVG to [512, 256, 128, 64, 32]px PNG. Return Record<string, string> mapping size to base64. Use `sharp(Buffer.from(logoSvg)).resize(size, size).png().toBuffer()` for each size.
**generateSocialImages(spec, logoSvg)** — For each of 5 platforms (twitter-profile 400x400, twitter-banner 1500x500, linkedin-profile 400x400, linkedin-banner 1584x396, instagram-profile 1080x1080): create an SVG template with brand-colored background + centered logo, rasterize with sharp to the target dimensions. Return Record<string, string>.
**generateTemplates(spec)** — Two LLM calls:
1. Email signature HTML — system prompt: "Generate a professional HTML email signature with name, tagline, colors. Inline CSS only. No external resources. Keep under 200 lines."
2. Letterhead HTML — system prompt: "Generate a professional HTML letterhead template with header, footer, placeholder body. Inline CSS only. No external resources."
Strip markdown fences from both.
**generateGuidelinesPdf(spec, logoSvg)** — LLM generates a brand guidelines HTML page (system prompt: "Generate a brand guidelines document as HTML. Include: brand name, tagline, color palette with hex codes, typography guidance, logo usage rules, spacing guidelines. Inline CSS only. No external resources. Use web-safe fonts."). Render to PDF via Playwright (same pattern as pdf-renderer: resolveBrowserPath, chromium.launch, page.setContent, page.pdf A4). Return Buffer.
**buildZip(assets)** — Use archiver v7 to create an in-memory ZIP buffer with folder structure:
```
brand-kit/logo/logo.svg
brand-kit/logo/logo-512.png, logo-256.png, logo-128.png, logo-64.png, logo-32.png
brand-kit/social/twitter-profile.png, twitter-banner.png, linkedin-profile.png, linkedin-banner.png, instagram-profile.png
brand-kit/templates/email-signature.html, letterhead.html
brand-kit/guidelines.pdf
```
Use the streaming pattern from RESEARCH.md Pattern 3: Writable sink, archive.pipe(sink), archive.append(buffer, { name }), archive.finalize(), resolve on sink finish.
**renderBrandKit(input)** — Main exported function. Extract `prompt` from input. Call extractBrandSpec, generateLogoSvg, rasterizeAvatars, generateSocialImages, generateTemplates, generateGuidelinesPdf, buildZip in sequence. Assemble BrandKitBundle. Return RenderResult.
CRITICAL constraints:
- Open Playwright browser ONCE for the entire brand kit job (guidelines PDF), not per sub-step
- Use try/finally to close browser
- Social image SVGs are simple templates (colored rect + embedded logo), NOT LLM-generated — keeps them fast and predictable
- All base64 encoding via Buffer.from(x).toString("base64")
Create server/src/__tests__/brand-renderer.test.ts:
- vi.mock("playwright-core") — same pattern as pdf-renderer tests
- vi.mock("../services/puter-inference.js") — mock puterChatComplete to return different responses based on system prompt content (JSON for spec, SVG for logo, HTML for templates/guidelines)
- vi.mock("../services/renderers/diagram-renderer.js") — resolveBrowserPath returns "/fake/chromium"
- vi.mock("../services/renderers/icon-renderer.js") — validateAndCleanSvg returns { svg: input, warnings: [] }
- vi.mock("sharp") — mock sharp() chain: resize().png().toBuffer() returns a small Buffer
- vi.mock("archiver") — mock archiver() to return an object with append, pipe, finalize, on("error") that triggers the sink finish event
- Write tests per behavior section
```typescript
case "brand-kit": {
const { renderBrandKit } = await import("./renderers/brand-renderer.js");
return renderBrandKit(input);
}
```
Follow exact pattern of existing cases (dynamic import with .js extension, destructured named export).
<success_criteria>
- Brand renderer orchestrates 7 sub-steps: spec extraction, logo SVG, avatar rasterization, social images, templates, guidelines PDF, ZIP
- All BrandKitBundle fields populated with non-empty values
- ZIP contains correct folder structure with all assets
- Job runner dispatches brand-kit jobs correctly
- All tests pass, TypeScript clean </success_criteria>