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.

Pick one of the two following exercises and post the results to #x-ai-web-design.

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

Get feedback on an existing website

1. Visit a website (such as your portfolio) and capture a screenshot of one or more pages, including your home page, with Command-Shift-4 + Space + click (MacOS) or Alt-PrtScn (Windows).
2. Visit ChatGPT or another chatbot and create an account if you don't already have one.
3. Upload your screenshot 📎 and ask for design feedback.

   Type a prompt similar to the following:

   📌 Acting as an expert in Web and User Experience design, write a critique of the design in the attached screenshot. This is the home page of a portfolio of a recent graduate from a New Media program hoping for a career as a professional photographer. Evaluate the design according to common standards such as Apple's Human Interface Guidelines or Google's Material Design standard as applied to background-colors, layout, typography, and other elements. Please cite aspects that are working as well as aspects that could be improved.
4. In a single entry in the appropriate channel, please post:
   • The screenshot you uploaded.
   • Any additional information you gave for context (eg, "I will be sharing this portfolio in applications for graphic design internships") or followup prompts ("Please explain what you mean by 'Sticky Navigation'").
   • The specific criticisms made by the chatbot you find helpful.
   • Any criticisms made by the chatbot that aren't helpful.

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

Generate a website from a screenshot

1. Navigate to some interface on your laptop or phone, such as a Finder window, application interface, or section of a popular website. Capture a screenshot of this area.

   💡 It's best to capture a small portion of a screen rather than a very complicated layout.

2. Back in the chatbot, upload your screenshot and ask the AI to generate a website with that appearance.

   Type a prompt similar to the following.

   📌 Acting as an expert in Web and User Experience design, write the code required for a web page such as the one in the attached screenshot, which represents a playlist for a music streaming app. Try to capture the layout, colors, and typography. Please separate the HTML and CSS into two separate code blocks.
3. Now visit Codepen and create an account if necessary.
4. Create a new Pen by clicking the word Pen at upper left.
5. Paste the HTML and CSS snippets into the appropriate panes in Codepen, and evaluate the preview of the resulting web page.
6. Return to the chatbot and ask for revisions that better match the original, pasting the code back into Codepen to test the results.
7. Post the original screenshot from your computer and the closest AI-generated design as a Codepen screenshot.