GoodCase.aiAI News · Radar↗AI Map↗Course · LearnPrompt↗
ProjectsGoodCase.aiAI News Radar ↗AI Map ↗LearnPrompt ↗
GoodCase.aiGoodCase.aiAI Prompt Case Collection
GoodCase.ai
RankingsCasesSkillsFavoritesSubmitDailyJoin us
中文EN
Agent Access →

Projects

AI News · Radar ↗AI Map ↗Course · LearnPrompt ↗
GoodCase.aiGoodCase.aiAI Prompt Case Collection
RankingsCasesSkillsFavoritesSubmitDailyJoin us
中文EN
Agent Access →

Loading…

GoodCase.ai · AI Prompt Case Collection
DSH PluginsChangelogFeedback
ModelsCreatorsSeedance 2.5Seedance 2.0GPT Image 2GeminiNano Banana ProClaudeClaude Opus 5.5Grok ImagineVeoKlingQwen ImageGPT Image 1.5MiniMax H3
← All Skills

GoodCase Official Skill · Shared method across creators

Landing-page information structure

Arrange value proposition, proof, features, and calls to action into one complete page journey.

61 Cases · 41 Creators · AI Coding (UI) · Latest example 08/20/2026

Claude + Codex + Gemini + OpenClaw Rebuilt Landing Page
Perplexity Computer Auto-Generated Startup Landing Page
Grok 4.3 Cream-Colored E-Commerce Website

Verified installable Agent Skill

SKILL.md + .skill

Install into your agent.

npx skills add LearnPrompt/goodcase-lite --skill landing-page-information-structure --global --copy --yes --full-depth
Download .skill ↓Inspect source ↗

Installation contract

  • ✓ Standard SKILL.md frontmatter
  • ✓ Inputs, workflow, output, verification, safety
  • ✓ Bundled Case evidence and attribution
  • ✓ Validated and packaged by skill-creator
  • ✓ Installed via `npx skills add` and verified on 2026-10-17

Method skeleton

  1. 01Keep one value proposition above the fold
  2. 02Order problem, proof, and features
  3. 03Make every section lead to one action

Why it exists

61 published cases from 41 creators share the same explicit result pattern.

How to make it

What it is for, what to prepare, and where it breaks.

Summarised by GoodCase from the representative cases below: their full prompts and our retest records. Each case keeps its creator credit and original post.

Good for

Use this when you want an AI coding agent to build a landing page that walks one visitor toward one action, such as signing up, booking a demo, buying or joining a waitlist. The focus is section order and what each section has to say. It is overkill for a lone hero, a single component or a 404 page.

Inputs to prepare

  • —One sentence on what the product does and who it is for
  • —An ideal-customer sketch: what they want, what confuses them, what makes them hesitate
  • —One primary and one secondary action, for example Get Started and View Demo
  • —Proof you can actually use: real numbers, customer quotes with name and role, logos, awards or guarantees. If you have none yet, mark them as placeholders
  • —A feature list, ideally each tied to the objection it answers, plus pricing and FAQ if relevant
  • —Visual direction and delivery: palette, fonts, a single HTML file or a named stack, and your own image and video URLs

Method steps

  1. 01Pick one reader and one action. Following @JayPROb01, open the prompt with what the customer wants, what makes them hesitate and what the page should get them to do.
  2. 02Look at a few sites in the same niche for section order, CTA wording and trust elements. Take the structure, not the copy.
  3. 03Lay out the skeleton: hero with the value proposition, primary button and one trust signal; then proof; then how it works and features, each tied to an objection; pricing and FAQ if needed; close with one CTA that repeats the key number.
  4. 04Put each section's headline, numbers, quote authors and button labels in the prompt itself, the way @aigoldrushh and @viktoroddy do, rather than just asking for a testimonials section.
  5. 05State the visual no-gos and the delivery format, such as no stock gradients or default fonts, one HTML file, responsive layout, no follow-up questions.
  6. 06After generation, check section by section that nothing is missing and long lists were not cut, then rewrite generic copy by hand. To explore, generate a few variants per section and stitch the best ones.

