Claude Code lets you drag images into the chat. It has gotten quite good at reading UI. So I started using it to design.
The workflow captures the current state of an app’s UI, replicates it in a static HTML mock, and lets you iterate toward new ideas from there. This is much quicker than targeting the actual application code. I use the mock to refine my ideas and create plans to support each feature.
The Workflow
- Load up the existing app. Screenshot the UI you want to iterate on.
- Give the images to Claude with a prompt like this.
I'm going to describe a design by providing natural language and images and you are going to respond by making
HTML-rendered flows of the app.
- Keep iterating on the HTML mocks until they reflect the current UI state.
- Once you reach parity with the application it is time to ask claude to modify the mocks in the direction of your new ideas.
- When the designs are done feed the mocks back into Claude Code and establish a technical plan. The HTML + technical plan becomes context for the actual code changes.
This kind of iteration requires you to know the app how run it in the state relative to the design iteration. You need a design eye and the ability to communicate what you want clearly through prompts. It sits at the overlap of basic developer skills, taste, and writing. With images, the need to communicate verbally is definitely decreased. A picture is worth a thousand words.
Where This Goes
It works for apps that already exist and I imagine it works well for new ones too. You can start from nothing, talk to Claude, generate mocks, and use them as a road map. Plan full-stack features off them. Landing pages. Marketing content.
In an enterprise scenario the mocks could be hosted internally and used as a resource for people reference as the mocks continue to develop. As designs grow there could be a a directories of applications with features as subdirectories all using html to easily integrate into the web. In my scenario, I am doing all static mocks but they could easily be enhanced to add detail of live flows by adding some javascript. Likely still more simple than application code because we can skip unnecessary complexity.
Cheers!
Will