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:

Brand Type	Fonts to Use	Implementation
Luxury fashion (Dior, Hermès, Chanel)	Playfair Display + Inter	Serif headings, clean body
Tech/SaaS (Stripe, Notion, Linear)	Inter or Geist	Modern sans-serif
Premium/Editorial (Apple, Aesop)	SF Pro / Helvetica Neue / system fonts	Clean, minimal
Fintech (Visa, Chase)	Geist / Inter	Professional sans
E-commerce (Amazon, Walmart)	Inter / Roboto	Readable, utilitarian

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:

Company Type	Primary Intent	CTA Text	Modal Type
E-commerce (Dior, Nike, Apple)	Shop / Buy products	"Shop Now"	Cart / Product detail
SaaS/API (Stripe, Notion)	Try / Book demo	"Start Free" or "Book a Demo"	Demo booking form
Enterprise (Salesforce)	Contact sales	"Contact Sales"	Sales form
Financial (Visa, banks)	Apply / Get card	"Apply Now"	Application form
Marketplace — Listings (Airbnb, Booking, Uber)	Search / Book	"Start Searching"	Search UI
Marketplace — C2C (Vinted, Depop, Etsy, eBay)	Sell AND Browse (dual intent)	"Sell Now" + "Start Browsing"	Seller signup modal (personal / pro)
Services (Consulting)	Contact / Meeting	"Book a Call"	Calendar booking
Content (Netflix, Spotify)	Subscribe / Try	"Start Free Trial"	Signup form

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:

Section	Use When	Example
Hero Carousel	Always	Rotating through top products/features
Stats Bar	Company has impressive numbers	"$1.9T processed", "99.999% uptime"
Product Grid	3+ distinct products	API products, SaaS modules
Pricing Tiers	Clear pricing tiers exist	Free/Pro/Enterprise
Feature Showcase	Key differentiators	With images and descriptions
Customer Logos	Has notable customers	"Trusted by Amazon, Shopify..."
Solution Categories	Products grouped by use case	"For Startups", "For Enterprise"
Code Example	Developer-focused company	Interactive code snippet
Card Catalog	Sells cards/plans consumers browse	Credit cards, subscription plans
CTA Banner	Always	"Book a Demo" / "Get Started" / "Start Free"
World Map	Company has global presence story	Payment networks, logistics, international SaaS

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", "Lady Dior") MUST come from a source that lets you verify it shows the correct brand. Generic-category Unsplash photos are banned for these slots. They are OK only for brand-agnostic shots (lifestyle hero, category tiles with no named product, abstract backgrounds).

And every image MUST pass visual verification (Step 2.3) before you write its path into cards.ts / solutions.ts.

mkdir -p ~/wwa.{domain}/public/images/cards

# Use browser headers to bypass CDN blocks
curl -L -o "public/images/{name}.jpg" "{url}" \
  -H "User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36" \
  -H "Referer: https://{domain}/" \
  -H "Accept: image/*"

Download at minimum:

• Logo (SVG preferred, PNG fallback)
• Hero/banner image
• 1 image per product/solution (6-10 total)
• 2-4 lifestyle/feature images
• Customer logos if available
• Product screenshots/UI images

Image Source Priority (USE IN THIS ORDER)

For e-commerce catalogs (fashion retailers, beauty retailers, online-only fashion), always try method 0 FIRST:

0. Scrape the brand's SSR catalog JSON via Chrome MCP — modern e-commerce sites (Zara, H&M, ASOS, Nordstrom, Sephora, etc.) ship the full product grid as a JSON blob inside a <script> tag on every category page. Server-side curl gets WAF-blocked, but Chrome MCP with an organic-looking tab has no trouble reading the DOM.

Two flavors to look for:

• JSON-LD <script type="application/ld+json"> (cleanest — H&M, many schemas). Has @type: Product entries with name, image[], offers.price ready to JSON.parse.
• Raw hydration JSON (Zara, ASOS — biggest <script> that contains the brand's CDN hostname). Not always valid JSON; regex out the image URL pattern (e.g. /static\.zara\.net\/photos\/[^"'\s]+\.jpg/g or /products\/[a-z0-9-]+\/\d+-\d+[a-z0-9-]*/gi) and dedupe by product id.

Pattern that works today (verified on Zara 259 · H&M 216 · ASOS 365 · Uniqlo 54 scrapes):