Variables to swap

  • —Product, target customer, and the primary and secondary actions
  • —Proof format: logo wall, big numbers, named testimonials, awards or a guarantee bar
  • —Number and order of sections, such as adding a comparison table, founder letter or case studies, or dropping pricing
  • —The objection each feature answers
  • —Visual direction: dark or light, one accent color, font pairing
  • —Delivery: single HTML file, Next.js with shadcn, or React with Vite and Tailwind

Common failures and limits

  • —Long lists get dropped. Retest data: in the 2026-08-23 run of grok-4-3, the 10-product grid was missing entirely and all three automatic reviewers marked it degraded. With many sections and items, check every block after generation.
  • —Fake proof. @thisdudelikesAI's prompt allows simulated social proof, and @aigoldrushh labels the footer as a demo store. Swap placeholder numbers and quotes for real ones before launch, or label them clearly.
  • —Template look. From the prompts' own avoid lists: @elvissun bans purple-blue gradients, default fonts and the predictable hero-CTA-features-testimonials template, and @JayPROb01 asks for no buzzwords and no filler. Keep the logic, but make the look and copy your own.
  • —Copy stays too safe. @elvissun reports that 4 of the 6 hours 14 minutes went into copy, because AI drafts were directionally right but generic. That step still needs a person.
  • —Missing asset URLs. In our stored copies of prompts such as google-stitch-claude the video URLs are empty, so a straight copy will lack the background videos. Supply your own media.

What you should get

It depends on the prompt. @elvissun and @aigoldrushh ask for one HTML file with embedded CSS and JS that opens in any browser; @viktoroddy specifies React, Vite, TypeScript, Tailwind and shadcn/ui; @JayPROb01 produces a section-by-section site structure, not code; @thisdudelikesAI also asks for a startup overview, go-to-market plan and competitor notes alongside the page. Pages run 7 to 10 sections and all ask for a responsive layout. No fixed aspect ratio is specified.

What our retests cover

Only gpt-5.6-sol is verified: all 5 representatives have a retest in which it regenerated the page, judged automatically by models with no human review. Nothing can be claimed for Claude on these five. In this skill, claude-sonnet-5 generation retests cover only 19 single-screen or component specs (2026-08-31, 17 complete, 2 blank pages), none of them a representative here. Where creators used Claude themselves (@elvissun with Claude Design, @viktoroddy with Claude), that is the original tool, not our retest.

Representative cases

  1. Claude + Codex + Gemini + OpenClaw Rebuilt Landing Page

    By @elvissun · original post ↗

    It spells out each section's job most clearly: a value proposition of 12 words or fewer with trust signals up top, every feature paired with the buyer objection it answers, FAQ for the leftover doubts, and a closing CTA.

    Full prompt and retest record →
  2. Perplexity Computer Auto-Generated Startup Landing Page

    By @thisdudelikesAI · original post ↗

    A ready-to-reuse section checklist in a sensible order: hero, 3 to 5 benefits, how it works, social proof, features, pricing, FAQ, final CTA, and it asks for copy that reads like a real site rather than notes.

    Full prompt and retest record →
  3. Grok 4.3 Cream-Colored E-Commerce Website

    By @aigoldrushh · original post ↗

    Every section ships with its exact copy and numbers, and the proof is layered: an award badge and customer count in the hero, a guarantee bar right below, testimonials later, and the closing CTA repeats the customer count.

    Full prompt and retest record →
  4. Brand Strategist-Style Website Structure Prompt

    By @JayPROb01 · original post ↗

    It makes you define the ideal customer, what makes them hesitate and the one action the page should lead to, then write each section's purpose and the decision it moves forward. Good as a first pass before a build prompt.

    Full prompt and retest record →
  5. Google Stitch vs. Claude Web Generation

    By @viktoroddy · original post ↗

    A complete SaaS page spec: hero, three-column features, alternating explainer rows, a big-numbers band, three named testimonials, then a two-button CTA and footer. It also has the most retest runs in this set.

    Full prompt and retest record →

