Claude is one of the tools I didn't expect to become part of my stack, mainly because I never really paid attention to it, as it seemed to be a thing for coders. But I definitely regret not using it sooner now, even though I've yet to touch Claude Code. Chat and Cowork have been where most of my work happens, and I've especially taken a liking to its Artifacts feature because it lets me practice design prototyping. Moreover, it's the perfect space to visualize an idea you might have had for a long time. I tried to make one of my own, and here's how it went…

We all have an idea that we wish to see come to life

Mine wasn't exactly original, but definitely something I've wanted to try for a while

The tool I've been toying with for a while now already exists. Both Photopea and Affinity, my top editors, have it, and they implement it pretty cleanly. However, I don't always want to open a whole editor just for this one task. The tool I'm talking about is Perspective Transform (or Perspective Warp, or Mesh Transform, or any variation of those).

You grab the control points around an image and drag them independently so the image distorts to fit whatever surface you're placing it on. For device mockups specifically, where the screen is sitting at an angle, this is the only way to make a UI screenshot look like it actually belongs there instead of just being pasted on top.

As I said, Photopea and Affinity handle it pretty well, but not exactly the way I would prefer. To get more than four handlebars in Photopea, you have to click through more features, and Affinity splits its Perspective and Mesh abilities. I wanted them combined, and for the tool to give me an easy way to choose the number of control points.

So I decided to make my own (or at least tried to). A perspective transform tool made just for the purpose of mockups, following my preferred user flow.

Building my design tool through conversation

More iterations than I expected, less technical knowledge than I assumed

I just dove straight into it with plain language. I started by describing my idea to Claude Chat, and it spit out an artifact in about one minute. You can use your artifacts in the side window or download them and run them in your browser. It quickly became clear to me how much I still have to learn about actually building products...

The warp factor worked fine, but everything around it kept breaking. Every time I ran the prompt through Claude again with my improvement requests, a new issue would pop up. First, it didn't have layers, then I wasn't able to adjust the background image, then there was no opacity feature, then I wasn't able to grab the control points because the top layer was bleeding into the screen. And so on and so forth. Claude actually pointed out where it went wrong every time, so I was able to get a peek into what goes into making a tool like this.

In the end, the tool was usable, but it looked ugly, and it was not a smooth user experience, still with a lot of missing features.

Then Claude Design happened

Thanks Anthropic

I started this little project a while ago, before Claude Design dropped. But of course, I've been keenly testing Design these past couple of weeks, and it came at the perfect time for me to finish this DIY design tool. So I got to work, and it ended up being heaps better than what Claude Chat gave me.

To start with, I copied all of my previous chats into a text file and added it as a reference file to Design. I also added in the html files of all the previous iterations of the tool. Plus, an elaborate prompt. I told Design what I attempted to make previously, where it went wrong, and what I was hoping to achieve this time around.

The first version it gave me just looked heaps better visually; it was a proper design tool with an attractive interface. It also had all the bits and bobs - a background loader, a layers panel with toggleable layers, fit-to-screen, undo buttons, an opacity slider, a reset button, export, and even keyboard shortcuts. Basically, it filled in the gaps of everything that my artifact got wrong in Chat.

However, it fumbled the main part, which is the perspective warp itself. When I loaded my top layer images to warp onto the mockup screen, it looked twisted and pulled in every direction without me even having touched it. I was able to eventually pull the control points to a place that ironed out the image into something conceivable, but that wasn't going to cut it.

All it took was taking a screenshot of the mess, adding it as a reference file, and asking Claude to fix it. And my perspective transform tool was finally done. According to Claude, it was a "homography corner-ordering bug". Now, I have a tool that gives me the standard 4-corner Perspective controls points, and three different Mesh options ranging from 9 to 25 control points. And it works perfectly. More control points mean I can account for curved surfaces or subtle distortion that four corners alone can't capture. It warps the image to fit whatever angle or surface I'm working with.

The most fun I've had with Claude

Is it a complete tool? Not really - a proper mockup composite needs lighting adjustments, color grading, shadow overlays, etc. I know that. But I made a thing that works and that I'll actually use on images that have already been edited elsewhere. Also, it was just a fun project overall.

Unfortunately, Claude Design is still only reserved for paid users, and even paid users will have a credit cap. However, free users have access to Artifacts in Claude Chat, so it's still worth exploring what you can do if you have anything similar in mind.