Back/How I AI
How I AI

How I Put Claude Design and GPT Images 2.0 to the Test: Building Landing Pages, Slides, and Brand Kits

I walk through how to use Claude Design to import a design system, build a landing page, and create a slide deck, and then explore the new GPT Images 2.0 for generating a multi-page brand kit and running a personal color analysis.

Claire Vo's profile picture

Claire Vo

April 22, 2026·10 min read
Episode outline

Claude Design came surprisingly close to usable marketing work once I gave it a structured design system. GPT Images 2.0 produced much stronger layouts and typography than earlier image models, especially after I fed it visual references instead of longer prompts. In this episode of How I AI, I tested both tools on real design tasks: importing a brand system, generating a landing page, turning an article into slides, building a brand kit, and even running a personal color analysis.

I cared less about the flashy first render and more about what happened after it. Could the tools stay visually consistent? How painful was iteration? Did the text hold up? Could I make targeted edits without regenerating everything from scratch? Those are the questions that determine whether an AI design tool becomes part of an actual workflow or just a good demo.

For Claude Design, I used public materials from Lenny’s Newsletter plus one of my own articles to test design-system import, landing-page generation, and deck creation. For GPT Images 2.0, I used ChatPRD reference imagery and a personal photo to see how well the model handled layout, typography, and visual direction.

The results were useful precisely because they were uneven. Claude Design was strongest when it had structured brand context and clear source material. It handled branded prototypes and content-to-deck conversion better than I expected, but generation was slow and credit limits showed up quickly. GPT Images 2.0 improved dramatically once I supplied strong references instead of relying on descriptive prompting alone.

Testing Claude Design with a real design system

Claude Design did not replace Figma in my testing. The faster feedback loop in Figma still matters a lot when you are making dozens of small visual adjustments. But Claude Design was compelling as a branded prototyping and presentation tool, especially once the design system was explicit enough for the model to follow.

Import a recognizable brand system from public assets

I tested the import flow using Lenny’s public homepage. The goal was simple: could Claude recover enough of the visual language to generate something that actually felt like a Lenny’s Newsletter prototype instead of generic AI output?

The source package

  1. Step 1: Save the public page HTML plus the key visual assets needed for the test, including the logo, fonts, and campfire graphic.
  2. Step 2: Upload the HTML, images, font notes, and any approved repository access into the Create your design system flow. I intentionally left the additional-notes field blank because I wanted to see what the model inferred directly from the source files.

Only upload assets and repositories you have permission to use. A public website is enough for a prototype experiment, but not permission to reuse someone else’s brand commercially.

The Claude Design form filled out for Lenny's Newsletter

Claude Design treated those files as the source package for its design-system extraction pass.

  1. Step 3: Let Claude inspect the materials. The tool estimated roughly five minutes for extraction and actually took about that long while parsing the HTML, identifying colors and typography, and organizing reusable components.

One useful detail was the intermediate extraction view. Claude exposed the visual signals it was using to build the system instead of hiding the reasoning entirely behind a final render.

A view of the Claude Design interface by Anthropic Labs, showing the process of creating a new high-fidelity prototype, selecting a design system, and browsing existing projects like 'Lenny's Newsletter Design System' and 'Landing Page'.

That mattered because I could catch mistakes early. It is much cheaper to correct a typography assumption before generating multiple pages than after the model has already propagated the wrong style everywhere.

  1. Step 4: Review the imported system. Claude generated categories for typography, UI kits, color palettes, components, and brand marks. The main mismatch was the header typography. It leaned into the italic serif aesthetic Claude often favors, so I corrected it with a short instruction to use sans serif for most headings.

After that adjustment, the imported system was close enough to use for downstream prototypes.

Demonstrating an AI design tool, a user provides a detailed prompt to create a landing page for a PRD generator and AI PM coach, leveraging a specific design system and additional design assets.

Once the system existed, I could select it for later landing pages and slide decks without re-uploading the assets each time.

The bigger lesson from this workflow is that AI design tools respond much better to structured context than screenshots alone. Breaking a design system into tokens, typography, components, colors, and brand assets gives the model meaningful constraints instead of asking it to visually guess.

Generate a branded landing page from conversational instructions

I used the imported system to create a fictional product called Lenny Doc, an AI product-management coach trained on Lenny’s archive. This was purely a prototype exercise, not a real product or endorsement.

  1. I selected the imported design system, opened the high-fidelity prototype flow, and described the landing page conversationally instead of writing a rigid spec. You can follow the full implementation in How to Build a High-Fidelity Landing Page with Claude Design. See How to Build a High-Fidelity Landing Page with Claude Design.
Please help me make a landing page for a PRD generator and AI PM coach powered by all the data in Lenny's newsletter adhering to the Lenny newsletter design system. Make it awesome.

How the prompt evolved through Claude’s Q&A flow

The initial request established the product concept, target audience, and requirement to stay aligned with the imported brand system. Claude then turned that into a structured interview rather than immediately generating the page.

  1. Claude asked follow-up questions about the product name, tagline, target audience, interaction depth, pricing direction, and preferred hero style. I answered the important product questions and let the model decide most section layouts. That balance worked better than over-specifying every component up front.
  2. I kept the default three-variation output. This ended up being one of the smartest parts of the workflow because comparing alternatives was much faster than trying to verbally describe every layout preference in advance.
  3. The generation took about ten minutes, which is long enough to interrupt creative flow. But the result was fairly coherent: the colors and logo carried through from the imported system, the page structure felt complete, and Claude even added lightweight interactive behavior. The biggest recurring tell was the italic serif styling Claude tends to inject into landing pages unless corrected.
  1. The tweaks panel was more useful than I expected. Instead of rewriting prompts, I could swap headline styles, hero layouts, CTA approaches, pricing sections, and background treatments through targeted controls. That made iteration feel closer to a design tool and less like repeated prompting.
