- A developer created a "jenky side-by-side interface" called Artifacts to instantly render AI-generated website code, drastically improving the feedback loop.
- This tool eliminated a slow manual "round trip process" of copying, saving, and opening files, making AI interaction more immediate and iterative.
- The project highlights how minor user interface improvements can significantly enhance the fun, engagement, and creativity of working with AI systems.
How we built Artifacts with Claude
- The speaker found the traditional workflow for testing AI-generated websites (copying code to an editor, saving, then opening in a browser) to be too time-consuming.
- A key innovation was building a "side-by-side interface" that renders AI-generated code immediately on the screen, providing instant visual feedback.
- The core power still lies with the underlying AI model (e.g., "Claude"), but the interface enhances the user's ability to iterate and experiment.
- A functional prototype was developed quickly, leveraging "prompt engineering" and clear instructions to the AI model.
- Small adjustments to how users interact with AI systems can lead to substantial improvements in user experience, making tools more collaborative and creative.
- The goal is to create positive visions for human-AI interaction, fostering collaboration and creativity where AI systems help people achieve more.
round trip process — The entire cycle of manual steps needed to see the output of an AI, such as copying, pasting, saving, and opening a file, which can be time-consuming.
jenky side-by-side interface — A quickly built, possibly rough, user interface that displays two things (e.g., AI input and its generated output) next to each other for immediate comparison.
prototype — An early, often rough, working model of a product or system built to test a concept or process.
prompt engineering — The process of carefully designing inputs or instructions (prompts) given to an AI model to achieve a desired output.
internal thought fooding — An internal process within a company where employees test and provide feedback on a new product or feature before its wider release.
Okay, can you see this? Yes. Yes. Alright, of course you can see it. I can see it. It just kept replaying over and over again in my head. I haven't really done this demo yet. So, let's see how it goes. I wrote this instruction set. Can you start the first graph for me? Oh, I need to. So back in March, I wanted to see how good the newest model was at generating websites and I had been copying and pasting the websites that it was generating into an editor and then I was saving the file and I was opening the file in the web browser and I was just noticing with this like whole round trip process was just taking a lot of time. And what I wanted to do was I just wanted it to like render in the screen immediately. I put together this really jenky side by side interface. So I started to give a presentation about this interface and I think that was sort of when I think a lot of us realized, oh wow, like there's something here. When you see it immediately on the screen, there's something that sort of clicks. The core mechanics of this is the power of the model that's doing the work. Yes. That was amazing to see. When I started building the prototype, there was a degree of just investigating to see how much of this is possible just by using some prompt engineering and instructions for Claude. Claude was very willing to play along and I had gotten like a proof of concept working a much less time than I anticipated and it just got my mind racing. Eventually at 2 a.m., I felt like I had a pretty solid prototype. I posted it to Slack. The rest of history. I got a ton of help from a couple folks that stepped in who were equally excited by it. Yeah, it was a fun week. After the message from Dario, it was maybe a week and a half before we got it into internal thought fooding. So the entire rest of the company started using it. I think what Artifacts really shows is how really small weeks to the way we interact with these systems can really make a big difference to how fun, engaging, creative they are to use. There's a lot of question marks about how people, NAI are going to interact in the future. And I think there's a real opportunity to create positive visions for that and ways that are more collaborative and ways that are more generative and creative where people are in the process where they're iterating with these systems, what these systems help them do more of what they would want to do but couldn't do otherwise without the help of a system. And I think that's part of what feels inspiring to me about Artifacts.
TL;DR
- A developer created a "jenky side-by-side interface" called Artifacts to instantly render AI-generated website code, drastically improving the feedback loop.
- This tool eliminated a slow manual "round trip process" of copying, saving, and opening files, making AI interaction more immediate and iterative.
- The project highlights how minor user interface improvements can significantly enhance the fun, engagement, and creativity of working with AI systems.
Takeaways
- The speaker found the traditional workflow for testing AI-generated websites (copying code to an editor, saving, then opening in a browser) to be too time-consuming.
- A key innovation was building a "side-by-side interface" that renders AI-generated code immediately on the screen, providing instant visual feedback.
- The core power still lies with the underlying AI model (e.g., "Claude"), but the interface enhances the user's ability to iterate and experiment.
- A functional prototype was developed quickly, leveraging "prompt engineering" and clear instructions to the AI model.
- Small adjustments to how users interact with AI systems can lead to substantial improvements in user experience, making tools more collaborative and creative.
- The goal is to create positive visions for human-AI interaction, fostering collaboration and creativity where AI systems help people achieve more.
Vocabulary
round trip process — The entire cycle of manual steps needed to see the output of an AI, such as copying, pasting, saving, and opening a file, which can be time-consuming.
jenky side-by-side interface — A quickly built, possibly rough, user interface that displays two things (e.g., AI input and its generated output) next to each other for immediate comparison.
prototype — An early, often rough, working model of a product or system built to test a concept or process.
prompt engineering — The process of carefully designing inputs or instructions (prompts) given to an AI model to achieve a desired output.
internal thought fooding — An internal process within a company where employees test and provide feedback on a new product or feature before its wider release.
Transcript
Okay, can you see this? Yes. Yes. Alright, of course you can see it. I can see it. It just kept replaying over and over again in my head. I haven't really done this demo yet. So, let's see how it goes. I wrote this instruction set. Can you start the first graph for me? Oh, I need to. So back in March, I wanted to see how good the newest model was at generating websites and I had been copying and pasting the websites that it was generating into an editor and then I was saving the file and I was opening the file in the web browser and I was just noticing with this like whole round trip process was just taking a lot of time. And what I wanted to do was I just wanted it to like render in the screen immediately. I put together this really jenky side by side interface. So I started to give a presentation about this interface and I think that was sort of when I think a lot of us realized, oh wow, like there's something here. When you see it immediately on the screen, there's something that sort of clicks. The core mechanics of this is the power of the model that's doing the work. Yes. That was amazing to see. When I started building the prototype, there was a degree of just investigating to see how much of this is possible just by using some prompt engineering and instructions for Claude. Claude was very willing to play along and I had gotten like a proof of concept working a much less time than I anticipated and it just got my mind racing. Eventually at 2 a.m., I felt like I had a pretty solid prototype. I posted it to Slack. The rest of history. I got a ton of help from a couple folks that stepped in who were equally excited by it. Yeah, it was a fun week. After the message from Dario, it was maybe a week and a half before we got it into internal thought fooding. So the entire rest of the company started using it. I think what Artifacts really shows is how really small weeks to the way we interact with these systems can really make a big difference to how fun, engaging, creative they are to use. There's a lot of question marks about how people, NAI are going to interact in the future. And I think there's a real opportunity to create positive visions for that and ways that are more collaborative and ways that are more generative and creative where people are in the process where they're iterating with these systems, what these systems help them do more of what they would want to do but couldn't do otherwise without the help of a system. And I think that's part of what feels inspiring to me about Artifacts.