// In Chrome MCP, navigate to e.g. https://www.zara.com/uk/en/woman-dresses-l1066.html, then:
(() => {
  const scripts = Array.from(document.querySelectorAll('script'));
  // JSON-LD path (H&M-style): cleanest
  const ld = document.querySelector('script[type="application/ld+json"]');
  if (ld && ld.textContent.includes('"@type":"Product"')) {
    return JSON.parse(ld.textContent);
  }
  // Raw-hydration path (Zara/ASOS): regex
  const big = scripts.find(s => (s.textContent || '').includes('<brand-cdn-hostname>'));
  const text = big.textContent;
  // Adjust regex per brand URL shape
  const urls = [...new Set((text.match(/https:\/\/static\.zara\.net\/[^"'\s]+\.jpg/g) || []))];
  return urls;
})();

Then get the result out of Chrome via a Blob download:

const blob = new Blob([JSON.stringify(catalog)], { type: 'application/json' });
const a = Object.assign(document.createElement('a'), { href: URL.createObjectURL(blob), download: 'catalog.json' });
document.body.appendChild(a); a.click();
// File lands in ~/Downloads/catalog.json — move to project, feed to cards.ts rewrite

Hotlink don't download. Once you have the URLs, put them directly in cards.ts's image field — the browser will load them via <img src> (no CORS issue on img tags). No local copy needed. Server-side curl typically fails with 403 / 000 (WAF), but that doesn't matter because production serves from users' browsers.

For named products/franchises (Samba, Air Jordan 1, Stan Smith, Lady Dior, Birkin, etc.) where you need individual-product photos not a catalog:

1. Brand's own CDN (works for most sportswear — Nike, adidas, Puma, Asics, New Balance)
2. Wikipedia / Wikimedia Commons — the category page commons.wikimedia.org/wiki/Category:{Brand}_{Product} has real, licensed product photos for every iconic sneaker, boot, bag, watch, perfume, etc.
3. Industry publication CDN for the brand's segment (WWD for fashion, Fragrantica for perfume, SneakerNews/Hypebeast for sneakers)
4. DROP THE PRODUCT from productItems if none of 1–3 yields a verified photo. A site with 6 real products is infinitely better than a site with 8 and two wrong-brand frauds.

Unsplash is BANNED for named-product slots. It's OK only for: hero lifestyle shots (action/atmosphere, no named product), brand-agnostic category tiles, abstract backgrounds. If you use it, still run Step 2.3 verification — generic sneaker/bag photos on Unsplash very frequently show competitor logos.

Most premium brand sites (Dior, Apple, Notion, Vercel, Hermès) AGGRESSIVELY BLOCK curl. Do NOT waste time trying to download from the brand's CDN. Skip directly to the fallback.

Sportswear CDNs are hit-or-miss — Puma, Nike, Adidas, Asics, Under Armour, New Balance, Reebok sometimes serve real JPEGs on their public CDNs, but you have to know the exact style code and the match rate is worse than you'd expect. Observed on recent transforms:

• adidas (assets.adidas.com) — returned 0 bytes on every style code tried (Apr 2026)
• Nike (static.nike.com) — works for some products, requires inspecting a product page's <img srcset> to get the right hash
• New Balance (nb.scene7.com) — works with a Referer header, but style codes are hard to guess; ~50% hit rate even for the most popular models
• Puma (images.puma.com) — most reliable of the sportswear CDNs

Rule of thumb: try the brand CDN once with a single well-known SKU. If it returns real bytes (>20KB), map your remaining products; if it 0-bytes or errors, drop straight to Wikimedia Commons. Don't spend 10 minutes guessing style codes.

Brand	CDN pattern	How to get the {styleId}
Puma	https://images.puma.com/image/upload/f_auto,q_auto,w_800,h_800/global/{styleId}/01/sv01/fnd/PNA/fmt/png/{slug}	The number after /pd/slug/ on a product page
Nike	https://static.nike.com/a/images/t_PDP_1280_v1/f_auto,q_auto:eco/{hash}/{slug}.jpg	Inspect a product page's <img srcset>
Adidas	https://assets.adidas.com/images/w_600,f_auto,q_auto/{styleId}/{slug}.jpg	Often blocked — try once, fall back to Wikimedia
New Balance	https://nb.scene7.com/is/image/NB/{styleId}_nb_02_i?wid=1200&hei=1200	Match the style id on the product page (e.g. m1906rcd)

Always include -H "Referer: https://{brand-domain}/" — the Cloudinary-style CDNs behind most sportswear brands accept the request with referrer, 404 it without.

Remember: even when the CDN works, you still MUST run Step 2.3 visual verification on the downloaded bytes — CDNs occasionally return placeholder/blank images with a 200 status.

1. Brand's own CDN (always try first for sportswear/athletic; ~30% of premium luxury sites; skip straight to #3 for most editorial/luxury brands)

curl -sL -o public/images/{name}.jpg "{url}" \
  -H "User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36" \
  -H "Referer: https://{domain}/"

2. Wikipedia / Wikimedia Commons — works for famous brands, logos, iconic products

curl -sL -o public/images/brand-logo.svg \
  "https://upload.wikimedia.org/wikipedia/commons/{path}/{file}.svg" \
  -H "User-Agent: Mozilla/5.0"

Use WebSearch: "{brand} logo SVG wikimedia commons"

2.5. INDUSTRY PUBLICATIONS — USE THIS FOR FASHION BRANDS Fashion/luxury brands block their own CDN, but fashion PUBLICATIONS host real runway photos:

# WWD (Women's Wear Daily) — 2-3MB runway photos, works without auth
# Pattern: https://wwd.com/wp-content/uploads/{YYYY}/{MM}/{brand}-{collection}-{location}-GG-{01-80}.jpg

curl -sL -o public/images/runway.jpg \
  "https://wwd.com/wp-content/uploads/2025/05/dior-cruise-2026-rome-GG-01.jpg" \
  -H "User-Agent: Mozilla/5.0"

# Fragrantica CDN — real perfume bottle photos, works without auth
# Pattern: https://fimgs.net/mdimg/perfume/375x500.{perfume_id}.jpg
# Find IDs via WebSearch: "{perfume name} fragrantica"

curl -sL -o public/images/jadore.jpg \
  "https://fimgs.net/mdimg/perfume/375x500.210.jpg" \
  -H "User-Agent: Mozilla/5.0"

Other working fashion/beauty publication CDNs:

• wwd.com/wp-content/uploads/ — runway, backstage, beauty product shots
• fimgs.net/mdimg/perfume/ — perfume bottles (Fragrantica)
• nowfashion.com/wp-content/uploads/ — runway photos
• showstudio.com/ — editorial fashion content
• vogue.com/photos/ — often requires auth
• fashionography.com/wp-content/uploads/ — runway archives

IMPORTANT: Sample a couple of images first (~2-3MB each). On macOS use sips -Z 1200 input.jpg -o output.jpg to resize before committing.

Brand Videos for Hero Backgrounds

Many luxury brands have hero video loops that dramatically elevate the feel. Look for them:

# Brand-hosted videos often work with proper headers
curl -sL -o public/videos/hero.webm "{brand-video-url}" \
  -H "User-Agent: Mozilla/5.0" \
  -H "Referer: https://{domain}/"

Finding brand video URLs:

• Dior: diorama.dam-broadcast.com/... — works publicly
• Apple: apple.com/assets-www/... — often public
• Most fashion houses have dam-broadcast or .cdn. video CDNs
• Inspect the brand's homepage for <video> or <source> tags with .webm / .mp4
• WebSearch: "{brand} hero video webm" or check Dam broadcast networks

Implementation in hero-section.tsx:

<video autoPlay loop muted playsInline className="absolute inset-0 w-full h-full object-cover" poster="/images/hero-image.jpg">
  <source src="/videos/hero.webm" type="video/webm" />
</video>
<div className="absolute inset-0 bg-gradient-to-b from-black/10 via-transparent to-black/70" />

Video hero is essential for luxury brands. Fall back to static image if video can't be obtained. Keep videos under 10MB (resize with ffmpeg if needed).

American heritage brands (Ralph Lauren, Levi's, L.L. Bean, J.Crew, Tommy Hilfiger) rarely expose public video CDNs. Plan for a static full-bleed runway or editorial hero with a subtle 1.04 scale-on-mount or parallax effect instead — don't waste time hunting for a video that isn't there.

3. Unsplash (MANDATORY FALLBACK — always works, real product photos)

# Search URL pattern: https://images.unsplash.com/photo-{id}?w=800&q=80
# DO NOT make up IDs — use these tested working IDs by category:

# Luxury perfume / fragrance bottle
curl -sL -o public/images/perfume.jpg "https://images.unsplash.com/photo-1541643600914-78b084683601?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Men's cologne / dark bottle
curl -sL -o public/images/cologne.jpg "https://images.unsplash.com/photo-1594035910387-fea47794261f?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Pink/feminine perfume
curl -sL -o public/images/miss.jpg "https://images.unsplash.com/photo-1592945403244-b3fbafd7f539?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Luxury handbag
curl -sL -o public/images/bag.jpg "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Canvas tote
curl -sL -o public/images/tote.jpg "https://images.unsplash.com/photo-1590874103328-eac38a683ce7?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Leather bag
curl -sL -o public/images/leather-bag.jpg "https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Red lipstick
curl -sL -o public/images/lipstick.jpg "https://images.unsplash.com/photo-1586495777744-4413f21062fa?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Foundation / makeup
curl -sL -o public/images/foundation.jpg "https://images.unsplash.com/photo-1512496015851-a90fb38ba796?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Skincare cream
curl -sL -o public/images/skincare.jpg "https://images.unsplash.com/photo-1556228720-195a672e8a03?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Luxury skincare bottles
curl -sL -o public/images/serum.jpg "https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Gold jewelry / rings
curl -sL -o public/images/jewelry.jpg "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Fashion / clothing
curl -sL -o public/images/fashion.jpg "https://images.unsplash.com/photo-1558769132-cb1aea458c5e?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Building / atelier (hero/about)
curl -sL -o public/images/building.jpg "https://images.unsplash.com/photo-1519643225200-94e79e383724?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# SaaS / tech product screenshot
curl -sL -o public/images/saas-ui.jpg "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Abstract tech / code
curl -sL -o public/images/tech.jpg "https://images.unsplash.com/photo-1518770660439-4636190af475?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# ═══════ ATHLETIC / SPORTSWEAR (verified on Puma transform) ═══════

# Running / runner silhouette
curl -sL -o public/images/running.jpg "https://images.unsplash.com/photo-1508685096489-7aacd43bd3b1?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Training / gym / lifting
curl -sL -o public/images/training.jpg "https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Football / soccer
curl -sL -o public/images/football.jpg "https://images.unsplash.com/photo-1431324155629-1a6deb1dec8d?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Motorsport / racing
curl -sL -o public/images/motorsport.jpg "https://images.unsplash.com/photo-1504276048855-f3d60e69632f?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Kids athletic
curl -sL -o public/images/kids.jpg "https://images.unsplash.com/photo-1503944583220-79d8926ad5e2?w=800&q=80" -H "User-Agent: Mozilla/5.0"

# Athletic fashion / streetwear runner
curl -sL -o public/images/athleisure.jpg "https://images.unsplash.com/photo-1558769132-cb1aea458c5e?w=800&q=80" -H "User-Agent: Mozilla/5.0"

Unsplash ID format caveat: stick to the timestamp-hex pattern (photo-1508685096489-7aacd43bd3b1). Modern Unsplash URLs use slug-style IDs (hEIHXXic3yI) that do NOT work with https://images.unsplash.com/photo-{slug}. If an ID you find is 11 random characters instead of the classic timestamp-hex form, you need the old numeric pattern or the image will 404.

Verify downloads: Check file size with ls -la. Files under 1KB are failures. Failed downloads return ~29 bytes (Unsplash not-found) or ~300 bytes (error page). Re-download with different ID if under 1KB.

4. Placehold.co — LAST RESORT ONLY if Unsplash also fails

curl -sL -o public/images/{name}.jpg "https://placehold.co/800x400/{hex_no_hash}/white?text={Product}"

Required Downloads

Every project MUST have (minimum):

• Logo (SVG from Wikipedia or brand CDN)
• Hero image (brand or category-matched Unsplash)
• 1 image per solution (category-matched Unsplash)
• 1 image per product (category-matched Unsplash)
• Favicon from https://www.google.com/s2/favicons?domain={domain}&sz=64

Catalog size — minimum item count per brand type (REQUIRED)

A thin catalog kills the demo. Every e-commerce, retail, or fashion brand transform MUST ship at least 100 real product items spread across the brand's natural segments. The agent needs enough depth to recommend and compare realistically; an 8-item catalog makes every filter / category / chat prompt dead-end immediately.