Case evidence

Judge the Skill through finished work.

Showing 12 of 61
Claude + Codex + Gemini + OpenClaw Rebuilt Landing Page
AI Coding (UI)XAdded 07/28/2026

Claude + Codex + Gemini + OpenClaw Rebuilt Landing Page

A website case by @elvissun made with Claude Design · Codex · Gemini · OpenClaw, including the public result, full prompt, and original source.

Skill · Landing-page information structure

Prompt

I rebuilt my landing page in one day using Claude Design, Codex, Gemini, and OpenClaw together. a 10-step process where each tool handled a different part of the job. here's everything I did: 1. generate range fast h

Source heat · X
12
Stability
89
View case →
Perplexity Computer Auto-Generated Startup Landing Page
AI Coding (UI)XAdded 07/28/2026

Perplexity Computer Auto-Generated Startup Landing Page

A web case created by @thisdudelikesAI using Perplexity Computer, including the public result, full prompt, and original source.

Skill · Landing-page information structure

Prompt

this was the exact prompt: "Create a complete startup concept and generate a full, visually structured landing page for it. 1. Startup Overview - Name of the company - One-line tagline - Clear description of the produc

Source heat · X
4
Stability
86
View case →
Grok 4.3 Cream-Colored E-Commerce Website
AI Coding (UI)XAdded 07/28/2026

Grok 4.3 Cream-Colored E-Commerce Website

A web case by @aigoldrushh using Grok 4.3, including the public result, full prompt, and original source.

Skill · Landing-page information structure

Prompt

Grok 4.3 beta is coming for Claude Design🤯 Here's the exact prompt to build the website shown in this video. (Must Bookmark) "Use Tailwind CSS (include via CDN), soft warm cream/beige background (#F8F1E9), playful bu

Source heat · X
2
Stability
86
View case →
Brand Strategist-Style Website Structure Prompt
AI Coding (UI)XAdded 07/28/2026

Brand Strategist-Style Website Structure Prompt

A web case created by @JayPROb01 using a general web generation prompt, including the public result, full prompt, and original source.

Skill · Landing-page information structure

Prompt

“what should I put on my website?” Here’s the exact prompt to stop guessing (save this) PROMPT: "You are a senior brand strategist and conversion focused web designer. Your task is to create a clear, persuasive, prem

Source heat · X
4
Stability
86
View case →
Google Stitch vs. Claude Web Generation
AI Coding (UI)XAdded 07/28/2026

Google Stitch vs. Claude Web Generation

A web case by @viktoroddy using Google Stitch · Claude, including the public result, full prompt, and original source.

Skill · Landing-page information structure

Prompt

Access ALL prompts for stunning animated websites in one click: Full Prompt to Recreate the Landing Page Create a dark, premium SaaS landing page for a fictional company called "APEX" — a revenue acceleration platform

Source heat · X
99
Stability
86
View case →
Mindloop Landing
AI Coding (UI)MotionSitesAdded 08/19/2026

Mindloop Landing

Dark monochrome newsletter landing page built with React, shadcn/ui and Framer Motion. The font strategy of Inter paired with italic Instrument Serif can be reused as a whole.

Skill · Landing-page information structure

Prompt

Build a dark monochrome landing page called Mindloop — a newsletter/content platform. Use React + Vite + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion. Fonts: Inter (sans) and Instrument Serif (serif, used for italic accent words).…

Source heat · MotionSites
—
Stability
94
View case →
No-Code Waitlist
AI Coding (UI)MotionSitesAdded 08/13/2026

No-Code Waitlist