A note on the experience: I immediately hit my usage limit after just a few projects and had to pay $200 to top up my credits. The slow generation times and strict limits are real-world friction you have to account for.

Convert long-form content into a branded slide deck See How to Convert an Article into a Polished Slide Deck with AI.

Next, I uploaded one of my articles as a PDF, selected the same design system, and asked Claude Design to turn the content into a teaching deck.

"Let's build a deck teaching people how to set up Open Qua based on the uploaded source."

This was probably the strongest Claude Design workflow in the episode. The generated deck felt close to presentation-ready. One small detail captured the source material particularly well: instead of pasting terminal commands as static screenshots, Claude rendered them as terminal-style slides with a blinking cursor and lightweight interactive feel.

The generated slide deck showing the Open Claude content with the cute fake terminal

Because the slides are effectively code-backed, the deck could include small animated or interactive touches while still staying visually consistent with the imported brand system. For training decks, onboarding material, and product-marketing presentations, that workflow looked genuinely practical.

Use reference aesthetics for creative redesigns

For the final Claude Design experiment, I removed the design system entirely and asked for a 1990s GeoCities-style redesign of the Lenny’s Newsletter homepage.

The result, Lenny’s Product Zone, leaned fully into brick backgrounds, Comic Sans, chaotic layouts, and copy such as "Your OKRs are cringe and seven ways to fix them before Q3."

This test reinforced something important about prompting creative work: reference styles are much more effective than vague adjectives like fun or playful. Giving the model a specific aesthetic target produced a far more coherent result. The output was entertaining and creatively useful, but still something a human would need to review carefully before adapting any recognizable brand.

The glorious 90s GeoCities 'Lenny's Product Zone' redesign

Testing GPT Images 2.0 on layout-heavy design work

I then shifted to GPT Images 2.0 to test a different problem: could an image model reliably combine readable typography, layout structure, imagery, and brand direction inside a single generated asset?

Generate and refine a multi-page brand kit

I adapted a prompt I found on X and asked GPT Images 2.0 to generate a ChatPRD brand kit. The workflow combined typography, visual identity, layout composition, and brand voice in one generation pass. See How to Generate a Professional Brand Kit with GPT Images 2.0.

  1. Step 1: Generate a baseline. The first version handled typography much better than older image models and organized the multi-panel layout cleanly, but it did not actually resemble the ChatPRD aesthetic.
  1. Step 2: Add references. I uploaded approved ChatPRD imagery with the brighter pink palette and pixelated visual style I wanted, then asked the model to revise the kit using those references.
The final, much-improved brand kit that incorporates the reference image style
  1. Step 3: Review the revision. The second pass was substantially closer to the brand direction. The references corrected the visual language far more effectively than extra descriptive adjectives would have. Even then, a designer would still need to review hierarchy, accessibility, consistency, and image rights before using anything publicly.
Final Brand Kit

The key insight from this workflow was that strong visual references matter more than increasingly elaborate prompt wording. The first generation established structure. The references gave the model the taste level and aesthetic constraints it lacked.

Test image analysis with a personal color palette

For a lighter experiment, I uploaded a photo of myself and asked GPT Images 2.0 to generate a full personal color analysis with palette recommendations, typography, styling, and outfit layouts.

  • The first pass categorized me as warm neutral, which did not line up with my actual palette.
The corrected and accurate 'dark winter' color analysis
  • I corrected the assumption by explaining that my natural hair color is darker than it appeared in the uploaded photo.
  • The revised output shifted to a dark-winter palette and noticeably improved the typography and layout quality. Some of the generated faces and outfit examples still drifted into distortion, especially lower in the composition. It was a good reminder that this kind of analysis is highly subjective and extremely sensitive to source images. The workflow worked better as inspiration and visual exploration than as a definitive assessment.

Where these tools actually fit

Claude Design was strongest on branded landing pages, prototype concepts, and slide decks generated from existing content. The design-system import reduced visual drift enough to make the outputs recognizable, especially for marketing-style layouts. But the slow generation cycles and aggressive credit limits made rapid iteration noticeably less fluid than working directly in Figma.

GPT Images 2.0 performed best when text, layout, and reference imagery needed to coexist inside a single generated asset. The typography quality was meaningfully better than earlier image-model generations, especially on structured layouts like brand kits and infographics. But every output still required human review for brand consistency, accessibility, and visual polish.

Neither tool replaced the existing design stack in my testing. Claude Design gave me a credible workflow for turning structured brand context into prototypes and presentation material. GPT Images 2.0 gave me fast visual exploration and surprisingly usable typography. The common pattern across both tools was that they improved dramatically when I supplied strong source material and treated the outputs as drafts instead of final assets. That is the part worth copying: invest effort into the inputs, use AI to accelerate exploration, and keep humans responsible for taste, approval, and production quality.

Sponsors

Thanks for supporting How I AI

Rippling

Stop wasting time on admin tasks, build your startup faster

WorkOS

Make your app enterprise-ready today

Build your next product with ChatPRD

Turn an idea into a PRD, user stories, and a plan.

Try ChatPRD free

Start shipping
better products.

Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.

Free to start
No credit card
SOC 2 certified
Enterprise ready