Week 5: Using AI to Design an E-Commerce Product Page

Fast, Functional, and Flawed

Author

Brendan McNulty
February 05, 2025

The Experiment
This week, I wanted to test whether AI could create a high-quality, hands-off product page quickly and easily. My goal was a desktop product page for the beautiful men’s outdoor sandal I designed last week—green and modern, with:

  • Plenty of product images (including lifestyle shots).

  • Reviews and detailed technical information.

  • A bold, clear call to action.

I was aiming high- hoping these tools would handle the task with minimal input while delivering polished results.

The Process

  1. Choosing the Tools
    I asked Perplexity for the best AI tools for designing product pages. It recommended:

    • Claude

    • UIzard

    • Figma

    • Canva

    • Adobe

    • MidJourney

    Someone recommended I look at Jeda.ai too, so I did. I focused on Claude, UIzard, Canva and Figma with UX Pilot, with a quick test of Jeda.ai for comparison. We already know that ChatGPT did a great job with copy and a poor job with design, so i excluded it.

  2. Creating the Prompt
    My initial request to Claude was:
    "Create me a desktop e-commerce product page for a men’s outdoor sandal. Green and modern. Lots of great product images (including in situ), reviews, technical information, and a call to action."

  3. Imposing Constraints
    I limited onboarding of the new tool to three minutes and spent about 20 minutes with each tool. This helped me test how intuitive and effective they were for quick projects.

Tool Comparisons

  1. Claude (7.5/10)

    • Generated a usable product page draft on the first prompt, including HTML code for export.

    • Allowed me to upload images and integrate my copy.

  2. UIzard (6/10)

    • Stood out for its no-code capabilities, enabling the creation of a linked, interactive prototype.

    • Guided me through building an end-to-end experience with prompts and interactions.

    • Its designs were more comprehensive than Claude’s but still felt generic.

  3. Figma with UX Pilot (5/10)

    • I couldn’t find a way to create a product page with Figma AI, so I tried with the UX Pilot plugin.

    • Surprisingly underwhelming compared to the other tools, requiring more effort to get started.

    • While it offered flexibility, it felt less optimized for rapid prototyping.

  4. Jeda.ai (3/10)

    • Gave an overview of what should go on a product page, helping with structure and content hierarchy.

    • However, it didn’t provide actual design capabilities, which made it less useful for this task.

    • As a multipurpose AI tool (mind mapping, flow charting, sticky notes), it’s better suited for planning and brainstorming than design.

  5. Canva(2/10)

    • Canva gave me some banners and Instagram posts, but it wasn’t designing a product page for me.

UIZard

The Outcome

  • Claude: Best for quick, live drafts with minimal effort.

  • UIzard: Ideal for creating no-code prototypes and validating experiences.

  • Figma: Fell short on ease of use, though it offers more flexibility for advanced users.

  • Jeda: Helpful for content planning, but not a serious contender for design tasks.

  • Canva: not really fit for this purpose

While all tools delivered on speed, the designs felt generic and lacked originality. They’re excellent for brainstorming and prototyping but I’d go for Wordpress or some templated process first (caveat is that I didn’t spend a huge amount of time on them, so you’d get more with further tweaking, but that would be the same with a template)

Key Takeaway
AI tools like Claude and UIzard are great for rapid ideation and prototyping, making them perfect for testing ideas and gathering feedback. However, tools like Jeda.ai are better for content planning and brainstorming, showing that the right tool depends on the job.

Pro Tips for AI-Driven UI Design:

  1. Focus on Prototyping, Not Perfection: Use these tools for quick drafts and internal discussions, but don’t expect final-quality outputs.

  2. Choose Tools Based on Your Goal: For quick drafts, Claude is a winner. For interactive prototypes, UIzard is better.

  3. Test Across Use Cases: These tools perform better when tailored to specific tasks—explore their limits to find what works for you.

What’s Next?

  • I’d revisit UIzard to build a larger, linked prototype for testing user flows.

  • Claude’s simplicity makes it worth using for smaller, single-page projects like landing pages.

  • V0.dev is very cool, watch this space for experiments with it

What About You?
Have you used AI tools for design, brainstorming, or prototyping? What worked, what didn’t, and what surprised you? Reply and let me know.