Session 3: Building Elegant Landing Pages

Codex is OpenAI's counterpart to Claude Code, and the tour covered what a non-engineer needs: projects are just folders (create fresh or point at an existing one); the model is GPT-5.5 with a reasoning selector — low/medium for simple work, high for coding, extra-high for gnarly debugging — which doubles as a cost dial. The top-right panel holds the working surfaces: file browser with previews, an in-app browser (the feature he says Claude Code lacks — preview the site, scroll it, screenshot sections), code-change review, and a terminal. Every project gets git tracking automatically; the branch/changes vocabulary gets its own session later.

His tooling politics are refreshingly provisional: he downgraded Claude Code, runs Codex at $100 (a $20 ChatGPT plan is enough to start), is moving his team over — and openly says he may switch back when Anthropic ships something better. The meta-lesson: agents are interchangeable workbenches; skills and workflows (this session's real content) travel between them.

The anatomy runs top to bottom: a navbar with clear labels; the hero — the most critical piece, first thing to load — which must show the outcome the audience wants, handle objections up front, and carry a strong headline, clear subheading and a product visual or demo, always mobile-first; social proof immediately after (logos, credibility markers); then the supporting cast — use cases, why-us, how-it-works, benefits, pricing, testimonials, CTA, FAQs, footer. Learning these terms is practical, not academic: 'make the hero show the outcome and move social proof above the fold' is a usable prompt; 'make it better' is not.

Then the twist that frames the whole session: this diagram is universally known — including by the models. If a hundred people feed the same anatomy to the same agents, a hundred near-identical pages result. Nailing the anatomy is table stakes; the rest of the session is about the uniqueness layer the diagram can't provide.

The psychology: the output quality we now dismiss as 'AI slop' would have stunned anyone a year ago. What changed isn't the quality — it's the abundance. When every AI agency ships the same anatomy, same purple-gradient hero, same blocks-blocks-blocks sections (features in 4 blocks, pricing in 3, testimonials in 3), pattern recognition kicks in and the whole class reads as machine output. Slop is what familiarity does to competence.

Two practical corollaries. First, the fix isn't trying harder within the pattern — it's breaking the pattern (skills like Hallmark exist precisely for this). Second, from the Q&A: slop is irreducibly subjective — a Microsoft engineer scoffs at the swipe-to-apply job app that's making a Hong Kong kid millions. No tool can flag it, and you shouldn't pre-reject your own work: ship it, market it, and let real users — not your inner critic — decide.

Strip the branding: a skill is a folder. Its heart is SKILL.md — your process (how YOU make slide decks, edit videos, process invoices) written as instructions. Around it, optional structure: a references folder for images and style guides, templates, an outputs folder for temp files, extra instruction docs like dark-theme.md or design-guidelines.md. Simple processes — 'take these balance-sheet PDFs, produce an HTML dashboard' — need nothing more. Complex ones — video editing, calling an image-model API — need scripts too, and the crucial relief: the coding agent writes those scripts itself. You define the process; it handles the code.

Two frames elevate this from mechanics to strategy. Craft: a serious skill is a project — he's spent weeks iterating single systems, and that invested iteration is where the value concentrates. Market: skills.sh open-sources processes (Anthropic's own frontend-design skill, web-design guidelines, Remotion practices — pick by install count, build on top), and the business parallel is explicit — skills are what n8n workflows were a year ago. Clients already pay for AI subscriptions; what they'll buy from you is systems that run inside the AI they already have.

Hallmark exists to break the default pattern. Build asks three questions — product, audience, theme — and produces pages that violate the standard layout on purpose: the live demo's voice-agent site opened with a terminal-style navigation and numbered feature rows instead of card blocks. Study is the sleeper feature: point it at any site you admire (URL or screenshot) and it reverse-engineers the entire design into JSON — hero archetype, display and body type roles, accent hue, rhythm, palette — a theme spec you couldn't have articulated yourself, now pasteable into any build prompt for your own product. Audit reads YOUR site and reports its slop signals; redesign keeps brand and copy while remaking everything visual.

His validation was adversarial: he took the day's #1 Product Hunt site, described the product to Codex, and had Hallmark recreate it — first shot, before the session, no iteration — and the result stood comparison. The working rhythm he teaches: one-shot for the draft, then iterate section by section using the anatomy vocabulary.

