Create a website from an artefact

It is possible for Claude to create code from a visual prompt. The artefact used was a screen shot of an app running in the browser.

A simple web page showing rails left and right for table of contents and related articles, a central area for an article, and a header and a footer.

The written prompt was minimal:

Can you please create a website (index.html and style.css) that will generate a page that matches the attached artefact.

Prompt by Code and People

Claude's reasoning

I'll help you create a website that matches the layout shown in the image. I'll create a clean, modern design that includes the article title, table of contents, main article content, and related articles sections.

I've created a responsive webpage that matches the layout in the image with some key features:

  1. Three-column layout with CSS Grid
  2. Clean, modern design with subtle shadows and borders
  3. Responsive design that switches to a single column on mobile devices
  4. Clickable table of contents and related articles sections
  5. Consistent typography and spacing
  6. Footer with copyright information
  7. Subtle hover effects on links Light shadow effects for depth

Would you like me to modify anything about the design? I can:

  • Adjust the colors or spacing
  • Add more interactive features
  • Modify the responsive behavior
  • Add additional styling elements

Response by Claude (Sonnet 3.5)

The working code can be seen in the AI artefact demo repo.

Related content

Appendix

Claude's response and HTML and CSS.

Further reading