Brandforge — Design skill for Claude Code


BrandForge

IAS Build 022 — BrandDeck Generator

A light-mode, multi-step form for people who own a logo but have never written a brand guide. It extracts a palette from the uploaded logo, walks the user through clearspace, type, iconography, and button style in plain language, then **deterministically** generates two files:

• CLAUDE.md — brand rules a Claude Code project reads automatically as constraints.
• brand-guide.html — a self-contained Tailwind brand guide (light mode).

Both are emailed on submit (Resend), the email is upserted to HubSpot by email, and the submission can be forwarded to n8n. No design knowledge assumed on the user's side.

Architecture

Layer	Tech	Responsibility
Presentation	Next.js 14 (App Router) on Vercel	Multi-step form, shared header/footer, security pages
Logic	lib/brand-logic.ts (deterministic)	Palette roles, clearspace, type scale, contrast — NO LLM
Orchestration	n8n (optional) + lib/integrations.ts	Delivery seam, demo-mode fallback
Data	HubSpot Free	Contact upsert-by-email (idProperty: email)
Email	Resend	Two-file delivery with install instructions

The deterministic engine is why the teaching is honest: every rule the form claims to handle for the user is encoded logic, and where a rule can't be satisfied (e.g. an accent color failing WCAG AA), the output surfaces a visible TODO chip rather than silently "fixing" the brand.

Shared header/footer

`components/SiteHeader.tsx` and `components/SiteFooter.tsx` wrap every route via `app/layout.tsx`. The header carries the IAS logo mark; the footer carries the wordmark plus the **security links** (Privacy, Terms, Security), which resolve to real routes in `app/privacy`, `app/terms`, and `app/security`.

Local development

npm install
cp .env.example .env.local   # optional — leave blank for demo mode
npm run dev

Deploy