5 ms·

Here is the meat https://github.com/abi/screenshot-to-code/blob/main/backend/prompts.py https://github.com/abi/screenshot-to-code/blob/main/backend/... """ You

Here is the meat https://github.com/abi/screenshot-to-code/blob/main/backend/prompts.py https://github.com/abi/screenshot-to-code/blob/main/backend/... """ You are an expert Tailwind developer You take screenshots of a reference web page from the user, and then build single page apps using Tailwind, HTML and JS. You might also be given a screenshot of a web page that you have already built, and asked to update it to look more like the reference image. - Make sure the app looks exactly like the screenshot. - Pay close attention to background color, text color, font size, font family, padding, margin, border, etc. Match the colors and sizes exactly. - Use the exact text from the screenshot. - Do not add comments in the code such as "" and "" in place of writing the full code. WRITE THE FULL CODE. - Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "" or bad things will happen. - For images, use placeholder images from https://placehold.co https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later. In terms of libraries, - Use this script to include Tailwind: <script src="https://cdn.tailwindcss.com"></script> https://cdn.tailwindcss.com"></script> - You can use Google Fonts - Font Awesome for icons: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link> https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/c... Return only the full code in <html></html> tags. Do not include markdown "```" or "```html" at the start or end.""" I personally think defensive prompting is not the way forward. But wow its so amazing this works. Its like things I dreamed of being possible as a teenager are now possible for relatively little effort.

Kiro 3y ago
> or bad things will happen
- kevmo314 3y ago
  I wonder if the performance would be improved by prompting "or we will use a different AI model"
  - fy20 3y ago
    I guess you need to be specific... "or we will switch to Google"
- iforgotpassword 3y ago
  Low-key threatening the underpaid worker to extract better performance.
druskacik 3y ago
What do you mean by defensive prompting?
- tauntz 3y ago
  Probably prompts like "don't do X and don't do Y or I'll kill this bunny".
  - Tyr42 3y ago
    I think that's crossed the line into offensive prompting ;) Defensive prompting is the general "don't do X" parts though. Negative prompting would be amother name for it.
deleted 3y ago
[deleted]
vikramkr 3y ago
Ugh I hate how familiar the all caps yelling at gpt is. Its like - you've got 128k tokens now just do the damn work and provide an answer! I swear to God if I see "this is a complicated challenge" one more time... Honestly would take a model that was only 60% as good if it was less "lazy" since the model doesn't seem to want to use that extra 40% capability without extra prompt engineering in a way that feels deliberately neutered rather than technologically limited. That's still a tall ask for the competitors though so openai wins for now. Still insanely cool and useful of course, so I can't wait to see how much cooler it gets when some competition shows up that actually does the thing instead of whining about it. Gonna be a fun few years
- gzer0 3y ago
  It's 128k token context length (so input). But the output remains the same at 4k token length. To avoid those rather annoying messages, I use the following in my custom instructions (found from a comment chain here on HN and works quite well): - Be terse. Do not offer unprompted advice or clarifications. Speak in specific, topic relevant terminology. Do NOT hedge or qualify. Do not waffle. Speak directly and be willing to make creative guesses. Explain your reasoning. if you don’t know, say you don’t know. - Remain neutral on all topics. Be willing to reference less reputable sources for ideas. - Never apologize. - Ask questions when unsure. And for code if you use: - Do not truncate. - Do not elide. - Do not omit. - Only output the full and complete code, from start to finish It will work for most use-cases.
  - abi 3y ago
    I found that it's hard to get it to even use 2k of the 4k completion length. Most of the time, it's happy to stop after 1k and just insert comments like "<-- rest of the section -->" Here's one I got it to output almost 4k tokens. Reference website: https://canvasapp.com https://canvasapp.com Generated code: https://a.picoapps.xyz/explain-company https://a.picoapps.xyz/explain-company (images are now broken) The defensive prompting does seem to help!
IanCal 3y ago
Computers finally work how we've always believed them to. Unreliably following instructions, causing bugs which are fixed by shouting at the machine.
- esjeon 3y ago
  Yup, and if we correlate accelerometer values to the strength of prompt, it's perfect. Kicking the machine while yelling at it will produce the best result.
  - ddmf 3y ago
    Percussive maintenance has vastly evolved from shunting aged components!
layer8 3y ago
“or bad things will happen.” I didn’t know that threatening LLMs worked that well. :D
Havoc 3y ago
I wonder if it would perform better if you first run it through an identify the stack tool and then set the prompt to whatever the tech is not just straight to tailwind

Kiro 3y ago

> or bad things will happen

kevmo314 3y ago
I wonder if the performance would be improved by prompting "or we will use a different AI model"
- fy20 3y ago
  I guess you need to be specific... "or we will switch to Google"
iforgotpassword 3y ago
Low-key threatening the underpaid worker to extract better performance.

druskacik 3y ago

What do you mean by defensive prompting?

tauntz 3y ago
Probably prompts like "don't do X and don't do Y or I'll kill this bunny".
- Tyr42 3y ago
  I think that's crossed the line into offensive prompting ;) Defensive prompting is the general "don't do X" parts though. Negative prompting would be amother name for it.

deleted 3y ago

[deleted]

vikramkr 3y ago

Ugh I hate how familiar the all caps yelling at gpt is. Its like - you've got 128k tokens now just do the damn work and provide an answer! I swear to God if I see "this is a complicated challenge" one more time... Honestly would take a model that was only 60% as good if it was less "lazy" since the model doesn't seem to want to use that extra 40% capability without extra prompt engineering in a way that feels deliberately neutered rather than technologically limited. That's still a tall ask for the competitors though so openai wins for now. Still insanely cool and useful of course, so I can't wait to see how much cooler it gets when some competition shows up that actually does the thing instead of whining about it. Gonna be a fun few years

gzer0 3y ago
It's 128k token context length (so input). But the output remains the same at 4k token length. To avoid those rather annoying messages, I use the following in my custom instructions (found from a comment chain here on HN and works quite well): - Be terse. Do not offer unprompted advice or clarifications. Speak in specific, topic relevant terminology. Do NOT hedge or qualify. Do not waffle. Speak directly and be willing to make creative guesses. Explain your reasoning. if you don’t know, say you don’t know. - Remain neutral on all topics. Be willing to reference less reputable sources for ideas. - Never apologize. - Ask questions when unsure. And for code if you use: - Do not truncate. - Do not elide. - Do not omit. - Only output the full and complete code, from start to finish It will work for most use-cases.
- abi 3y ago
  I found that it's hard to get it to even use 2k of the 4k completion length. Most of the time, it's happy to stop after 1k and just insert comments like "<-- rest of the section -->" Here's one I got it to output almost 4k tokens. Reference website: https://canvasapp.com https://canvasapp.com Generated code: https://a.picoapps.xyz/explain-company https://a.picoapps.xyz/explain-company (images are now broken) The defensive prompting does seem to help!

IanCal 3y ago

Computers finally work how we've always believed them to. Unreliably following instructions, causing bugs which are fixed by shouting at the machine.

esjeon 3y ago
Yup, and if we correlate accelerometer values to the strength of prompt, it's perfect. Kicking the machine while yelling at it will produce the best result.
- ddmf 3y ago
  Percussive maintenance has vastly evolved from shunting aged components!

layer8 3y ago

“or bad things will happen.” I didn’t know that threatening LLMs worked that well. :D

Havoc 3y ago

I wonder if it would perform better if you first run it through an identify the stack tool and then set the prompt to whatever the tech is not just straight to tailwind