Codiris Agentizer v2 — Intelligent Website-to-Agentfront

Transform any website into a custom AI-powered agentfront. The skill deeply analyzes the company — its market, products, value proposition, customers — then builds a tailored experience. NOT a template copy-paste.

Core Principle

Understand the company first, build second. Every company is different:

• Stripe sells APIs to developers → show API products, code examples, pricing tiers
• Nike sells shoes to consumers → show product catalog, categories, shopping
• Visa sells payment cards → show card tiers, comparisons, benefits
• Salesforce sells enterprise SaaS → show solutions by industry, case studies, demos

The agentfront must reflect what the company ACTUALLY is, not what Visa is.

Template Location

./template/ relative to this SKILL.md — the skill directory (typically ~/.claude/skills/agentizer/ after install) contains the Next.js template. Content is generated custom per company. After cp -R, run the template's npx next build once to confirm nothing regressed in the template itself.

Reference Implementation

https://wwa.visa.codiris.app — live demo of a finished agentfront (payment card company). Source for the template is at https://github.com/Humiris/wwa-transform/tree/main/template.

If any template file looks incomplete or broken, inspect the live demo via WebFetch for visual reference, then apply the visaCards → productItems / VisaCard → ProductItem / annualFee → price renames — don't try to fix the template stub in place.

PHASE 1: Deep Company Intelligence

Step 1.1: Crawl Multiple Pages

Use WebFetch on at minimum:

1. Homepage — hero, value prop, main CTAs, navigation
2. Products/Features page — what they actually sell
3. Pricing page (if exists) — how they charge, what tiers
4. About page — company story, mission, stats

For EACH page, ask WebFetch:

Extract everything: brand name, tagline, ALL image URLs (full absolute), 
colors (hex from buttons/headers/CSS), navigation items, products/features 
with descriptions, pricing tiers, stats/numbers, customer logos, 
testimonials, CTAs, form fields. Be exhaustive.

Step 1.2: AI Company Analysis

After crawling, THINK deeply about the company. Answer these questions BEFORE writing any code:

Market Understanding:

• What industry is this company in? (Fintech, SaaS, E-commerce, Healthcare, etc.)
• Who are their customers? (Developers, Enterprises, Consumers, SMBs)
• What problem do they solve?
• Who are their competitors?

Product Understanding:

• What do they sell? (APIs, Physical products, Subscriptions, Services, Cards)
• How many products/tiers do they have?
• How do they charge? (Per-transaction, Subscription, One-time, Usage-based, Free)
• Do they have a free tier or trial?

Content Structure:

• What sections make sense for THIS company's homepage?
• What navigation items should exist?
• What categories should products be organized by?
• Should there be a "cards" section? (Only if they sell cards/plans/tiers)
• Should there be a pricing grid? A product catalog? Case studies?

Value Proposition:

• What's their main headline?
• What stats are impressive? (Users, revenue, uptime, countries)
• What social proof do they have? (Customer logos, testimonials)

Typography (CRITICAL — match brand aesthetic):

The template uses Geist by default. You MUST change fonts to match the brand:

Update src/app/layout.tsx:

import { Playfair_Display, Inter } from "next/font/google";

const serif = Playfair_Display({ variable: "--font-serif", subsets: ["latin"] });
const sans = Inter({ variable: "--font-sans", subsets: ["latin"] });

// In body: className={`${serif.variable} ${sans.variable} font-sans`}

Update src/app/globals.css:

:root {
  --brand-primary: #000000;    /* match brand color */
  --brand-secondary: #C9A96E;
  --font-serif-brand: var(--font-serif), "Didot", "Bodoni MT", "Georgia", serif;
}

h1, h2, .font-serif {
  font-family: var(--font-serif-brand);
  letter-spacing: -0.01em;
}

User Intent (CRITICAL — drives CTAs and modals): Analyze what users ACTUALLY do on this site. Map to correct CTA:

NEVER use "Book a Demo" for e-commerce. E-commerce brands want you to SHOP, not schedule a meeting.

Update these files based on intent:

• brand-config.ts → ctaPrimary and ctaSecondary
• hero-section.tsx → button text
• solution-detail-panel.tsx → button text
• book-demo-modal.tsx → rename, change fields to match intent (e-commerce = Contact Client Services, Cart, or remove entirely)
• actions.ts system prompt → what the agent offers users

Step 1.3: Define the Page Architecture

Based on your analysis, decide which sections the homepage should have. Choose from:

DO NOT include sections that don't apply:

• API company → NO credit card tiers, NO card comparison
• E-commerce → NO API docs, NO code examples
• SaaS without global story → NO world map (make handleShowMap a no-op in page.tsx)
• Company without browsable products → leave productItems array empty, the browse section won't render

PHASE 2: Download Assets

Step 2.1: Download ALL Images

MANDATORY. The agentfront is useless without real images.

❗ The single biggest bug in past transforms is shipping images from the wrong brand — a generic "sneaker" photo from Unsplash that happens to show a Nike Swoosh on an adidas site, or a "handbag" photo that's clearly Chanel on a Dior site. Mis-branded imagery destroys credibility instantly.

Rule: Every image that represents a specific named product or franchise (e.g. "Samba OG", "Air Max 90", "Lad