This post continues my blog posts based on the conclusions of my trip to Belgium. If you are curious, you can read my post from Tuesday about hiring only freelancers (for now) + focus on a design lead and my other post with general end of trip conclusions. After this, one more post is coming up about how the shift to AI affects design work as a whole.
When I created the first Obra homepage it said “Helping startups scale to the next design level”. Many people challenged me on specifically working for startups and they were right.
I started a project for two startups in the first +-2 months of Obra Studio, and I immediately felt it didn’t match with my other vision of scaling up an agency. As an agency you need cashflow, reliability and some level of predictability.
Just for context, what I am working on is to achieve a UI agency focussed on quality user interfaces. As far as headcount I am aiming to work with +-7 people working full-time near the end of the year, eventually scaling to 15-ish team members in a few years.
A friendly CFO focused on startups told me: “Johan, these pre-seed startups, they are struggling for money, they are bootstrapping to the maximum. It’s the worst financial period of their lives. Before funding, there is no money”. I felt his words at a small scale while I was struggling to get budgets and worried what it would be like when I would have to pay a full team.
This does not mean that we won’t work for startups at all; it’s just that I decided our prospective clients are people who want great quality UI, regardless of their company stage. I do have a preference for slightly smaller companies, because that’s where sometimes the interesting action happens.
This is just my current business theory that might need some revision after a while, and I’ll be curious to review this post in one year.
As mentioned in my blog post end of the trip I will post some details the next few days about some conclusions I had during this business trip.
I suppose once I have everything set up, this business blogging will more or less stop, but now that I am actively building the company, it’s interesting to write as a form of thinking. I also get lots of reactions about these posts, incentivizing me to write more.
This post is about hiring and the decisions around that topic.
As posted on LinkedIn, I decided to remove the payroll role. I couldn’t find the right person when it came to skills vs their pay expectations. I got lots of applications from people with too little experience. I got some OK applications from designers with the right experience, but then they had way too high expectations regarding salary.
The mix between high salary costs in Belgium and general averageness of the payroll applications creates a problem for employers. I don’t know if the Belgian government really realizes they are scaring entrepeneurs away, and they are not exactly creating an attractive investment climate.
The mix between high payroll costs, high administrative burdens, and lack of flexibility made me decide to try and find the right combo in freelancers – including Mexican freelancers.
Within this decision, I found a few great designers already, on the Belgian side, who will be the first people helping out Obra ship great design projects for our clients.
Next to the team I already have on call, I need more people with the right skills who can hit the ground running. So if you are a freelancer and have solid UI and/or front-end skills, check out our updated jobs page.
I am looking for people who want to do more than just do the work project-based and can help to build the company; and this both in Belgium and in Mexico city.
As for the business partner, I removed this role from the website. This is an extremely difficult role to hire for. And some signals are telling me it’s not the right choice to put this role with one person. In a small company context, everyone has to help grow the company.
For now, I split up the “business partner” role from the “design lead” role. It was worth a try to try and find a person who could do both, but I think it’s not realistic in the short term. Rather than have a ghost job posting, I would rather have none and work on this problem in the background.
One reasoning I had for the business partner was to run and grow the Belgian part of the company, at all kinds of levels: sales, marketing business development, but then also design leadership in the projects. When I challenged myself on that reasoning, I didn’t really see a reason why there couldn’t be a split between day-to-day work and real-life tasks and the actual growing of the company and business development.
In talks with people I gave the specific examples of answering a Belgian client at 9AM, when I am sleeping in Mexico; and being able to go to physically to a client for workshops and usability testing. I put these tasks with the business partner, but since every individual designer at Obra also talks directly to the clients, why split that up? If anything, I trust the freelancer team I built so far way more to do this than the payrollers I was interviewing. So this can be covered.
Then the business development side, this is actually a separate task, that I am fully commited to. I’ve decided to not actually design too much this year: I am working on the business part of Obra. Every moment should be spent selling, hiring, coaching, mentoring… not designing myself. Except for maybe some AI front-end projects where I can really learn something new and make an epic deliverable for the client.
One danger in hiring is trying to find a copy of yourself: that just doesn’t work. When I do business development and overall project vision, and the designers and front-enders can design and prototype great work, we are essentially complementary. When I try to find a business developer in a designer, I am essentially looking to reflect myself on the Belgium side, which then just leads to a 1 +1 = 2 situation, not 1 + 1 = 3. In times of abundance, maybe it helps to just scale up and make money because the economy is with you, but in times of scarcity, it’s better to deeply think about who you partner up with.
Those are a lot of words and reasonings to find out why you will now find the freelance design lead as a separate job posting.
I have to flesh out the logic behind this job but it would be a contract with a base wage and a specific perf-based aspect. I’d like to thank a specific freelancer (you know who you are) — and my dad — to help bring me to this line of reasoning through our talks.
My business trip to Belgium is nearing it’s end. It’s been a productive three weeks with a lot going on. Now the time comes to return back to Mexico. I can look back at a productive period where I got lots of work done and set up the logic for the rest of the year for Obra Studio.
I gave two talks: a talk about designing with AI at Mobile Vikings and a guest class about understanding user interface design at Artevelde in Ghent (the pandemic version of that talk is here)
I met my startup client Beam and had some real-life workshops/work sessions to move the startup into the right direction
I had some great talks with agency founders, thanks Bert, Pieter-Jan and Thomas for the great discussions.
I had some great conversations with a person who is helping me with business development. He is helping me much more than he realizes (you know who you are!)
I met some prospective team members and potential business partners, and I signed the first Obra employment contract (more on that below)
We signed the first medium-sized project, with some interesting leads for bigger projects. Surprisingly there are quite some leads from the US, which is a great signal.
Over the past next days I will be posting about some conclusions from the trip, both in company positioning, hiring and in the vision of how to incorporate AI into design going forward.
Within AI, there were a few “breakthrough” moments after I thought that there wouldn’t be any breakthrough moments any more.
After OpenAI’s GPT4 released, there was a period of around 6 months where I felt what we could get from AI kind of stagnated.
I felt the quality of images created via Midjourney was kind bad
I felt that AI was semi-useful for some kinds of very concrete coding questions (for example to give you a script that converts Celsius to Fahrenheit) but otherwise not so useful.
I would sometimes use AI as a writing help, to check an article for grammar; or as a quick translator between English and Spanish.
But all in all I felt AI was a helpful tool, but not a revolution.
In artifacts, instead of asking something and getting a text-based answer back, you would get actual rendered piece of UI back that you could see and play with.
In the above screenshot you can see the feature where you have the prompt on the left side, and then a rendered UI piece on the right side. You can also switch to the code as well.
I started experimenting with both Claude and Claude Artifacts and also Cursor and created a first app, that was more or less 90% prompted.
It was called Multi currency Converter, it was a web app written in Svelte. This app converts currencies in more than 140 other currencies.
I started experimenting with how far I could go with Claude + Artifacts.
Turns out, I could go quite far.
The AI would help me with “boring“ tasks. After building the core functionality, where I connected to an external currency API for accurate rates, I easily got the app localized in more than 8 languages, and added dark mode.
At one point, I wondered if I could create a native app with Claude as well, and lo and behold, I got a working version of my multi currency converter app done for iOS and iPadOS in less than a day.
One that included all the features of the web app as well as offline support.
I learned to separate my conversations with Claude by topic. In a way it’s nice to work in one long prompt, because the prompt has context of all your previous questions, but after a while, it breaks down, and sometimes it’s better to work in multiple prompts.
All in all, I was very enthusiastic about Claude and artifacts, but there was another tool in the mix.
Around the same time news around a new code editor called Cursor started popping up. I started seeing this everywhere on Twitter and got super curious.
Cursor is a fork of VS Code that has an integrated panel to ask the AI questions about your code, in the context of a project. Its main feature is something called “composer” you can ask questions about your codebase. Cursor will then help to directly implement the changes.
So instead of the “traditional” approach of asking an LLM and copy pasting the code in your project, the code would change for you directly in the project itself.
This helped immensely when starting to build more complex apps and helped to scale the workflow.
Now, around December I got a new client, with the task to do an application design.
I started with the traditional way of setting up components in Figma. I was doing some detailed designs to experiment with the brand. It was kind of slow to design screens; and I didn’t really have much budget and time.
There was not much budget since it was a pre-seed startup. Not much time since I was also starting up my new business and agency.
I was driven by the idea of validating the ideas behind the screens. I didn’t just want to deliver the client design mockups and be done with it. I wanted to actually knew what people thought and move the product along with user feedback.
In a traditional “design offer” I would have written about going through the motions of designing screens for a few weeks, having weekly meetings about them, and moving towards a clickable Figma prototype.
This is something that we did a lot in the past with my previous agency Mono, we had an alternate offering where we moved towards a front-end based prototype instead of Figma prototypes to go towards a more life-like validation, without actually developing the app.
As a true startup client, the client had lots of feature ideas that kept coming in. Discussions were flowing on Slack and the team was on fire in quick calls. Ultimately what was left for me after those calls was that I saw that there were so many features to design, but that also the core idea behind the whole app was not validated.
I wanted to convince the client to start testing with users too. They were the ones who could tell him his ideas were valid. For this I felt he needed something interactive.
I combined all of the ideas I talked about before, and started making an interactive front-end prototype based on AI. On January 7th of this year, I remembered my success with Cursor and Claude and I started working on the prototype.
Four days later we had a clickable version of the application UI, with many interactive parts. By prompting Claude and separating out the parts of the UI that I needed I got to around 15-ish separate Claude conversations with UI pieces.
I would prompt for the UI parts and iterate on them independently in Claude first.
In Claude, you can also make projects, where you can give top level instructions that apply to all conversations within that project. One of my prompts was that all users of the app were Belgian, so whenever there would be output, like a data list, or a grid of people they should have Belgian names. These top level prompts help you to not have to reprompt for details in every individiual conversations.
I would take screenshots of what I was doing, and bring those back to Figma, to have a bird’s eye view of the project. So, I would have this UI piece in Claude, make a screenshot, put it in Figma, zoom out and see how all the screens connect (and connect them with arrows).
I would also sometimes use the Figma context to think more broadly about the app. In a prompt you are forced to give direct instructions. In a design app a different kind of perspective unlocks for me, where I can think more broadly, place comments and work on more abstract thinking. This output piece also helped a lot when having meetings with a bigger project team to get to a shared understanding.
So, how does it all tie together? At a certain point I would have like 10 separate Claude conversations, and the general wireframe idea in Figma based on screenshots.
In a next step, I would download the code for all the UI parts in Claude and copy that code into a fresh Next.js app. I would create an overview page where would I clearly link to every UI part. Having an overview page is a common thing to do in wireframes so that a client can validate all the possible UI paths.
Now came the part where different UI parts needed to be combined. I would use Cursor to have an understanding of the whole codebase and start connecting every part of the app with a sidebar component. To work faster, I would use a dictation app called wispr flow, to give detailed prompts inside of Cursor.
To work faster, I also never bothered with changing much of the defaults that came out of Cursor. Even though I have opinions on their tech stack, it was ultimately quite irrelevant for me, because
I am not actually working in the code; I am prompting and changing stuff
This is a prototype meant for validation, not for production
As a result, we created a prototype with 7 different modules, there are two main user perspectives to it (a user facing public part and an expert backoffice app part), and 20 different connected UI screens. The screens themselves had a moderate complexity level (a calendar, some CRUD modules for content, a block-based editor) with one of them having a bit more complexity (the part where you edit your profile with a live preview next to it).
I was so enthusiastic about this workflow. The client was super stoked with the result.
“Quite flabbergasted by the demo that is there guys. Amazing stuff!”
I asked him to use the prototype to test with his prospective users and a few days later he came back with enthusiastic reports, where he showed the prototype to the prospective users and they could really imagine what it was like to use the app.
My goal of getting a user-testable app prototype was achieved; and we did this work in a few days, instead of what used to take a few weeks (excluding an initial design phase).
A presentation-version of this blog post with more details was delivered earlier this month at a private company presentation.
This blog post shows the seeds of a new workflow that will definitely influence how we makes prototypes at Obra. Have a software company and curious to ship faster? Get in touch.
I am working on a new talk. I’d like to give it in several venues if I find interested parties. Here is the outline of the talk below:
In this talk, I would like to present a workflow to prototype interfaces using AI.
In this workflow, we are using prototypes to validate an idea; to get to the same understanding, by having an example that is the closest we can get to reality in the shortest amount of time.
By using a combination of LLM-based tools, sticking to some specific strategies, and combining different workflows, leveraging the strengths of both designers and developers, you are able to create front-end prototypes at scale.
This is an early version of this talk, but because the space moves so fast, it might be worthwhile to sit down and share experiences in a lunch session.
Talk: 20-30 mins
Group discussion around usage of AI tools: 20-30 mins
I’ve noticed that a lot of people are following my story, which incentivizes me to write.
Currently, I am doing design work for a start-up I believe in, while also juggling recruiting and business development.
I am working 10 to 12 hour days and most weekends. It’s not sustainable, but I have the energy. My theory is that if I set up a solid base from the start, I will profit from it later.
Some days I have 8 to 12 different calls. Today was different. I actually had a block of 7,5 hours of solid design work.
I am doing focused work for a specific startup because this project I am doing is an excellent example of what I want to do with Obra: to help startups get to the next design level.
The deliverables so far include a brand guide, a website, a web application design, a web application prototype, and help with the pitch deck. The company is ramping up to get funded. If the funding lands, it’s the ultimate proof that I did my part.
I came up with a simple but effective tagline for Obra: design partner for startups.
I’ve been helping a junior designer find his path. I really considered taking him on as my apprentice, but I don’t wish him remote work at this stage of his career. Ideally, I can find someone to mentor in Mexico City. I also want to get a bigger insight on the median wages here and find talented freelance designers and developers.
I’ve been thinking a lot about how to combine AI with design work. I have blogged about it in some posts on this website (1, 2). If there is some interest to teach this at your company, let me know. There is a very good chance I might be preparing a workshop about this, because the methods are just too good not to share.
I’ve been thinking a lot about individual work and consulting.
Some of the individual consulting at a high enough rate would help me to have an income while I focus on getting the bigger projects and setting up the company. On the other hand, too much time spent on consulting will not help Obra forward as a studio.
I’ve been talking about business with a great collaborator. We set up a business development pipeline and are checking out the market. There are some promising leads and a good sales pipeline so far. Nothing really big has landed yet. That’s actually good, because I first need the right team.
One of the main topics has been clear pricing packages for our target audience – startups. There are clear things we can help them with, and for some things, there is definitely a fixed price that gives clarity.
At the moment, I don’t have a convincing website. It contains the intro that I’m starting. It has the 6 job descriptions I am hiring for.
There is no team page yet. I need to get to hiring as soon as possible; but on the other hand, hiring the wrong persons can also mean a bad start for the studio.
Negotiations with potential business partners are well underway*, portfolios are being shared, and the various job-related talks are being had. I hope to present my team to the world soon, but realistically, it will probably take some time.
There is no portfolio yet. I think I have enough references from the past (1, 2), and I would rather show something meaningful than just quickly put the first few projects that we did with Obra on there. It might be a few months until there is an actual portfolio.
I’m working with a recruiter and even signed up myself for LinkedIn Recruiter to sift through all the profiles. I’ve been making Number files with wage calculations and thinking about the market in Belgium. What I am looking at now is a pipeline of potential candidates for Obra. I need to figure out the great freelancer, the great payroll candidate, and the business partner as a first priority.
-Saludos, Johan
(*Don’t hesitate to still reach out!)
I’ll be flying out to Belgium this Sunday. I’ll spend the next three weeks in Belgium, doing business development, finding the right people for Obra and having coffees with several people. Reach out if you want to catch up or have something to discuss! E-mail: johan@obra.studio or DM on X.
I am rebooting my agency and hiring designers. As an exercise, below is my idealized 1-year evaluation of a new team member. If you are interested, take a look at the Obra Jobs page.
Dear designer,
Thank you for your first year at Obra. In this year, we did a lot of work as a team.
As a founder, I’m happy we grew the team to seven people. Now we have a solid base of designers to grow the company once more.
We’re aiming to become a design reference worldwide, and it’s thanks to your work that we’re well on our way.
I want to thank you – your work has been more than stellar.
From working on massive application prototypes, to helping three startups get funding because of your rich prototypes, to mentoring a new designer in a team, you really helped Obra get further.
It was an awesome year. I loved our time at [undisclosed conference]. Remember that talk that inspired us to look at startups in a different way?
We found new workflows where we found better ways to validate product decisions. We experimented a lot with AI to use it in meaningful ways. But you never lost sight of the actual humans using your designs.
You already knew how to work with Figma like a pro when you joined the company, but you stepped it up by making a custom plug-in to help our internal workflow.
When there was a new feature, you immediately learned how it worked and applied it to your projects.
I’m also happy with the new design app [undisclosed]. It really upped the animation level in our projects and made it easy to ship animations to development.
What I like is your collab with our Mexican brand designer. You interpreted her brand work, upped your visual skills along the way and took the base of the branding in [undisclosed project] and applied it in a perfectly executed way to the application UI. You made excellent derivative work of the brand and upped your illustration skills.
For the biggest project, I loved that you took the lead in the strategy for the features and that you actually worked on the hundreds of screens for all the user stories alongside a new team member that you were mentoring at the same time as executing the project. This shows both the ability to execute and to grow as a leader.
Actually, I have to mention that your communication skills have been great. You are very good at ”Slack etiquette”.
In meetings you are making sure that meetings don’t go off-topic. When I mentioned that every meeting needs an agenda, you took it to heart and you executed on that comment.
That one time the team was discussing a new technique in one of our Friday sharing sessions, you actually improved upon it and came back with a logic that made sense and that we could as a templated way of working company-wide. You documented it on Notion and we used it successfully internally for three more projects until we discovered another better way.
You also stepped it up when you gave a scoping workshop for the client. Maybe there is a future product manager in you?
I would like to know how you want to grow as an employee and where you want to take your career.
With the right mix of skills, we can build an awesome theme and become that design reference that we all strive for.
I want Obra to be the place to do your best work. So let’s decide what your focus points are for next year and how you can grow as a designer.
A client might come to us with the question to design a logo; but in our minds, it’s the start of a larger branding process.
A logo can hardly be designed in isolation; it’s necessary to cement it within a cohesive brand, with considerations for typography and colours. Ideally, there is room to work on stylistic brand elements and brand icons, but this depends on the project length.
With our startup clients, that project length is usually short, and we hardly have the time to think about a brand guide and strict guidelines for weeks. They need something fast, because their new company will be announced in three weeks.
This is not a made-up example, but it’s is based on a true story, which is why it’s easy to write about: we just went through this process.
The brand process starts with an intake meeting where we talk about the company the logo is for, with questions about aesthetic preferences and references in the market.
We usually design for tech startups. There are choices to be made: do you want to blend in, or do you want to stand out?
There are budget concerns to be discussed such as the cost and licensing of fonts. Font licensing can be prohibitely expensive depending on the choices you make. There are ways to “level up” your brand over time and start with something that doesn’t have to cost an arm and a leg, and that can be upgraded.
Next in the process is investigating how the logo will look. There are of course a myriad ways that any logo could be designed. We will sketch, on paper and digitally, to find out what the logo could look like. We will look at the shapes of the letterforms, how the typography should be set, how the logo could be perceived. This usually results in a crazy big Illustrator file with tons of variations and ideas.
Usually a logo has two main elements: an emblem and a typographic treatment. However, a logo could be typography-only or even emblem-only (such as the Nike logo). We don’t recommend the latter unless you are so famous you can drop your brand name and simply exist as a by-then iconic icon.
For the typographic treatment, we might choose to set the chosen brand name in all caps or lowercase. For higher-end branding, a typographical treatment on the brand name itself or even custom typography might be the chosen way to go. This last option can be costly and might be more of a thing to do later, when the startup has become a scale-up.
By the “emblem”, we mean the illustrative part of a logo. Many logos have this on the left side next to the text, but this is not always. For software, I myself prefer this type of logo because the visual on the side of the logo can immediately be used for an app icon (and subsequently a favicon).
What the logo references is usually one of the biggest questions. What meaning does the logo convey? This is a question you can think about forever, but let’s say we’re designing a logo for a company called FlowerKing. Obviously you will think of flowers and royalty. Now what visual do you choose? Will you draw a crown of flowers, keep things abstract, or something else? This thinking process can lead you very far. As a startup, your most viable asset is speed, so you need to make a decision. But at the same time, you want to be viewed as a professional party, so you do need to spend a bit of time on this, to avoid logo disasters and unwanted copyright issues.
A lot of logo work in the world is lazy. You can see that the creators avoided the logo thinking process by simply referencing the first letter in a logo, not having an illustrative emblem and simply a typographical treatment in a simple font. If you forego the creative process, you are also foregoing building a recognizable brand.
As we explore different directions, we will find proposals ways to display a brand that feel right. As you look at that crazy Illustrator file, some direction jump out more than others and might stay with you. That’s usually a good sign.
In a design review meeting, multiple directions are usually presented and talked about. We consider the bigger picture of the brand and the scope and timing of the project.
When a decision is made on how to move forward, final tweaks can be made. How does a logo look alongside other logos? What if it’s on a T-shirt? In the context of a website? An app? How does the logo tie in with the overall colour scheme?
As a final step, there is the logo delivery. Variations of the logo are made for several online applications such as a favicon and an app icon. Colours are considered for print. The logo is then delivered and ready for use.
As Obra, a brand new design studio, we have the capabilities to design a brand for you. If you’re interested, get in touch.
As I mentioned in my previous blog post about AI wireframing, your biggest asset as a startup is speed.
The last two workdays were spent using a combination of Claude, Figma, Cursor, and Wispr Flow to work on an HTML prototype.
I created a large desktop React prototype with seven modules (launch checklist, [secret module x5], settings), all interconnected in a clickable prototype to showcase the app concept.
In this workflow, I would first upload mockups to Claude 3.5, which would then process them into React components.
I would then fine-tune that part of the UI, download the code, and use the Composer functionality in Cursor to combine the modules.
Cursor is a fork of Visual Studio Code with enhanced AI capabilities, and it costs $20/month.
Composer is a feature within Cursor that allows you to ask questions about your entire codebase, not just a snippet of text. Your codebase is indexed, and when you ask a question, the answer involves changes across multiple files, which are made for you. Afterward, you simply accept the changes. You can even request consistency changes across the entire codebase.
I would use Wispr Flow to provide enough context for each prompt, simply speaking to my computer. It’s important to be clear about what you want to do—mention the affected routes and the module name, as you’re prompting the entire codebase.
About 10-15% of the prompts would need to be reverted, either because the tool misunderstood what I was trying to do or you would end up with a rendering error. Composer in Cursor has a “restore point,” so you can easily go back.
The changes would then be committed to a Git repository and immediately deployed to a live URL, allowing the client to view the changes in real-time, click through the prototype, and comment in Slack.
At the end of my workday, I would record a 2-minute high-quality video, clicking through the screens to demonstrate what is clickable and what is not (with minimal commentary).
This would serve as an artifact for the evolution of the prototype and give us a reference point. Since you can now effectively recreate a UI from a screenshot, the video becomes a snapshot of a concept you had.
The final result—a clickable prototype—can be used to validate an app concept with potential users, weeks or months before you’re able to develop the real, working version. Because it’s a real, clickable demo, where users can click through multiple paths and even do data entry and change content, they get a true impression of what the app would be like, as opposed to presenting them with a lower-fidelity, linear Figma prototype.
Interested in this workflow? Check out the Obra Studio website. With Obra we help startups get to the next design level.
I’ve used a new technique that I’ve called prompt wireframing where I use a combination of tools to get the job done.
There is this moment in a project when it’s unclear where things are going. There are designs somewhere. There’s a user story spreadsheet somewhere else. There are discussions happening, but there is no clarity about what should be built.
The designer’s way to solve this roadblock is to visualize it. Make a design. But how do you visualize something quickly? What if there’s many medium to high complexity UI parts, that have to come together?
Of course you can try to find the UI kit and draw the interface. At this point, you might be slow for certain UI elements and some complex interfaces.
You can start sketching, but that misses fidelity. Whatever you are drawing cannot be repeated. If you have a new idea, you basically have to draw a new sketch. You easily end up with 15-30 different sketches and now you’re losing track of which paper is for what.
I have a new technique that I’m pretty excited about: using LLMs to generate UI artifacts to then combine them into wireframes.
The way I would do this, is to start new Claude project and give context within the project. For example, what I put for a recent project is that users of this app that we are describing are Belgian, but that the UI is in English.
I use a dictation app called Wispr Flow. The reason to use this app is that I can talk faster than I can type.
First of all, you kind of need somewhat of an of what you’re going to build. It helps to have (some) sketches. With the sketches in front of me, I start describing the sketch by talking.
By holding down the Fn key on my Mac, I make sure that Wispr Flow is listening to my dictation.
I try to be literal in describing the sketch eg. this sketch shows a heading, a paragraph, an input with a value of ‘Enter your email’, a button that says ‘Subscribe now’ etc.
Whay Claude is essentially generating are pieces of UI that use React, shadcn/ui for the UI part, Tailwind (ugh) and Lucid for the icons.
The technical aspects behind it are actually not important. I would screenshot whatever is shown in the UI and use it as part of my wireframe. My process is not to actually use the generated code, but to take screenshots of the generated code and then sometimes use the screenshots to revisit the design of a screen.
(Although what you can also do is download the .tsx files and drop it into a Next.js project with some light edits. Then you’re on the way to make an interactive prototype)
Because the artifact is contained in a Claude conversation, you can come back to edit it in the appropriate Claude conversation. As I discover problems with the user flow by visualizing it in Figma, I would then go back to the individual conversations (usually about one screen) and re-prompt to add something, remove something, or change something.
I would composite the the screenshots into Figma and draw arrows between the screenshots to make sure that the user flow makes sense.
If you use this technique, you will quickly run out of tokens, so you might want to pay for Claude Pro, which is about 20 euros a month.
In a way this feels like a new discovery to me, but it also feels incredibly obvious given the tools we have today. Has anyone else been doing this? Do you have any variations on this technique? I’d love to find out.