Waitlist page for a no-code product, built with React, Tailwind v4, Motion and hls.js, as a dark single screen with a streaming video background.

Skill · Landing-page information structure

Prompt

Build a full-screen dark hero section landing page in React + Vite + Tailwind CSS v4 + Motion (framer-motion) + Lucide React icons + hls.js. The page should be a single screen (100vh, no scroll) with a black background, a fullscreen backgr…

Source heat · MotionSites
—
Stability
74
View case →
Email Landing Page
AI Coding (UI)MotionSitesAdded 08/13/2026

Email Landing Page

Landing page for the AI email client Aura, built with React 18 and motion/react, with a premium minimal feel.

Skill · Landing-page information structure

Prompt

Build a premium, AI-native email client landing page called "Aura" using **React 18 + TypeScript + Vite + Tailwind CSS + motion/react (framer motion) + lucide-react**. The aesthetic is dark (bg `#0c0c0c`), cinematic, glassy, with a looping…

Source heat · MotionSites
—
Stability
94
View case →
Agency-Style Website for a Client Named AP
AI Coding (UI)XAdded 08/12/2026

Agency-Style Website for a Client Named AP

A directive prompt that tells Gemini 3 Pro to take on the role of the studio makemepulse and build a website for a client named AP, with attention to careful execution.

Skill · Landing-page information structure

Prompt

You are the studio {argument name="studio_name" default="makemepulse"}. Build me a website for {argument name="client_name" default="AP"}. Think carefully and make no mistakes.

Source heat · X
3
Stability
85
View case →
One-Line Neobrutalist Webpage
AI Coding (UI)XAdded 08/04/2026

One-Line Neobrutalist Webpage

Three sentences — a style name, a push-the-limits intensity cue and two technical constraints — are enough because neobrutalism is a visual language the model already has abundant training data for.

Skill · Landing-page information structure

Prompt

Make a neobrutalist webpage, make it extremely creative, as far as possible, push the limits. Add smooth scroll animations, add fancy colors and tailwind css styles. Make it responsive. title of th

Source heat · X
86
Stability
91
View case →
Cinematic Scrolling Pet Food Webpage
AI Coding (UI)XAdded 07/28/2026

Cinematic Scrolling Pet Food Webpage

A webpage case by @johannesasgeir made with Gemini AntiGravity, including the public result, full prompt, and original source.

Skill · Landing-page information structure

Prompt

I made this $10,000 website with one prompt over the weekend… Just joking. I made another mock-up webpage for fun using one main prompt and a few smaller prompts to adjust it. It mostly cost me some time and about 1% o

Source heat · X
3
Stability
62
View case →
Tokyo Software Agency Landing Page
AI Coding (UI)XAdded 07/28/2026

Tokyo Software Agency Landing Page

A web page case completed by @DevBySami using GPT-5.6 Sol · ShioriCode, including the public result, full prompt, and original source.

Skill · Landing-page information structure

Prompt

GPT-5.6 Sol is way better at UI when not used in the Codex harness. It generated this landing page for a software agency with this prompt: "Design a beautiful landing page for a software agency based in Tokyo, Japan."

Source heat · X
1
Stability
83
View case →

Creator practice

Creator versions

Creator practices derived from this shared method, including versions not yet listed in the catalog.

viktoroddy · Pixel-Exact Dark Hero

Creator evidence

Methods stay attached to their makers.

11 CasesviktoroddyView creator →5 Casesshushant_lView creator →3 CasesMotionSitesView creator →3 Casessergey_molomanView creator →2 CasesalbysjourneyView creator →2 CasesOluwaphilemon1View creator →1 Cases0fficialRohitView creator →1 Casesaaryan_kakadView creator →1 CasesAbhinavGirdharView creator →1 Casesaiedge_View creator →1 CasesaigoldrushhView creator →1 CasesAIwithArsalanView creator →

A Skill is a derived reading layer. Every claim must trace back to published Cases.