/* ============================================================ SPAZIO — Forms & AI brief generator IntakeForm (form → AI brief → result) · SubscribeForm Field names are automation-ready: Make / Airtable / email ============================================================ */ const PROJECT_TYPES = ["Brand Identity", "Website", "Digital Product", "Creative Direction", "Marketing System", "Not sure yet"]; const TIMELINES = ["ASAP", "1–2 months", "3–6 months", "Just exploring"]; const BUDGETS = ["$2k–$5k", "$5k–$10k", "$10k–$25k", "$25k–$50k", "$50k+", "Prefer to discuss"]; const STAGE_CTX = ["Launching something new", "Full revamp", "Enhancing what we have"]; const validEmail = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); /* Pull JSON out of a model response that may be fenced or chatty */ function extractJSON(text) { if (!text) return null; let t = String(text).trim().replace(/^```(?:json)?/i, "").replace(/```$/,"").trim(); const a = t.indexOf("{"), b = t.lastIndexOf("}"); if (a === -1 || b === -1) return null; try { return JSON.parse(t.slice(a, b + 1)); } catch { return null; } } async function generateBrief(f, inspo) { const links = (inspo && inspo.links) || []; const images = (inspo && inspo.images) || []; let inspoBlock = ""; if (links.length || images.length) { inspoBlock = ` Inspiration / references the client provided. Interpret the visual intent — do NOT copy or recreate these. Read tone, typography direction, layout structure, visual density, and color mood, and let them sharpen (not replace) your direction.`; if (links.length) inspoBlock += ` - Links: ${links.join(", ")}`; if (images.length) inspoBlock += ` - ${images.length} image(s): ` + images.map((im) => `${im.name}${im.colors && im.colors.length ? ` (dominant colors ${im.colors.join(", ")})` : ""}`).join("; "); } const prompt = `You are a senior creative director at Spazio, a high-end digital design agency. You are not a summarizer or a chatbot. You interpret client intent, identify positioning and perception gaps, and reframe the problem with strong, opinionated taste. When the client shares references, you read visual intent and translate it into structured direction — never copying. Humans still make every final creative decision — your job is to elevate the client's thinking, not mirror it. Client intake - Name: ${f.name} - Company: ${f.company} - Stage / context: ${f.context || "not specified"} - Project type(s): ${f.types.join(", ") || "not specified"} - In their words: ${f.brief} - Timeline: ${f.timeline || "not specified"} - Budget: ${f.budget || "not specified"}${inspoBlock} Interpret the underlying business problem — do not restate inputs. Commit to a SINGLE strong direction. No multiple weak options, no generic "modern and clean" language, no SaaS/product clichés, no filler. Be confident, concise, and design-led. Return ONLY valid JSON (no prose, no markdown) in exactly this shape: { "summary": "1-3 sentence strategic overview", "core_problem": "the real underlying issue, not a restatement of their words", "strategic_reframe": "reframe the project into its true strategic intent (e.g. 'This is not a redesign — it is a repositioning exercise to elevate perceived value.')", "recommended_service": "one of: Brand Identity, Web & Digital Product, Creative Direction, Marketing Design System", "creative_direction": { "concept": "a single strong concept line with a clear point of view", "tone": "3-5 short descriptors", "visual_language": "1-2 sentence design direction" }, "inspiration_analysis": { "interpreted_style": "how you read their references", "visual_patterns": ["3-4 concrete patterns — typography, layout, density, color mood"], "tone_mood": "the mood the references signal", "design_implications": "how this sharpens the direction, without copying" }, "risks_or_mistakes_to_avoid": ["3-4 opinionated risks that would weaken this project"], "key_considerations": ["3-4 short considerations"], "timeline": "a short phased timeline estimate", "next_steps": ["3-4 practical, execution-oriented steps"] } If no inspiration/references were provided, set "inspiration_analysis" to null.`; const raw = await window.claude.complete(prompt); return extractJSON(raw); } /* Extract a small dominant-color palette from an image (client-side signal for the model) */ function extractPalette(dataUrl) { return new Promise((resolve) => { const img = new Image(); img.onload = () => { try { const s = 24; const c = document.createElement("canvas"); c.width = s; c.height = s; const ctx = c.getContext("2d"); ctx.drawImage(img, 0, 0, s, s); const data = ctx.getImageData(0, 0, s, s).data; const buckets = {}; for (let i = 0; i < data.length; i += 4) { if (data[i + 3] < 125) continue; const r = Math.round(data[i] / 36) * 36, g = Math.round(data[i + 1] / 36) * 36, b = Math.round(data[i + 2] / 36) * 36; const k = `${r},${g},${b}`; buckets[k] = (buckets[k] || 0) + 1; } const top = Object.entries(buckets).sort((a, b) => b[1] - a[1]).slice(0, 4).map(([k]) => { const [r, g, b] = k.split(",").map(Number); return "#" + [r, g, b].map((x) => Math.min(255, x).toString(16).padStart(2, "0")).join(""); }); resolve(top); } catch { resolve([]); } }; img.onerror = () => resolve([]); img.src = dataUrl; }); } const prettyHost = (url) => { try { return new URL(url).hostname.replace(/^www\./, ""); } catch { return url; } }; /* ---------------- INSPIRATION FIELD ---------------- */ function InspirationField({ value, onChange }) { const { images, links } = value; const [drag, setDrag] = useState(false); const [draft, setDraft] = useState(""); const inputRef = useRef(null); const addFiles = async (fileList) => { const files = [...fileList].filter((file) => file.type.startsWith("image/")).slice(0, 6 - images.length); const read = await Promise.all(files.map((file) => new Promise((res) => { const r = new FileReader(); r.onload = async () => { const colors = await extractPalette(r.result); res({ name: file.name, dataUrl: r.result, colors }); }; r.onerror = () => res(null); r.readAsDataURL(file); }))); onChange({ ...value, images: [...images, ...read.filter(Boolean)] }); }; const addLink = () => { const v = draft.trim(); if (!v) return; const url = /^https?:\/\//i.test(v) ? v : "https://" + v; onChange({ ...value, links: [...links, url] }); setDraft(""); }; const removeImage = (i) => onChange({ ...value, images: images.filter((_, x) => x !== i) }); const removeLink = (i) => onChange({ ...value, links: links.filter((_, x) => x !== i) }); return (

Drop images or paste links — Pinterest, Behance, Dribbble, a site you admire. We interpret the intent and translate it into direction. We never copy.

{ e.preventDefault(); setDrag(true); }} onDragLeave={() => setDrag(false)} onDrop={(e) => { e.preventDefault(); setDrag(false); addFiles(e.dataTransfer.files); }} onClick={() => inputRef.current && inputRef.current.click()} style={{ border: `1.5px dashed ${drag ? "var(--accent)" : "var(--line-2)"}`, background: drag ? "var(--accent-soft)" : "var(--surface-2)", borderRadius: 10, padding: "26px 20px", textAlign: "center", cursor: "pointer", transition: "border-color .25s var(--ease), background .25s var(--ease)", }} > addFiles(e.target.files)} />

