Introduction

Generative AI can be a helpful assistant when coding apps, but what about help designing interfaces for those apps? This video shows how you can use Claude's "Artifact" feature to upload a screenshot of a layout on your computer, ask Claude to render it as HTML, and then elect to post it online; other chatbots have similar capabilities. Here you'll have the chance to try a similar exercise.

👥 You may complete this exercise in pairs: share one screenshot, and each partner runs both prompts in a different chatbot.

Today you'll let chatbots critique a page from the portfolio you made for Task 6. Follow the steps and and post the results to #x-ai-web-design.

⚠️ Do not use a temporary chat for this exercise. You'll need this chat session for Task 7.

💡 The sample prompts follow the  role  output  level  context  standard  structure template.

Upload a web page screenshot

1. Open your Task 6 Pen in full-page view (CodePen: Change View → Full Page).
2. Screenshot it:
   • MacOS: Command-Shift-4 + Space + click (window) or Command-Shift-4 + drag (region).
   • Windows: Alt-PrtScn (window) or Windows-Shift-S (region).
3. Open a chatbot (pairs: one each, no doubling up); free account is fine: ChatGPT, Gemini, or Claude.
4. Upload the screenshot:
   • ChatGPT: + → upload.
   • Gemini: Tools → Canvas, then Add files. (School Google accounts may block Gemini.)
   • Claude: + → upload.
5. ⚠️ Free plans cap uploads (ChatGPT Free: about 3 files a day). Keep your screenshot handy; you'll reuse it.

Get feedback on your page

Naive prompt

1. Upload your screenshot and type only the output:
   📌 Critique the attached screenshot.

Advanced prompt

2. Start a new chat, upload the same screenshot, and ask for design feedback.

   Type a prompt similar to the following:

   📌 Acting as a UX designer who reviews portfolios, write a critique of the design in the attached screenshot. This is the first web page by a student who started coding last week, built by hand in CodePen for an intro new media course. Judge the colors, layout, and typography against Apple's Human Interface Guidelines or Google's Material Design. List three things that work and three to improve, each pointing to a specific spot on the page, in plain language a beginner can act on, under 300 words.

Post your reaction

3. In a single entry in the appropriate channel, please post:
   1. The screenshot you uploaded.
   2. Any additional information you gave for context (eg, "My page is about my favorite food") or followup prompts ("Please explain what you mean by 'Sticky Navigation'").
   3. The specific criticisms made by the chatbot you find helpful.
   4. Any criticisms made by the chatbot that aren't helpful.
   5. What changed, if anything, in the responses for naive and advanced prompt?
   6. Pairs: how did your two chatbots' critiques differ?

   ⚠️ Do not simply paste in the AI feedback verbatim; the entire post should be in your own words.