--- name: aibb-design-language description: Use Firecrawl to extract a niche competitor or best-in-class local business website's design language, then translate it into an AIBB customer-facing preview direction without copying content, photos, logos, trademarks, or claims. Use for AI Business Boomer local business preview rebuilds, Orleans/Cape prospect pages, boring profitable niche pages, or whenever a generated page feels like an AI template and needs real agency-level visual direction. --- # AIBB design language ## Contract This skill guarantees: - Firecrawl-first design research for local business preview pages. - A reusable design direction based on typography, layout, spacing, color, CTA patterns, and section rhythm — not copied brand/content/assets. - A builder-ready brief for Nancy/OpenClaw or Hermes implementation. - Sendability guardrails: owner-facing language, conservative claims, no internal/demo/template wording, no outreach/spend. - Proof requirements aligned with AIBB page QA. ## When to use Use when Sam asks to: - make AIBB preview sites look less templated; - use Firecrawl for design inspiration; - rebuild a local business page from a good competitor; - improve Orleans/Cape demo pages visually; - create a niche-specific website template for boring profitable businesses; - make a generated page owner-showable/sendable. Do not use this for: - cloning a competitor site; - copying copy, photos, logos, trademarks, reviews, or claims; - outreach, emails, postcards, ad spend, public indexing, or recipient upload; - sites behind auth/paywalls. ## Inputs Collect or infer: 1. Prospect business URL or slug. 2. Prospect niche/category. 3. Target town/region. 4. One to three inspiration URLs. - Prefer strong same-niche local businesses. - If unavailable, use best-in-class regional/national examples with similar service flow. 5. Primary conversion action: call, directions, book, request quote, availability, menu/order, shop, services. If inspiration URLs are not supplied, research them with web search or Maps before using Firecrawl. ## Workflow ### 0. Competitive intelligence matrix Before building, research the niche the way Jack describes in Level 2: - Find 10–20 same-niche or adjacent strong websites. - Score them with a simple judging matrix: visual quality, CTA clarity, mobile quality, offer clarity, proof/reviews, SEO visibility, speed/accessibility, and conversion path. - Select the top 3–5 as inspiration sources. - Identify what the best sites do that weak sites do not: above-fold layout, CTA wording, service packaging, trust proof, navigation/header info, section order, imagery, and mobile action path. For AIBB, add first-client factors: - boring/profitable niche fit; - weak current digital infrastructure; - clear phone/quote/booking/directions action; - likely MRR upsell path; - owner-operated/local feel. ### 1. Prospect fact scrape Use Firecrawl/web extraction for the prospect's own site/listing first. Extract only verified facts: - business name - category - address/town - phone - services/products/lodging/menu/service areas - hours if available - booking/menu/order/directions links - weak-source notes - current site weaknesses Never invent facts. If a fact is weak or missing, phrase CTAs as confirm/ask/check. ### 2. Inspiration scrape For each inspiration URL, run a rendered scrape where available: ```js firecrawl_scrape({ url: "", formats: ["html", "rawHtml", "screenshot", "branding"], waitFor: 10000, screenshotOptions: { fullPage: true, viewport: { width: 1440, height: 900 } } }) ``` If Firecrawl MCP is unavailable in the current agent, use the available Firecrawl CLI/API wrapper, browser screenshot, or web extraction as fallback. Note the fallback in proof. ### 3. Extract design language, not content Record: - hero structure: split, image-first, centered, card stack, etc. - headline length and typographic scale - CTA placement and wording pattern - section order - card shape/radius/shadow/borders - color palette family - spacing rhythm - image treatment - navigation/header pattern - mobile behavior - typography clues from CSS when accessible Do not record competitor copy, exact visual assets, testimonials, proprietary marks, or unique brand phrases as reusable content. ### 4. Translate to AIBB page direction Create a short design brief with: - `Design direction`: one paragraph. - `Top header`: what information belongs across the top bar. - `Hero`: max headline length, subheadline length, image placement, CTA order. - `Sections`: 5–8 customer-facing sections for this niche. - `CTA strategy`: primary/secondary/tertiary labels. - `Copy tone`: owner-facing/customer-facing rules. - `Visual rules`: colors/type/card/image rules. - `Mobile rules`: image near top, CTAs visible, no huge text wall. - `Do not use`: banned/internal/template phrases. ### 5. Build/fix handoff for Nancy/OpenClaw If Nancy is the builder, write a direct command: ```text Nancy/OpenClaw: Rebuild using this AIBB design-language brief. Do not copy competitor assets/copy. Use only verified prospect facts. Make the page customer-facing and owner-reviewable. Apply: . Required proof: HTTP 200, noindex/noarchive, desktop screenshot, mobile screenshot, forbidden phrase scan, CTA verification, metadata/schema, owner verification note, weak-source notes, current-site vs preview verdict, commit/deploy info. ``` ### 6. QA before acceptance Review live output against: - hero headline short enough to fit first screen; - image visible above the fold on desktop and mobile; - top header contains the needed action info; - image-card supporting text appears under image, not blocking the image; - no customer-facing internal/demo/template language; - CTAs are real user actions; - conservative verified claims only; - current site vs preview verdict is honest. ## Output format ```markdown # AIBB design-language brief — Source prospect: - Inspiration sources: - — why used - — why used Verified prospect facts: - ... Design direction: - ... Top header: - ... Hero: - ... Sections: 1. ... CTA strategy: - Primary: ... - Secondary: ... - Tertiary: ... Visual rules: - ... Mobile rules: - ... Forbidden / avoid: - ... Nancy/OpenClaw command: ```text ... ``` Required proof: - HTTP 200 - noindex/noarchive - desktop screenshot - mobile screenshot - forbidden phrase scan = 0 - CTAs verified - metadata/schema present where practical - owner verification note - weak-source notes - current-site vs preview verdict - commit/deploy info ``` ## Anti-patterns - Copying competitor copy/photos/logo/reviews. - Treating Firecrawl output as permission to clone. - Rendering the design brief/tokens on the customer page. - Making hero headlines longer than a customer would read above the fold. - Hiding useful action info below the fold. - Saying `sendable` without screenshot and live proof. - Using phrases like demo, template, public source material, launch version, owner-safe, customer journey, page wins, audit, internal strategy. ## Notes from the uploaded design-language skill This skill is adapted from Sam's uploaded `design-language-skill.zip`. The original 7-step workflow is useful for extracting tokens and production CSS decisions, especially variable-font optical sizing, non-standard weights, and pixel line-heights. For AIBB, those ideas are used as design inspiration and QA signal — never as a clone recipe.