21st.dev catalogs components: navigation menus in every style, carousels, buttons, animations, and — his most-used shelf — backgrounds, from shaders to the Perplexity-style animated text backdrops. Each entry has a copy-prompt button that captures both the prompt AND the code to regenerate the element. The workflow is three moves: browse until something fits, copy, paste into your agent with placement context — 'add this carousel to showcase the features', 'make this the hero background'. The agent integrates it into your existing page.

Above the component level sits the inspiration stack: motionsites.ai for premium motion design (copy the prompts, don't buy the subscription — he says so explicitly), Dribbble and Framer when you don't yet know what feel you're after. And the honesty about provenance: everyone copies — hired design agencies harvest elements from Netflix and YouTube and recombine; AI imitating twenty years of human design work is the same practice at speed. The conclusion he lands: for getting started, you largely don't need a designer anymore.

The workflow chains three generations. First the page: one line pointing at the taste skill ('design a high-end premium website for an interior design agency') — it even generated its own images unprompted. Then the motion: a scene image from Nano Banana or ChatGPT, fed to Gemini's video model with the prompt pattern that matters — 3D render style, panning, white background, super high quality, 'like something you'd see on a landing page.' Then the integration: upload the 10-second .mp4 and ask for it as the hero background, centered, with an inward masking gradient — dark at the edges, alive in the middle — so the motion reads as design rather than noise.

Total elapsed time for the interior-design demo: five to ten minutes. Total cost: the agent subscription (video was free-tier Gemini). His framing of the economics is the takeaway: this exact look is what agencies charged $5,000-10,000 for. When you're stuck for a concept, brainstorm with the agent — exploding-view product videos, scroll-into-the-scene 3D effects — then generate.

The decision tree is two branches: a static site — HTML, CSS, JavaScript, which is what these landing pages are — hosts free on GitHub Pages; anything with a real back end goes to Vercel. But the deeper lesson is posture: you don't need to know this. Paste 'what would be the best way to host this website?' and the agent — which can read the actual code — answers correctly, then walks you step-by-step through repo creation, Pages setup, DNS configuration ('I'm non-technical, tell me where to click'). Domains come from GoDaddy or Namecheap; 'your page would be live in 30 minutes max.'

The architecture note that professionalizes it: keep the landing page in its own repo, separate from the product. His Glued setup demonstrates — marketing site and app are different repositories and backends joined by a URL, so hero-copy A/B tests never touch the product code. And the migration paths are symmetrical-ish: Lovable exports a code zip that opens directly in Codex; beginners who dread the GitHub/Cloudflare vocabulary should simply stay on Lovable/Replit's one-click hosting until their ambitions outgrow it.

The ladder: Lovable and Replit for beginners and prototyping — one-click hosting, no database/security decisions, perfect for testing whether an MVP resonates. The moment systems get serious, graduate to Codex or Claude Code, which do everything (sites, automations, skills) for one subscription. Antigravity sits to the side: a code editor with model choice, better for people who already feel at home in editors. Between Codex and Claude Code, his current lean is Codex — while openly flagging it as two weeks from revisable.

The deeper habits: parallel skill testing — same brief to Hallmark, taste, and three others, compare outputs, pick the winner ('that is how you should be spending your tokens'); the Ollama reality check — 7B models on an 18GB MacBook were 'terrible', so either 24GB+ hardware or stay happily on the $20 cloud plan; and the executive-assistant test for agent platforms like Hermes/OpenClaw — they shine for people drowning in managerial overhead (founders, C-suite, calendar-and-meetings lives), and 'most people do not deserve an executive assistant.' If you're building and testing, a coding agent serves you better.

The no-clients-yet anxiety gets a structural answer: you don't need case studies — you need evidence of capability. Write blogs showing how to automate a lead-enrichment pipeline; catalog every automation you build (his own use-cases page began as a month of daily automations, categorized and described — no client names anywhere). Session 1's white-label framing applies: results without attribution still demonstrate the chops. The Catalyst projects you're about to build ARE the portfolio; this session's page-building skills are how they get displayed.

The market Q&A drew the demand map honestly: business owners lack time for websites, so demand exists — but website-building-as-a-service on Upwork/Fiverr runs thin margins. The value pocket is local businesses — the café with no site, roofing companies, HVAC services — who pay well for fast professional pages and are reachable through exactly the community channels Session 2 taught. And the standing-out question got his leverage doctrine: don't grind three months building an audience when a partner already has one — find the person with the leverage you lack, split, move fast.