Drag & drop images, or browse

PNG · JPG · up to 6

{images.length > 0 && (
{images.map((im, i) => (
{im.name} {im.colors && im.colors.length > 0 && (
{im.colors.map((c, k) => )}
)}
))}
)}
setDraft(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); addLink(); } }} />
{links.length > 0 && (
{links.map((l, i) => ( {prettyHost(l)} ))}
)}
); } /* ---------------- INTAKE FORM ---------------- */ function IntakeForm() { const [f, setF] = useState({ name: "", company: "", email: "", context: "", types: [], brief: "", timeline: "", budget: "" }); const [inspo, setInspo] = useState({ images: [], links: [] }); const [errors, setErrors] = useState({}); const [phase, setPhase] = useState("form"); // form | loading | result const [brief, setBrief] = useState(null); const [aiError, setAiError] = useState(false); const [sent, setSent] = useState(false); const set = (k, v) => { setF((s) => ({ ...s, [k]: v })); setErrors((e) => ({ ...e, [k]: null })); }; const toggleType = (t) => setF((s) => ({ ...s, types: s.types.includes(t) ? s.types.filter((x) => x !== t) : [...s.types, t] })); const validate = () => { const e = {}; if (!f.name.trim()) e.name = "Your name, please"; if (!f.company.trim()) e.company = "What's the company called?"; if (!validEmail(f.email)) e.email = "A valid email so we can reply"; if (!f.types.length) e.types = "Pick at least one"; if (f.brief.trim().length < 12) e.brief = "A sentence or two helps a lot"; if (!f.timeline) e.timeline = "Roughly when?"; setErrors(e); return Object.keys(e).length === 0; }; const submit = async (ev) => { ev.preventDefault(); if (!validate()) return; setPhase("loading"); setAiError(false); // In production this POSTs to /api/brief (Next.js). In this prototype we call Claude directly. try { let result = null; if (window.claude && window.claude.complete) result = await generateBrief(f, inspo); if (!result) throw new Error("no result"); setBrief(result); setPhase("result"); } catch (err) { setAiError(true); setPhase("result"); } }; const reset = () => { setPhase("form"); setBrief(null); setAiError(false); setSent(false); }; if (phase === "loading") return ; if (phase === "result") return setSent(true)} onEdit={reset} />; const fieldErr = (k) => errors[k] && {errors[k]}; return (
Project intake Form → AI brief → human reply
set("name", e.target.value)} placeholder="Jane Founder" /> {fieldErr("name")}
set("company", e.target.value)} placeholder="Acme Inc." /> {fieldErr("company")}
set("email", e.target.value)} placeholder="you@company.com" /> {fieldErr("email")}
{STAGE_CTX.map((c) => ( ))}
{PROJECT_TYPES.map((t) => ( ))}
{fieldErr("types")}