Prompt engineering for web development

Defining clear objectives and requirements

When crafting prompts for web development, it is crucial to define clear objectives and requirements. Begin by specifying the desired outcome, such as generating a specific code snippet, explaining a concept, or providing guidance on a particular development task. Be precise in your expectations and include any constraints or limitations that the AI model should adhere to.

Do	Don't
✔Prompt: "Generate an HTML and CSS code snippet for a responsive navigation menu that collapses into a hamburger icon on mobile devices."	✘Prompt: "How do I create a responsive navigation menu?"

💡

A solid knowledge of web technologies will help tremendously when prompting. Take some time to learn the fundamentals !

The idea is to split the project into small, achievable tasks, just like a developer would if he was doing it himself. The resulting code will be better, and this approach has several positive side-effects: the result is easier to test and adjust (the mistakes are also less expensive). The task can be sent in parallel to if they are not directly corralated, meaning you can spent less time waiting for a response.

Using domain-specific language and terminology

Employ technical terms, programming languages, frameworks, and libraries that are relevant to your task.
This helps the model comprehend the context and generate more precise and relevant responses.}

Do	Don't
✔ Prompt: "Using font-awesome and sweetalert 2, build a "Share" button that display a popup with the link of the page, with clickable icons of Instagram, Facebook, etc..."	✘ Prompt: "Write a way to display a popup when the share button is clicked with the link and choice between between facebook, instagram, etc..."

💡

Don't hesitate to prompt a free/cheap model like GPT-3.5 to get the frameworks and libs: "Give me five relevant frameworks and librairies to achieve XYZ"

The single HTML file trick

Or how to quickly build a basic UI and connect it to your backend

When prototyping in the initial phase of a task, simply adding in a single html file will give you an output that is self-contained, easily testable UI-only mockup.

You can then modify what's necessary, explain your backend API, and prompt to "Replace the static data with data from the backend API"

API first, frontend later

Sometimes, it's easier to build the backend side first, give a sample of the json response to the model, and prompt to build a beautiful dashboard, using the approriate libraries

Do	Don't
✔ Prompt: "I have a JSON api at endpoint mywebsite.xyz/api that returns a json like this: [{"id":"qtweg", "content":"this is some content"}, {"id":"another id", "content":"this content"}, ...]" display this into a beautiful list of cards	✘ Prompt: "Given a list of elements, write the html code to display a list of elements"