# Brand Setup > Onboard a new brand — configure API keys, connect integrations, analyze website, generate brand context files - Skill: `fivebucksventures/brand-setup` (Agent Skill) - Install (CLI): `npx skillmds@latest add fivebucksventures/brand-setup` - Raw SKILL.md: https://api.skillmd.com/api/skills/fivebucksventures/brand-setup/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Integrations & APIs - Author: fivebucksventures (https://skillmd.com/u/fivebucksventures) - Updated: 2026-08-19 - Page: https://skillmd.com/skills/fivebucksventures/brand-setup --- ## Maintenance | Agent | Version | Last Changed | |---|---|---| | Link | v2.20.0 | July 12, 2026 | **Description:** Onboard a new brand — configure API keys, connect integrations, analyze website, generate brand context files ### Change Log **v2.20.0** — July 12, 2026 - **fb.ai API key is now project-scoped across 10 capabilities.** Repointed all 5 key-generation links to the new API Keys page (`/dashboard/api-keys`, reached from the profile menu; the old `/dashboard/social-posts/api-keys` still 308-redirects) and added a scope-checkbox section at the point of generation: all 10 boxes are ticked by default and should be left that way; `social_posts` is the minimum for every skill shipping today; unticking a box makes those tools return `auth/insufficient-scope`. Also documents the new key expiry (defaults to 90 days) and reframes the key — it is no longer "social templates", it unlocks SEO research, article generation, publishing, site audits, traffic monitoring and cold-email lead gen. **v2.19.0** — July 03, 2026 - **Corrected Zernio ad-account discovery tool name (fixes the v2.18.0 migration bug).** v2.18.0 assumed Zernio just drops the `late_` prefix, but Zernio's tools are resource-prefixed. The Step 7 Step D / Step 8 ad-account probes now call **`ads_list_ad_accounts`** (was `list_ad_accounts`), and the two-ID docs reference **`ad_campaigns_get_ads_timeline`** / **`ad_campaigns_list_ad_campaigns`**. `profiles_list` / `accounts_list` were already correct. **v2.18.0** — July 01, 2026 - **Zernio + DataforSEO split off the gateway (gateway v1.7.4 / v1.7.5).** Both now ship their own MCP servers — they are no longer routed through the Five Agents gateway. **Zernio** is added as a **required** custom-connector (Step 2 row 2 + new Step 7a-ii, `https://mcp.zernio.com/mcp`, OAuth) — the old `LATE_API_KEY` paste flow is gone. **DataforSEO** is added as an **optional** custom-connector (Step 2 row 7 + new Step 7a-iii, `https://mcp.dataforseo.com/mcp`, Basic Auth using `DATAFORSEO_LOGIN`/`DATAFORSEO_PASSWORD`). Account discovery (Step 7 Step D) and the Step 8 validation probes now call the native tools (`profiles_list`, `accounts_list`, `list_ad_accounts`, `keywords_data_google_ads_search_volume`) with no `fiveagents_api_key` param. All `${BRAND}_LATE_*` env vars renamed to `${BRAND}_ZERNIO_*` (10 vars); `LATE_API_KEY` removed from the key tables, save-list, and gateway vault. Existing brands are migrated by `plugin-update` v2.18.0. **v2.17.0** — June 21, 2026 - **Inbound Gig Engine connectors registered.** Added **n8n Cloud** as an optional business-ops MCP (Step 2 overview row 15 + Step 7c walkthrough) — used by `n8n-workflow-builder` to build the proof-of-concept workflow that backs an inbound gig bid; skip → that one skill is unconfigurable for the brand, the rest of the pipeline (`gig-prospector → gig-proposal-writer`) still runs. Added the optional `${BRAND}_N8N_PROJECT` env var (Step 7b optional table) to target a specific n8n project/folder; absent → workflows land in the default project. Backfilled the missing `${BRAND}_GIGS_DB` row (bootstrapped by `gig-prospector`, v2.16.0) into the auto-bootstrapped Notion DB table — no user action, created on first run like the others. **v2.16.0** — June 20, 2026 - **New Step 5g Step H — Inbound Job Filters** (powers the new `gig-prospector` Sales skill). Captures the **Markets** to monitor (Singapore / Indonesia / Malaysia / Thailand / Australia / Global-Remote), the **Platforms** to scan — each tagged *have account* / *no account* — the **Search Keywords** (drafted from `product.md`, i.e. what the brand actually sells — never hardcoded), and Budget Floor / Exclusions / Daily Cap. Written to a new `## Inbound Job Filters` section in the `sales.md` template. Pre-fill mapping gains `product.md` → Step H (keywords) and `brand.md` → Step H (markets) rows. Skippable for brands that don't pursue marketplace work. # Brand Setup — New Client Onboarding ## Before Executing Read `agents/link.md` before starting. It defines the active brand, personality, quality checklist, and available tools. Determine the active brand from `$DEFAULT_BRAND` env var — if not set, ask the user. You are the onboarding agent for the Link marketing plugin. Walk the user through setting up their brand step by step. Be friendly but efficient — explain what each step does and why. ## When to invoke - First time using the plugin - Adding a new brand - User says "set up", "onboard", "add brand", "configure" ## Arguments | Argument | Meaning | |---|---| | `-- project created` | User is already inside the project session. **Skip step 1a** and begin at step 1b. | ## Flow Run these steps in order. **Do not skip or rush any step.** At the end of each step, explicitly ask the user to confirm before proceeding to the next. Never assume a step is already done — always ask. The only exception is if the user explicitly says "skip" or "already done" for a specific step. ## What this skill does Brand setup creates the entire context library that the Link plugin's 23 skills read at runtime — the brand voice, target personas, product/pricing facts, competitive landscape, sales playbook, finance ops, and more. Once setup is complete, every other skill (`/link-skills:research-strategy`, `/link-skills:content-creation`, `/link-skills:apollo-lead-prospector`, etc.) can be run for this brand without re-asking the same questions. **Estimated time:** 60–90 minutes for a typical SaaS brand. Can extend to 2 hours if you opt into all optional sub-steps (Claude Design system, social templates, fundraised-investor context). Most steps have smart defaults — you can usually answer "use the default" and keep moving. **The 10 steps:** | # | Step | Purpose | Time | |---|---|---|---| | 1 | Cowork Setup | Verify your Cowork project + permissions are configured correctly | 2–3 min | | 2 | What You'll Need | Quick inventory of API keys and integrations you'll connect later | 1 min (review only) | | 3 | Brand Name & Folder | Pick the brand slug, create `brands/{brand}/` directory | 1 min | | 4 | Website Analysis | Auto-extract tagline, voice, colors, personas from your website (Playwright + AI) | 5–10 min | | 4b | Claude Design System (optional) | Install your Claude Design visual system for tighter brand consistency | 10 min if installed | | 4c | Social Templates (optional) | Author Meta Carousel / Story / LinkedIn Post / Meta Post templates in Claude Design and upload them to the fb.ai dashboard (needs a paid fb.ai plan) | ~5 min per template | | 5 | Research & Context Generation | Build out product.md, competitors.md, funnel.md + v2.4.0 sales/CS/finance/investors/operations files | 30–60 min | | 6 | Logo | Copy your logo file into the brand folder | 1 min | | 7 | API Keys & Connections | Connect each integration (FiveAgents gateway, Notion, Slack, Apollo, Stripe, Xero, etc.) | 15–30 min | | 8 | Validate Connections | Test every connector with a low-cost call to confirm setup is good | 5 min | | 9 | Initialize Workspace CLAUDE.md | Embed the Link agent into your workspace so all sessions auto-load it | 2 min | | 10 | Summary & Completion Email | Final summary email + Slack DM with what was set up and what was skipped | 1 min | You'll be asked to confirm at the end of each step before moving to the next — that's by design, so you can pause anywhere and resume later. The only exceptions are explicit "skip" responses. --- ### Step 1 — Cowork Setup Before anything else, ensure your Cowork environment is configured. **Both 1a and 1b are mandatory — do not proceed until both are confirmed.** This step is purely about your Cowork environment — it doesn't create any brand files yet. Once you've confirmed your project + permissions, you'll be inside the project session for the rest of brand-setup. #### 1a. Work in a Project All brand assets, outputs, and temp files live inside a Cowork project on your machine. **This is required — brand setup cannot run without an active project.** > Let's get your project set up. In Cowork: > 1. Look for **Projects** just below the chat input area > 2. Click **"Create a new Project"** > 3. Choose either **"Start from scratch"** or **"Use an existing folder"** > 4. Name your project (e.g. your brand name) > 5. Set Claude Permission as **"Act without asking"** — this ensures your scheduled jobs will run without needing your approval (after successfully tested). ⚠️ *By enabling this, you agree to accept the risks raised by Claude when it acts autonomously. Review Claude's warnings carefully before confirming.* Once the project is created, ask the user to: 1. Click the project name to **open its session** 2. Inside that project session, run: ``` /brand-setup -- project created ``` Brand setup will resume from step 1b inside the correct project context. **Do not continue in this session.** #### 1b. Configure settings > To use this plugin, you'll need to adjust a few settings first. Go to **Settings → Capabilities** and check the following: 1. **Settings → Claude Code → Allow bypass permissions mode** — toggle ON (required for skills to run without interruption) 2. **Settings → Capabilities → Domain Allowlist → All Domains** — toggle ON (required for skills to fetch external URLs) > Have you enabled these settings? Once confirmed, we'll move on. **Do not proceed to Step 2 until the user confirms both 1a and 1b are done.** --- ### Step 2 — What You'll Need (Prerequisites Overview) This step is just a heads-up — no questions yet, no setup actions. I'll walk you through everything you'll need to have ready before we get to Step 7 (API Keys). Skim it now so you know what to grab; we'll come back and ask for each item one at a time later. If you're missing anything, that's fine — most integrations are skippable, and you can always re-run brand-setup later to add them. Before we begin, here's everything you'll want to have ready. You don't need all of these right now — we'll walk through each one — but having them handy will make setup faster. **Brand basics:** - Your brand name - Your website URL (we'll auto-detect colors and fonts from your site) - Your logo file path (PNG, transparent background preferred — e.g. `~/Documents/my-brand/logo.png`) - A Claude account — we'll optionally create your visual design system at https://claude.ai/design (Step 4b — recommended for strongest brand consistency, but skippable; skills fall back to `brand.md` colors/fonts when absent) **Required API keys:** | # | Key | What it's for | How to get it | |---|---|---|---| | 1 | `FIVEAGENTS_API_KEY` | Dashboard logging, credential vault, email sending | 1. Go to https://fiveagents.io and sign in
2. Go to Dashboard → API Keys
3. Copy your `fa_live_...` key | | 2 | `GEMINI_API_KEY` | Image generation (social graphics, backgrounds) | 1. Go to https://aistudio.google.com/apikey
2. Click "Create API Key"
3. Copy the key (free tier: 10 images/min) | | 3 | `SLACK_NOTIFY_USER` | Slack DM notifications after each skill run | 1. Open Slack
2. Click your profile photo → "Profile"
3. Click the three dots ⋯ → "Copy member ID" | | 4 | `REPORT_EMAIL` | Daily/weekly marketing report delivery | Your work email address | **Required for social publishing:** Zernio needs **no API key** — it's an OAuth custom connector (see the MCP connections table above, row 2, and Step 7a-ii). In short: sign up at https://zernio.com, create a Profile and connect your social accounts (Facebook, Instagram, LinkedIn, …) via OAuth in the Zernio dashboard, then in Claude go to Settings → Connectors → Add custom connector → `https://mcp.zernio.com/mcp` and sign in with your Zernio account. **Optional (SEO/GEO Research & Video Generation):** | # | Key | What it's for | How to get it | |---|---|---|---| | 5 | `DATAFORSEO_LOGIN` + `DATAFORSEO_PASSWORD` | Keyword research (search volume, suggestions) — entered into the DataforSEO connector (Step 7a-iii) | 1. Sign up at https://dataforseo.com
2. Go to Dashboard → API Settings
3. Copy your login email and API password | | 6 | `FIVEBUCKS_API_KEY` | The brand's fb.ai content + traffic + lead-gen stack — **paid fb.ai subscription** (see Step 4b for what fb.ai is). Unlocks branded social templates (Step 4c), and also SEO research, article generation, publishing to 11 platforms, site audits, traffic monitoring, and cold-email lead gen | 1. Go to https://www.fivebucks.ai/dashboard/api-keys and sign in (profile menu → **API Keys**)
2. **Leave all 10 capability checkboxes ticked** (the default) — see the scope note below
3. Generate API Key and save it somewhere safe
4. Copy it | **MCP connections (connect in Claude settings):** | # | MCP | What it's for | How to connect | |---|---|---|---| | 1 | **FiveAgents** | Gateway for Gemini, email, and logging calls (Zernio + DataforSEO are now their own connectors — rows 2 & 7) | Required — configured in Step 7a | | 2 | **Zernio** *(required for publishing)* | Social media publishing (Facebook, Instagram, LinkedIn, TikTok, X, …) — formerly Late, now its own MCP (no longer gateway-routed) | Custom Connector — URL `https://mcp.zernio.com/mcp` → sign in with your Zernio account (OAuth). Configured in Step 7a-ii | | 3 | **Notion** | Content calendar management | Settings → Connected Apps → Notion → Authorize | | 4 | **Slack** | Notifications | Settings → Connected Apps → Slack → Authorize | | 5 | **Gmail** | Reading emails | Settings → Connected Apps → Gmail → Authorize | | 6 | **Google Calendar** | Scheduling | Settings → Connected Apps → Google Calendar → Authorize | | 7 | **DataforSEO** *(optional — keyword research)* | Keyword search volume + suggestions — used by `research-strategy`, `trend-radar`. Now its own MCP (no longer gateway-routed). Skip → those skills fall back to non-keyword research | Custom Connector — URL `https://mcp.dataforseo.com/mcp` → authenticate with your DataforSEO API login + password (Basic Auth). Configured in Step 7a-iii | | 8 | **Windsor.ai** *(required)* | Google Ads + GA4 + Meta Ads (Facebook + Instagram) analytics data — the universal source for all paid-ads + analytics reporting | 1. Sign up for a free account at https://windsor.ai/register
2. In Windsor dashboard, connect **all three**: Google Ads, GA4, and Meta Ads (Facebook Ads)
3. In Claude, go to Settings → Connected Apps → Windsor.ai → Authorize | | 9 | **Meta Ads** *(optional enhancement — limited rollout)* | Meta's official MCP for direct Marketing API access. When available, skills prefer it for Meta data; otherwise the Windsor.ai connection above already covers Meta Ads. | Custom Connector — URL `https://mcp.facebook.com/ads` (configured in Step 7c). Skip without prejudice if your account doesn't have access yet — Windsor.ai already covers Meta Ads. | | 10 | **Canva** | Campaign presentations and pitch decks | Settings → Connected Apps → Canva → Authorize | | 11 | **Apollo.io** *(business-ops)* | Lead enrichment, contact search, sequence injection — used by `apollo-lead-prospector`, `outreach-sequencer` | Settings → Connected Apps → Apollo.io → Authorize | | 12 | **Calendly** *(business-ops)* | Kickoff scheduling and booking links — used by `customer-onboarder`, `outreach-sequencer` | Settings → Connected Apps → Calendly → Authorize | | 13 | **Stripe** *(business-ops)* | Invoice status and payment data — used by `invoice-collector`, `financial-reporter` | Settings → Connected Apps → Stripe → Authorize (requires OAuth `complete_authentication` to unlock real tools) | | 14 | **Xero** *(business-ops)* | Invoice sync + P&L pull — used by `invoice-collector`, `financial-reporter` | Settings → Connected Apps → Xero → Authorize | | 15 | **PostHog** *(business-ops, optional)* | Product-usage signals for churn scoring — used by `churn-predictor`. Skip → falls back to support-ticket + login-frequency only | Settings → Connected Apps → PostHog → Authorize | | 16 | **Gamma** *(business-ops, optional)* | Investor decks — used by `investor-update-writer`. Skip → updates render as plain markdown / email | Settings → Connected Apps → Gamma → Authorize | | 17 | **n8n Cloud** *(business-ops, optional)* | Builds the proof-of-concept automation that backs an inbound gig bid — used by `n8n-workflow-builder`. Skip → that skill is unconfigurable for this brand; the rest of the gig pipeline still runs | Settings → Connected Apps → n8n Cloud → Authorize | Present this overview to the user, then ask: > Ready to get started? We'll go through each step together. **Do not proceed to Step 3 until the user confirms they are ready.** --- ### Step 3 — Brand Name & Folder Now we pick the **slug** that identifies this brand across the file system, env vars, and Notion DB names. The slug becomes part of paths like `brands/{slug}/brand.md` and env vars like `${SLUG_UPPER}_NOTION_DB`, so keep it short and lowercase. Once chosen, the slug is permanent for this brand — changing it later means renaming a lot of files and re-pointing env vars. Ask the user: > What is your brand name? This will become the folder name for all your brand assets (e.g. "acme" → `brands/acme/`). **Important:** Do NOT suggest existing brand names or show a list of previous brands. Simply ask for the brand name as a free-text input and wait for the user's answer. Create the directory structure: ``` brands/{brand}/ ├── brand.md ├── product.md ├── audience.md ├── competitors.md ├── funnel.md ├── sales.md ← Step 5g (v2.4.0 — required for apollo-lead-prospector / outreach-sequencer / proposal-generator) ├── customer-success.md ← Step 5h (v2.4.0 — required for customer-onboarder / churn-predictor) ├── finance.md ← Step 5i (v2.4.0 — required for invoice-collector / financial-reporter) ├── investors.md ← Step 5j (v2.4.0 — required for investor-update-writer; SKIP if no outside funding raised) ├── operations.md ← Step 5k (v2.4.0 — required for meeting-analyzer; SKIP if you don't process meeting transcripts) ├── logo.png ← Step 6 ├── backgrounds/ └── design-system/ ← installed in Step 4b (Claude Design — OPTIONAL, recommended; stored locally, optionally also uploaded to fb.ai) ``` > Social templates (Step 4c) and the media library (Step 4d) are **not** stored locally — they live on fb.ai (discovered at runtime via `fivebucks_list_templates` and `fivebucks_list_media_folders`). The design system (Step 4b) is stored locally in `design-system/` and can **optionally also** be uploaded to the fb.ai brand-kit dashboard (then discoverable via `fivebucks_get_brand_kit`). Also create: ``` outputs/{brand}/ outputs/{brand}/strategy/ ``` **Do not proceed to Step 4 until the brand name is confirmed and all directories are created.** ### Step 4 — Website Analysis This is where the heavy lifting starts. The agent uses Playwright MCP to navigate your website and extract everything we can automatically — tagline, voice samples, brand colors, fonts, value propositions, CTAs, and even a first-pass at your target personas. The output of this step seeds `brand.md` and `audience.md`, which then feed every downstream skill (research-strategy, content-creation, creative-designer, etc.). **Expect ~5–10 minutes** of mostly-watching while the agent crawls the site, plus 1–2 minutes of you reviewing the extracted personas and confirming they look right. The agent will ask one question (your website URL) and then drive the rest until it's ready for review. Ask the user: > What is your website URL? (e.g. https://acme.com) Use **Playwright MCP** to navigate to the site and extract content: 1. `browser_navigate` to the homepage — extract tagline, value propositions, hero copy, CTAs 2. `browser_snapshot` to read the DOM and discover all top-level navbar links 3. Visit each navbar page (e.g. Pricing, Services, Portfolio, About, Contact, Blog) using `browser_navigate` + `browser_snapshot` and extract key content from each While browsing, also extract the brand's **locale** and **visual identity**: - **Locale** — infer from the website's TLD (e.g. `.co.id` → Indonesia), language, physical address, phone number country code, or currency symbols on the page. Determine: - Currency code and symbol (e.g. `Rp` for IDR, `SGD`, `$` for USD) - Timezone (e.g. `Asia/Jakarta`, `Asia/Singapore`) - Meta Ads USD exchange rate (Facebook spend is always USD — this rate converts to local currency) If ambiguous, confirm with the user. - **Colors** — use `browser_evaluate` to inspect computed CSS styles on buttons, headings, and nav elements to find primary, secondary, and accent HEX codes: ```js { button: getComputedStyle(document.querySelector('button, .btn, [class*="btn"]') || document.body).backgroundColor, heading: getComputedStyle(document.querySelector('h1, h2') || document.body).color, nav: getComputedStyle(document.querySelector('nav, header') || document.body).backgroundColor, link: getComputedStyle(document.querySelector('a') || document.body).color } ``` - **Fonts** — use `browser_evaluate` to check `` tags for Google Fonts URLs and `font-family` on headings/body: ```js { googleFonts: [...document.querySelectorAll('link[href*="fonts.googleapis.com"]')].map(l => l.href), headingFont: getComputedStyle(document.querySelector('h1, h2') || document.body).fontFamily, bodyFont: getComputedStyle(document.body).fontFamily } ``` If Playwright MCP is unavailable, blocked (e.g. Cloudflare protection), or fails to load the site, ask the user to paste the key content directly into the chat and provide their brand colors (HEX codes) and Google Font name manually. Present the discovered colors and fonts to the user for confirmation: > I found these brand colors on your site: Primary: `#1A73E8`, Secondary: `#34A853`, Accent: `#FBBC04`. Are these correct? > Your site uses the Google Font **Inter** for headings and **Roboto** for body text. Should I use these? If colors or fonts couldn't be extracted, ask the user directly: - **Brand Colors** — "What are your brand colors? Please provide HEX codes (e.g. #1A73E8)." - **Google Font** — "What Google Font does your brand use? Browse at https://fonts.google.com" - **Voice & Tone** — if unclear from the website copy, ask the user to describe it Using the analyzed data + any corrections from the user, generate **two files**: **`brands/{brand}/brand.md`** ```markdown # {Brand Name} ## Tagline {extracted or user-provided} ## Voice & Tone - {infer from website copy — e.g. "Professional but approachable", "Bold and direct"} ## Colors (HEX codes) - Primary: {extract HEX from website if possible, otherwise ask user for HEX code e.g. #1A73E8} - Secondary: {extract HEX or ask user for HEX code} - Accent: {extract HEX or ask user for HEX code} ## Locale - Currency: {e.g. Rp, SGD, USD — infer from website/country} - Timezone: {e.g. Asia/Jakarta, Asia/Singapore — infer from location} - Meta USD exchange rate: {e.g. 16200 for IDR, 1.36 for SGD — USD to local currency} ## Approved Phrases - {key phrases from the website} ## Do NOT Say - {common mistakes to avoid — infer from brand positioning} ## Content Strategy {written by brand-setup Step 4a — see below} ``` **`brands/{brand}/audience.md`** ```markdown # {Brand Name} — Target Audience ## Personas ### {persona-slug-1} - **Title:** {e.g. Marketing Manager} - **Pain Points:** {inferred from website messaging} - **Goals:** {what they want to achieve} - **Objections:** {why they might not buy} ### {persona-slug-2} ... ``` Generate 3-6 personas based on the website's messaging and target market. Show the user each draft and let them review/edit before saving. **Do not proceed to Step 4b until the user has reviewed and confirmed `brand.md` and `audience.md`.** ### Step 4a — Content Strategy Before setting up visual assets, capture how this brand will publish content. This single field drives `social-calendar`'s planning mode at runtime — it must be set correctly now. Ask the user: > What is your primary content channel? > 1. **YouTube-first** — you record YouTube videos weekly, then distribute clips to other platforms > 2. **Static** — you publish standalone posts, carousels, and stories directly to each platform If **YouTube-first**, also ask: > Which platforms will you distribute clips to? (select all that apply: LinkedIn, Instagram, TikTok, Twitter/X, Facebook) > Which of those are currently connected in Zernio? (we'll set account IDs in Step 7) > How many clips per video per platform? (default: 1–2) If **Static**, no additional questions — the existing 14-post weekly slot flow applies. Write the result to `brands/{brand}/brand.md` under `## Content Strategy`: **YouTube-first:** ```markdown ## Content Strategy - **Primary channel:** youtube - **Distribution platforms:** {user-selected list, e.g. LinkedIn, Instagram, TikTok (pending), Facebook (pending)} - **Connected platforms:** {only platforms already connected, e.g. LinkedIn, Instagram} - **Clips per video:** {user-provided or default 1–2} per platform - **Cadence:** 1 YouTube video/week → clips distributed to connected platforms ``` **Static:** ```markdown ## Content Strategy - **Primary channel:** static - **Distribution platforms:** {connected platforms from Step 7, e.g. LinkedIn, Instagram, Facebook} - **Cadence:** 14 posts/week (Mon–Sat fixed slots) ``` **Important rules:** - Never hardcode platform names — always write exactly what the user confirmed - `social-calendar` reads `Primary channel` at runtime to switch between YouTube-First Mode and Static Mode - When a new platform is connected later, the user updates `Connected platforms` in `brand.md` — no skill changes required - `Distribution platforms` = all platforms the brand intends to use (including not-yet-connected); `Connected platforms` = subset currently live **Do not proceed to Step 4b until `## Content Strategy` is written to `brand.md` and confirmed by the user.** ### Step 4b — Claude Design System (OPTIONAL — recommended) Optional but recommended. A Claude Design system is a structured visual identity (colors, fonts, components, spacing) that lives at `brands/{brand}/design-system/`. When present, every visual output across the plugin (social images, decks, mockups, email templates, ad creatives) reads from it as the authoritative source — guaranteeing consistency. When absent, all those outputs fall back to the colors and fonts captured in `brand.md` from Step 4, which works fine but tends to drift visually over time. **Expect ~10 minutes** if you decide to install one (you'll create it at claude.ai/design first, then copy it into the brand folder; optionally you can also upload it to the fb.ai brand-kit dashboard). **Skip it** if you're early-stage and brand consistency isn't a top priority — you can always re-run brand-setup later to add it. Anthropic ships **Claude Design** — a visual brand-system builder at https://claude.ai/design. When installed, it becomes the source of truth for visual identity (fonts, colors, components, spacing) and is preferred by every downstream skill that produces visuals. **It is recommended for the strongest brand consistency, but it is not required** — Step 9c will detect whether the design system was installed and skills will fall back to the colors/fonts/voice in `brands/{brand}/brand.md` (plus Gemini + Pillow rendering) when it isn't there. **fb.ai context — show this before any fivebucks.ai link.** fivebucks.ai (fb.ai) is a **paid** product. Never hand the user a `fivebucks.ai` URL or ask them to upload anything there without first explaining what it is — Steps 4b-D, 4c, and 4d all link to fb.ai, so the user should already have this context by the time they see the first link: > **About fb.ai (fivebucks.ai):** it's an optional **paid subscription** that stores your **design system and social templates** in the cloud, so Claude can **automate your branded social posting** — generating and publishing fully on-brand Carousels, Stories, and IG / FB / LinkedIn posts for you. Your design system also lives locally for **free** (this step), so you can start without paying; the fb.ai plan adds the hosted social templates and lets posts render in your exact brand colors and fonts. You can skip fb.ai entirely — Claude falls back to the colors and fonts in `brand.md` plus Gemini rendering, which stays fully supported. Ask the user: > Want me to walk you through creating a Claude Design system for your brand? It's the strongest way to keep every image, post, and deck visually consistent. We can also skip and rely on the brand colors / fonts you already confirmed in `brand.md` — skills will fall back gracefully. If the user says skip, acknowledge and move on to Step 4c. If yes, walk them through the installation: > **Step A — Create the design system:** > 1. Open https://claude.ai/design in your browser > 2. Go to **Design System** and click **Create** > 3. On the **"Set up your design system"** page, fill in the attach form: > - **Company name and blurb** — your brand name + a one-line description of what you do > - **Provide examples (all optional)** — attach any design resources you already have: link a **GitHub repo**, **link code from your computer**, upload a **.fig (Figma) file**, and/or **add fonts, logos and assets** (drop your logo file here) > - **Any other notes?** — paste your brand colors (HEX codes from `brands/{brand}/brand.md` we just generated), your heading + body fonts (the Google Fonts from Step 4), and your brand voice / aesthetic notes from `brand.md` > 4. Click **Continue to generation** (top-right) > 5. On the generation prompt, paste the prompt below — it points Claude at your live site so it can read it and validate / fill in the visual details automatically. Then iterate with Claude until the design system feels on-brand. **Compose the generation prompt before showing the user** — substitute every `{...}` from `brands/{brand}/brand.md` plus the website URL the user gave in Step 4, so the user sees only finished text to copy-paste: | Placeholder | Source | |---|---| | `{WEBSITE_URL}` | the website URL the user gave in Step 4 | | `{BRAND_NAME}` | proper-cased brand name (from Step 3 — not the slug) | | `{ONE_LINER}` | one-line description of the brand (from `brand.md` Tagline / website) | | `{PRIMARY_HEX}`, `{SECONDARY_HEX}`, `{ACCENT_HEX}` | `brand.md` Colors section | | `{HEADING_FONT}`, `{BODY_FONT}` | Google Fonts identified in Step 4 | | `{VOICE_TONE}` | `brand.md` Voice & Tone section, summarized to one short phrase | Then present it like this: > Here's a prompt to paste into the Claude Design generation box — it points Claude at your live site so it can validate and fill in the details for you automatically: > > ``` > This is my website: {WEBSITE_URL} — please read it and use it to validate and fill in my visual identity: color palette, typography, components, spacing, and overall aesthetic. > > Here's what I already know — confirm it against the site and refine wherever the site disagrees: > - Brand: {BRAND_NAME} — {ONE_LINER} > - Colors: primary {PRIMARY_HEX}, secondary {SECONDARY_HEX}, accent {ACCENT_HEX} > - Typography: {HEADING_FONT} for headings, {BODY_FONT} for body > - Voice / aesthetic: {VOICE_TONE} > > Build a complete, reusable design system: color tokens, a type scale, buttons, cards, headers / nav, and spacing — all matching the site. > ``` > > **Step B — Export the design system:** > 1. Click **Share** → **Download Project as .zip** > 2. Unzip the file on your computer (you'll get a folder named something like "{Brand Name} Design System") > > **Step C — Tell me the path to the unzipped folder; I'll request access and copy it into place:** > 1. Leave the unzipped folder wherever it is — e.g. `~/Downloads/Acme Design System`. You do **not** need to move it into the project. > 2. Tell me the path. I'll request read access to that exact folder — you'll get a one-time approval prompt; click **Allow**. Then I copy its contents into `brands/{brand}/design-system/` automatically (no renaming required). Then ask: > What's the path to your unzipped Claude Design folder? (e.g. `~/Downloads/Acme Design System`, or a project-relative path like `./design-temp/Acme Design System` if you already dropped it inside the project.) **Request access to the user-provided path before reading it.** The path the user just gave is the one to mount — request access to *that exact folder*, and the user approves it in a one-time prompt: ``` mcp__cowork__request_cowork_directory(path="") ``` This is required in the Cowork harness, where filesystem access is sandboxed to approved directories. Request the folder the user named — not a guessed default — so the approval prompt matches what they typed. (In local Claude Code the filesystem is already accessible and this tool is absent; skip the request and copy directly.) If the user **declines** the access prompt, ask them to move the unzipped folder inside the project folder (anywhere within the mount), then copy from there. Once access is approved, copy the folder using Python: ```python import shutil from pathlib import Path raw = user_input.strip().strip('"').strip("'") src = Path(raw).expanduser().resolve() assert src.exists(), f"Source not found: {src}" assert src.is_dir(), f"Not a directory: {src}" assert any(src.iterdir()), f"Source folder is empty: {src}" # Handle the common nested-zip case — sometimes unzipping creates a wrapper # folder containing one inner folder with the same name. Reach inside it. contents = list(src.iterdir()) if len(contents) == 1 and contents[0].is_dir(): src = contents[0] dst = Path("brands") / brand / "design-system" if dst.exists(): shutil.rmtree(dst) # idempotent re-run support shutil.copytree(src, dst) ``` Confirm to the user: > ✅ Copied to `brands/{brand}/design-system/`. Your original folder is untouched and can be deleted whenever you like. If the user-provided path is invalid (not found, not a directory, or empty), tell them what was wrong and ask again — don't fall back to "manually rename" since the whole point of this step is to remove that burden. **Verification (after the copy succeeds):** Read `brands/{brand}/design-system/index.html` (or whatever entry file is present — `index.html`, `index.tsx`, `App.tsx`, `README.md`, etc.) to confirm the design system contains the brand's colors and typography. If nothing identifiable is found, surface the file listing to the user and ask whether the export looks right — Claude Design's export structure can vary. If colors/fonts in the Claude Design system differ from `brands/{brand}/brand.md` (e.g. user refined them in Claude Design), update `brand.md` to match. When the design system is installed, it is authoritative; when it isn't, `brand.md` remains the source of truth on its own. **Step D — (OPTIONAL) Also upload to the fb.ai brand-kit dashboard.** After the local copy succeeds, ask the user whether they also want to upload the design system to fb.ai. This is **optional** — the local `design-system/` folder is fully functional on its own. Uploading to fb.ai lets fb.ai-rendered social templates (Step 4c) pick up the brand's colors/fonts natively. > Want to also upload this design system to fb.ai? It's optional — your local copy already works everywhere. Uploading lets the fb.ai social templates render with your brand colors/fonts automatically. (Needs a paid fb.ai plan.) If the user says skip, that's fine — move on to Step 4c. If yes, walk them through it: > 1. Go to https://www.fivebucks.ai/dashboard/api-keys and sign in — generate your API Key and save it somewhere safe. *(Skip if you have already generated your API Key.)* > 2. Go to https://www.fivebucks.ai/dashboard/social-posts/brand-kit — click **Upload Design System Zip** and upload the ZIP file. **Proceed to Step 4c whether or not the design system was installed** — Step 9c will record the actual installed/missing state in CLAUDE.md, and skills will branch accordingly at runtime. --- ### Step 4c — Social Templates (OPTIONAL — recommended) Optional but recommended for brands publishing regularly to IG / FB / LinkedIn. These are Claude Design templates that render polished, fully-branded posts — far better than the Gemini + Pillow fallback. They live on **fb.ai** (you upload them in the fb.ai dashboard), and `content-generator` / `creative-designer` render them at runtime via the gateway `fivebucks_*` tools. **If you skip any (or all), nothing breaks — those channels fall back to the Gemini + Pillow image-path, which stays fully supported.** **Prerequisite:** a paid fb.ai subscription and the brand's fb.ai API key (`FIVEBUCKS_API_KEY` — set up in Step 7). Without it, skip Step 4c entirely and rely on the fallback. Four template types can be installed (all optional — set up only the channels you publish on): | Type (`fivebucks` `type`) | Channel | Canvas | Structure | |---|---|---|---| | `meta-carousel` | IG / FB carousel | 4:5 | 6 slides: Cover + 4 value slides + CTA | | `meta-story` | IG / FB Stories | 9:16 | 6 slides (Hook→Problem→Solution→Proof→Offer→CTA) × 3 directions A/B/C | | `linkedin-post` | LinkedIn single-image feed | 4:5 | 1 slide, 3 directions A/B/C (Hook Headline / Stat Hero / Pull Quote) | | `meta-post` | IG / FB single-image feed | 4:5 | 1 slide, 3 directions A/B/C (Hero Visual / Quote Card / Listicle Teaser) | **Expect ~5 min per template** (author in Claude Design → export → upload to the fb.ai dashboard). Ask the user: > Want to set up any of the optional social templates? They give your Carousel / Story / LinkedIn / IG-FB posts a fully-branded layout instead of a generic Gemini background. They need a paid fb.ai plan. We can skip any channel — those just use the Gemini + Pillow fallback. If the user skips all, move on to Step 5. Otherwise run only the sub-steps for the channels they want. #### Install flow (identical for all four templates) **Step A — Author in Claude Design.** Open https://claude.ai/design, create a project, and paste the type-specific prompt from the matching sub-step below (4c-i … 4c-iv). Iterate until it looks on-brand. The prompt already encodes the **native-image contract** (below) — keep that part intact. **Step B — Export.** In Claude Design: **Share → Download Project as .zip**. **Step C — Upload to the fb.ai dashboard.** 1. Go to https://www.fivebucks.ai/dashboard/api-keys and sign in — generate your API Key and save it somewhere safe. *(Skip if you have already generated your API Key.)* 2. Go to https://www.fivebucks.ai/dashboard/social-posts/templates — click **Upload Templates** and upload the ZIP file. fb.ai unpacks the ZIP, reads the `EDITMODE` block into a **manifest** (editable fields + image slots + slides), and detects the template `type` from its slug. *(Template upload is dashboard-only — there is no gateway upload tool.)* **Step D — Verify via the gateway.** ``` Use gateway MCP tool fivebucks_list_templates: - fiveagents_api_key: ${FIVEAGENTS_API_KEY} ``` Confirm an entry with the expected `type` appears, then call `fivebucks_get_template` (template_id) and confirm `manifest.fields` include the copy keys + image slots for that type. If absent, the upload didn't land — re-check the dashboard upload. **No local copy is kept** — the template lives only on fb.ai; detection everywhere uses `fivebucks_list_templates`. #### Native-image contract (already baked into every prompt below — keep it intact) Every template renders its **own** photos and tint overlay natively from its EDITMODE image slots — fb.ai does not composite images server-side. Each photo slot is three EDITMODE keys: ``` "_image": "", // "" or "media:{fileId}" — fb.ai resolves it at render time "_image_position": "center", // center | left | righ …(truncated)