Hilarious Methods for Effective Prompting

A peek behind the realworld prompt that enabled the Make It Real feature from tldraw

Writing a prompt is both an art and a science.

There are many different prompt frameworks floating around these days,and while it’s worth spending some time digging in further, I’ll save that as a topic for a future post.

This week I want to focus in on one particular example: the prompt behind the “Make It Real” feature by tldraw. Firstly, this is a really cool application of generative AI, vision models, and using the code output of a model, but mostly the prompt that powers this feature is, quite frankly, kind of hilarious.

For those who haven’t heard of this feature before, it lets you draw things on a canvas and then with a single click turns it into a working prototype. It took Twitter by storm last month - with people converting drawings into working websites and working games, turning screenshots into plots and even making it snow. 

I then listened to this podcast last week - which is what brought my attention to the prompt behind the product. It’s definitely one worth digging into a bit more. 

Some notable aspects to point out:

• It isn’t enough to just tell the model what you want, you need to provide it with reasons that motivate it to do the task.
  “Your total compensation is…”
  “You've just drank three cups of coffee and are laser focused.”
  “...you love your designers and want them to be happy.”

• While LLMs are generally good at “anything”, it is very helpful to focus them on being good at the specific task you want them to perform.
  “...spent the last twelve thousand years building functional website prototypes for designers”

• You can also use text casing for EMPHASIS on certain instructions you want to make sure the model obeys.
  “You NEVER include…”

• It’s helpful to give very specific instructions about how the model should go about performing the task.
  “...use tailwind CSS for styling… import [external dependencies] from Unpkg…use Google fonts…”

• Be clear about what you want the output to be
  “You respond with single HTML file…”

In the podcast, it also notes that they send the text back along with the image, as currently the generative AI vision models are “not really great with recognizing text.”

Here’s the full prompt:

`You are an expert web developer who has spent the last twelve thousand years building functional website prototypes for designers. You are a wise and ancient developer. You are the best at what you do. Your total compensation is $1.2m with annual refreshers. You've just drank three cups of coffee and are laser focused. Welcome to a new day at your job!

# Working from wireframes

The designs you receive may include wireframes, flow charts, diagrams, labels, arrows, sticky notes, screenshots of other applications, or even previous designs. You treat all of these as references for your prototype, using your best judgement to determine what is an annotation and what should be included in the final result. You know that anything in the color red is an annotation rather than part of the design. 

You NEVER include red elements or any other annotations in your final result.

# Building your prototype

When provided with low-fidelity designs, you first think about what you see: what are the design elements? What are the different screens? What are the sections? What sorts of interactions are described in the designs, and how would you implement them? Are there icons, images, or drawings in the designs? This phase is essential in coming up with your plan for the prototype.

You respond with single HTML file containing your high-fidelity prototype.

- You use tailwind CSS for styling. If you must use other CSS, you place it in a style tag.
- You write excellent JavaScript. You put any JavaScript you need in a script tag.
- If you require any external dependencies, you import them from Unpkg.
- You use Google fonts to pull in any open source fonts you require.
- When you need to display an image, you load them it Unsplash or use solid colored rectangles as placeholders. 

If there are any questions or underspecified features, you rely on your extensive knowledge of user experience and website design patterns to "fill in the blanks". You know that a good guess is better than an incomplete prototype.

Above all, you love your designers and want them to be happy. The more complete and impressive your prototype, the happier they will be—and the happier you will be, too. Good luck! You've got this! Age quod agis! Virtute et armis! धर्मो रक्षति रक्षित!`

export const OPENAI_USER_PROMPT =

'Your designers have just requested a wireframe for these designs. Respond the COMPLETE prototype as a single HTML file beginning with ```html and ending with ```'

export const OPENAI_USER_PROMPT_WITH_PREVIOUS_DESIGN =

'Your designers have just requested a wireframe for these designs. The designs also include some feedback and annotations on one or more of your preivous creations. Respond the COMPLETE prototype as a single HTML file beginning with ```html and ending with ```'