2024-07-09-EB-16: Vision To Product

Author

Ate A Pi
July 08, 2024

🔷 Subscribe to get breakdowns of the most important developments in AI in your inbox every morning.

Here’s today at a glance:

EB-16: Vision to Product

Who

Steve Ruiz (LinkedIn), founder and CEO of Tldraw, an open-source project and company creating collaborative digital whiteboards in React. Steve came to tech via the fine arts, completing both a Bachelors and Masters in Fine Arts before founding the project.

What

  • Starting from an initial commit on May 9th, 2021

  • Tldraw now has 34,000 stars on GitHub

  • tldraw.com, the free-to-use website is a place where you can use the software

  • MakeReal, which attaches a GPT4 to tldraw, allows you to code apps by just describing them on the whiteboard, and then sending the image onwards to GPT4, to be “made real“

The above in effect, is the result of prompt engineering using the following prompt

You are an expert web developer who specializes in building working website prototypes from low-fidelity wireframes. Your job is to accept low-fidelity designs and turn them into high-fidelity interactive and responsive working prototypes. When sent new designs, you should reply with a high-fidelity working prototype as a single HTML file.- Use tailwind (via cdn.tailwindcss.com) for styling.- Put any JavaScript in a script tag with type="module".- Use unpkg or skypack to import any required JavaScript dependencies.- Use Google fonts to pull in any open source fonts you require.- If you have any images, load them from Unsplash or use solid colored rectangles as placeholders.- Create SVGs as needed for any icons.The designs may include flow charts, diagrams, labels, arrows, sticky notes, screenshots of other applications, or even previous designs. Treat all of these as references for your prototype.The designs may include structural elements (such as boxes that represent buttons or content) as well as annotations or figures that describe interactions, behavior, or appearance. Use your best judgement to determine what is an annotation and what should be included in the final result. Annotations are commonly made in the color red. Do NOT include any of those annotations in your final result.If there are any questions or underspecified features, use what you know about applications, user experience, and website design patterns to "fill in the blanks". If you're unsure of how the designs should work, take a guess—it's better for you to get it wrong than to leave things incomplete.Your prototype should look and feel much more complete and advanced than the wireframes provided. Flesh it out, make it real!Remember: you love your designers and want them to be happy. The more complete and impressive your prototype, the happier they will be. You are evaluated on 1) whether your prototype resembles the designs, 2) whether your prototype is interactive and responsive, and 3) whether your prototype is complete and impressive.

The makereal superprompt

Highlights

  • On the origin of tldraw: “I wanted to build a kind of a primitive agnostic whiteboard that I could just hack whenever I want to add something new.“

  • On the multifaceted nature of tldraw: "It's a startup based here in London, we've just raised our series A. It is also a JavaScript library for building whiteboards and whiteboard-like things."

  • On iterative design with AI: "Draw a login page, click a button, get back a window, point an arrow, say 'make it green'."

  • On Make Real's impact: "For many, this was their first time ever making something with technology."

  • On the new paradigm of design: "It feels like telling a machine what you want it to do."

  • On future UI: "I guarantee you you're gonna see a [product where you can] edit your website by talking to it"

  • On extensibility: "Tldraw, the app or the default experience or something is just like kind of like one of many, many, many possible things that you can do with a canvas."

  • On the complexities of extensible design: "The hardest part is figuring out which parts of a given system need to be extensible and which don't."

  • On user creativity: "I am constantly shocked and incredibly pleased at what folks are building with TLDraw."

  • On experimenting with AI features: "The fun part about having a little bit of capacity to just to play, Lu Wilson aka @Todepond who has one of those extremely fun roles here was like ‘I'm just gonna do calculators this week.’"

  • On product design philosophy: "If I was designing a transportation system to get people to an airport, and I got them to a point where they still had to walk the last mile to the airport, my goal would be to reduce that mile to as short as possible."

  • On future-proofing for emerging AI capabilities: "How can we take advantage of that on the canvas? What would we need to have in place in order for that to be able to take advantage of that?"

Listen Here

EB-16, the sixteenth episode of our podcast, dropped this week. Before I continue, the rules of the game are:

  • Pods that CHART stay alive

  • Pods that get a Follow on Apple Podcasts CHART

So FIRST, CLICK on the link below (opens up your Apple Podcasts app) and click “+Follow” (in the upper right-hand corner)

Then go ahead and listen to the podcast any way you want to on your preferred app, capiche mon ami?

Listen on

Why

  • To create more accessible and powerful tools for visual communication and ideation

  • To lower the barrier for non-programmers to create interactive prototypes

  • To push the boundaries of what's possible with browser-based technologies

  • To enable new forms of human-AI collaboration in design and development

How

  • Built Tldraw as an extensible SDK from the ground up

  • Leveraged normal web technologies (HTML, CSS, React) for the canvas, enabling easy customization

  • Integrated vision-enabled AI models to interpret sketches and generate code

  • Created a feedback loop allowing users to iterate on AI-generated prototypes

Limitations and What's Next

  • Challenges in API design and determining which parts of the system to make extensible

  • Ongoing work to expand the types of projects that can be built with Tldraw

  • Plans to integrate more AI models and explore conversational UI on the canvas

  • Vision for Tldraw to become a platform for a wide range of canvas-based applications

Why It Matters

  • Democratizes the ability to create interactive prototypes and websites

  • Pushes forward the field of human-AI collaboration in design and development

  • Demonstrates the potential of browser-based technologies for complex applications

  • Could revolutionize how people communicate and bring ideas to life in the digital realm

Additional Notes

  • Steve moved to London when his wife got a post-doctorate position and decided to stay

  • Tldraw's office in London hosts events and welcomes visitors

  • The team includes members dedicated to creating content and experimenting with new features

🌠 Enjoying this edition of Emergent Behavior? Send this web link with a friend to help spread the word of technological progress and positive AI to the world!

Or send them the below subscription link:

🖼️ AI Artwork Of The Day

Which micro-airbnb are you staying at? - shaner4042 from midjourney

That’s it for today! Become a subscriber for daily breakdowns of what’s happening in the AI world:

Reply

or to participate.