Are you looking for ways to use artificial intelligence more effectively? Today, language models and advanced AI systems can deliver global knowledge tailored to users’ needs. But which methods should we use to make this technology as efficient as possible?
The latest AI models (for example, o1, DeepSeek, o3-mini) have begun to reach a capacity where they not only capture human intelligence but, in some aspects, even surpass it (for more details, see TrackingAI). New methods developed for the efficient use of AI make the technology even more powerful. In particular, techniques like Prompt Engineering and Chain of Prompts, along with AI Agents, stand out as the fundamental pillars of this process.
Additionally, deep research methods supported by Google Deep Research, OpenAI Deep Research, and other open-source alternatives are expanding the possibilities offered by AI. All these developments represent just a few of the answers proposed in the quest to optimize and effectively use artificial intelligence. These models have almost ingested every piece of data on the internet, and in terms of GPU power, they are more than adequate. In other words, the models have reached a level of competence for certain tasks. Before the next leap in intelligence, it is likely that we will see new groundbreaking products aimed at using AI more effectively. For example, in a test called The Last Test of Humanity conducted by OpenAI Deep Research, they managed to increase performance from 13% to 26.6% using the same model.
So, what should we take away from this? Companies offering AI models conduct various "benchmark" tests. In these tests, subjects such as mathematics, science, and coding are usually examined. In these metrics, we often hear statements like:
But what do we see when we experience it ourselves?
Alright, man, that’s all well and good—but what about the tests? The benchmarks? Almost our champion coder? Anyway, let me get to the point without further ado.
We need to get to the essence of the matter. When AI gives us an answer, it first analyzes the prompt we have written; it extracts meaning from it and, relying on the vast set of data it was trained on, simply selects the words and expressions that statistically have the highest probability. Since this process is nothing more than the model blending its enormous dataset with statistical prediction methods, the resulting answer largely maintains a logical coherence according to our question or command. In short, the more logical, organized, and topic-relevant prompt we write, the better the answer we receive. Ultimately, it all comes down to the prompt we write. So, how can we write better prompts?
First, I will discuss the categories and examples I discovered through research with a slightly more scientific approach. Later, I will share prompts based on my own experiences. While sharing my experiences, I will also talk about my writing style, formatting, and meta-prompts. If you’d like to jump directly to the experience section, click here. Enjoy your reading! :)
When writing AI prompts, avoiding some common pitfalls can help you achieve more effective results:
AI prompts can vary in type depending on their purpose and application. Here are some common types:
| Prompt Type | Description | Example |
|---|---|---|
| Information Prompts | Used to search for specific information or facts. | "What is a solar eclipse?" |
| Creative Prompts | Used to generate new artistic or creative ideas. | "Compose a fun jingle for chocolate lovers." |
| Instruction Prompts | Ask the AI to perform a specific task or generate a specific type of output. | "How do I remove a red wine stain from a white cotton shirt?" |
| Comparison Prompts | Used to compare two or more items or concepts. | "Compare the features of the 2017 Honda Civic and the 2019 Toyota Corolla." |
| Summarization Prompts | Used to quickly summarize large amounts of material. | "Summarize the plot and themes of Dostoevsky's Crime and Punishment." |
| Translation Prompts | Used to translate a word, phrase, or block of text into another language. | "Translate the word 'alphabet' into Polish." |
| Completion Prompts | Ask the model to complete an incomplete idea, sentence, or problem. | "Please complete the following sentence: The rainiest month in Florida is..." |
| Dialogue Prompts | Used to develop dialogue between characters. | "I’m writing a short fiction story and need help with the dialogue..." |
| Reflective Prompts | Ask the AI to think about or analyze past experiences, theories, or ideas. | "Reflect on the importance of data privacy in today’s digital age. Why is it important?" |
| Compound Prompts | Combine elements from different prompt types to create a multi-layered task. | "Imagine a future where AI can predict personal health issues..." |
| Sequential Prompts | A series of questions or tasks that build upon each other. | "Start by explaining the current trends in renewable energy technology..." |
These types of prompts can be used to obtain different outputs from AI models and perform various tasks. For instance, while information prompts can help you gather specific details, creative prompts can help you generate new ideas or artistic content. The goal of using AI prompts is to increase efficiency, produce precise answers, foster creativity, and improve decision-making.
When interacting with AI models, it is useful to view prompt engineering as a conversation. Your first prompt is the starting point of the conversation, telling the AI what topic to discuss. Based on the AI’s responses, you can steer the conversation by using follow-up prompts to focus on the desired subject. For example, if the AI begins to stray off-topic, you can rephrase your prompt or provide additional context to guide it back on track.
Different AI models have varying capabilities and strengths. Therefore, it is important to tailor your prompts to a specific AI model. For instance, if a model is specialized in a particular field (e.g., healthcare or finance), you should adapt your prompts accordingly. Additionally, some models may respond better to certain prompting techniques (such as few-shot prompting or chain-of-thought prompting). Remember that each AI model has its own “personality” and you should communicate with it accordingly.
Understanding the capabilities and limitations of an AI model can help you customize your prompts. For example, if a model is specialized in a certain type of data (such as text, images, or code), you should adapt your prompts to that data type. Furthermore, if you know that the model performs better in a particular task (e.g., summarization, translation, or answering questions), you should focus your prompts on that task.
First, let me state that all the solutions and conclusions I have provided so far, and will provide in the future, are temporary. Of course, the fundamentals will not change much, and the prompt we write will always be important; however, the complex writing styles I will soon discuss might not be needed a year from now. We must continuously push ourselves to develop in this field and be open to trying new things. We are about to step into an era where AI experiences exponential growth. Therefore, everything will happen very quickly and will change rapidly. We should stop worrying about whether AI will make us jobless and start researching how we can adapt. We need to understand how to use AI from the smallest model to the most complex one. Now, let’s move on to my experiences.
If you check OpenAI’s documentation on using AI actively, you’ll notice that they divide their models into "the planners" and "the workhorses." In other words, some of their models are good at extracting meaning and planning, while others are more focused on task completion. For instance, while reasoning models (o1, o3-mini) are good at extracting meaning and logical reasoning, the (gpt-4o) model excels at following the step-by-step instructions that are provided.
Suppose you are developing a corporate website and want to design a new landing page for it. The points you consider are as follows:
If you directly pass these points to the gpt-4o model, it is very likely that it will not fully execute one of your requirements. However, if you first send the message to the o1 model with something like, “I’m trying to design a new landing page; here’s the website I used before; list the steps I need to follow,” along with the points mentioned above, and then pass the resulting steps to the gpt-4o or sonnet-3.5 model, everything will progress more consistently and as desired. New-generation AI-supported IDEs and tools have even started to implement this (see: aider).
Which text format do you use to write prompts? Raw, JSON, XML, Markdown? Wait a minute—does the text format really matter when writing prompts? Yes, if we are going to provide more details in our prompts, describing our request using a particular format will make it easier for the AI to understand. I have done many experiments on this. Strangely enough, AIs produce very poor results with Markdown (.md) format. Sending text without any formatting often works better than using .md format. The format that has given me the best results is XML. I believe this is because AIs are trained on data scraped from the internet and can more easily relate to this format. Here’s a really good video that helped me understand this concept (check it out here: Indy Dev Dan Format Comparison ).
Anthropic also recommends using the XML format (see Anthropic Prompt Engineering).
<persona>
You are a senior software developer. You are an expert in HTML, CSS, and JAVASCRIPT. You use Tailwind with CSS.
</persona>
<purpose>
Create a login page using HTML, CSS, and JAVASCRIPT with Tailwind.
</purpose>
<example>
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Corporate Login</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="./tailwind.config.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
</head>
<body class="bg-gray-100">
<div class="min-h-screen flex items-center justify-center">
<div class="max-w-6xl w-full mx-auto p-6">
<div class="bg-white rounded-2xl shadow-xl flex flex-col md:flex-row">
<!-- Login Form Section -->
<div class="w-full md:w-1/2 p-8 lg:p-12">
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-800 mb-2">
Welcome back
</h1>
<p class="text-gray-600">
Please enter your credentials to sign in
</p>
</div>
<form id="loginForm" class="space-y-6">
<div>
<label
for="email"
class="block text-sm font-medium text-gray-700 mb-2"
>Email
address</label>
<input
type="email"
id="email"
name="email"
required
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Enter your email"
/>
</div>
<div>
<label
for="password"
class="block text-sm font-medium text-gray-700 mb-2"
>
Password</label>
<input
type="password"
id="password"
name="password"
required
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Enter your password"
/>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input
type="checkbox"
id="remember"
name="remember"
class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
/>
<label for="remember"
class="ml-2 block text-sm text-gray-700"
>Remember me</label>
</div>
<a href="#"
class="text-sm text-blue-600 hover:text-blue-800"
>Forgot
password?</a>
</div>
<button
type="submit"
class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition duration-200"
>
Sign in
</button>
<p class="text-center text-sm text-gray-600"> Don't have an
account? <a
href="#"
class="text-blue-600 hover:text-blue-800 font-medium"
>Sign
up</a>
</p>
</form>
</div>
<!-- Illustration Section -->
<div
class="w-full md:w-1/2 bg-blue-600 rounded-r-2xl p-8 lg:p-12 hidden md:block"
>
<div class="h-full flex items-center justify-center">
<div class="text-center text-white">
<!-- Illustration svg-->
<h2 class="text-3xl font-bold mb-4">Welcome to Our Platform</h2>
<p class="text-lg opacity-80">
Securely access your workspace and manage your projects
efficiently.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</html>
<tailwind.config.js>
tailwind.config = {
theme: {
extend: {
colors: {
blue: {
50: "#eff6ff",
100: "#dbeafe",
200: "#bfdbfe",
300: "#93c5fd",
400: "#60a5fa",
500: "#3b82f6",
600: "#2563eb",
700: "#1d4ed8",
800: "#1e40af",
900: "#1e3a8a",
}
},
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'Segoe UI', 'Roboto',
'Helvetica Neue', 'Arial', 'sans-serif'],
},
},
},
plugins: [],
}
</tailwind.config.js>
<script>
document.addEventListener('DOMContentLoaded', function () {
const loginForm = document.getElementById('loginForm');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const rememberCheckbox = document.getElementById('remember');
loginForm.addEventListener('submit', function (e) {
e.preventDefault();
// Basic validation
if (!emailInput.value || !passwordInput.value) {
alert('Please fill in all fields');
return;
}
// Email validation
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(emailInput.value)) {
alert('Please enter a valid email address');
return;
}
// Here you would typically make an API call to your backend
console.log('Form submitted', {
email: emailInput.value,
password: passwordInput.value,
remember: rememberCheckbox.checked
});
// For demo purposes, show success message
alert('Login successful!');
});
});
</script>
</example>
<instructions>
<instruction>Form should be responsive.</instruction>
<instruction>Form should be centered on the page.</instruction>
<instruction>Have an illustration on the right side and login information on the left side.</instruction>
<instruction>Have a corporate login page.</instruction>
<instruction>Have a remember me button.</instruction>
<instruction>Have a forgot password link.</instruction>
<instruction>Have a sign up link.</instruction>
</instructions>
<illustration-as-svg>
<svg
class="w-48 h-48 mx-auto mb-6"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 7L12 3L4 7M20 7L12 11M20 7V17L12 21M12 11L4 7M12 11V21M4 7V17L12 21"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</illustration-as-svg>
In short, no; however, if you need to provide detailed instructions, using this format can make many things easier. We can break prompt writing into different levels:
Example 1: Snake Game
<persona>
You are a senior software developer. You are an expert in HTML, CSS, and JAVASCRIPT. You use Tailwind with CSS.
</persona>
<purpose>
Create a snake game using HTML, CSS, and JAVASCRIPT with Tailwind.
</purpose>
<instructions>
<instruction>
Create a canvas element with a width of 512px and a height of 512px.
</instruction>
<instruction>
Before the game starts, display a start button in the center of the canvas. Once the game begins, a scoreboard should appear in the upper right corner and a restart button should be available when the game is lost. Ensure you check these scenarios correctly.
</instruction>
<instruction>
Create a snake object with a length of 3 that moves to the right.
</instruction>
<instruction>
Create a food object at a random position on the canvas. Each time the snake eats the food, it grows longer, the score increases by 1, and the food relocates to a new random position.
</instruction>
<instruction>
The game is over when the snake collides with itself.
</instruction>
<instruction>
The snake moves one unit at a time. Adjust the unit size based on the canvas dimensions. The canvas should consist of a total of 256 units.
</instruction>
<instruction>
The snake can move up, down, left, and right.
</instruction>
<instruction>
Control the snake using the arrow keys.
</instruction>
<instruction>
The game is won when the snake occupies the entire canvas.
</instruction>
<instruction>
Use retro colors and styling for the game.
</instruction>
</instructions>
Example 2: Typescript to SQL Table
<persona>
You are a senior software developer. You are an expert in SQL and TypeScript.
</persona>
<purpose>
Convert the TypeScript interface into a SQL table definition.
</purpose>
<instructions>
<instruction>Use PostgreSQL dialect.</instruction>
<instruction>Respond only with the table definition.</instruction>
<instruction>Optimize the table for performance.</instruction>
</instructions>
<interface>
Users {
id: number;
name: string;
email: string;
created_at: Date;
}
</interface>
Example: Login Page
<persona>
You are a senior software developer. You are an expert in HTML, CSS, and JAVASCRIPT. You use Tailwind with CSS.
</persona>
<purpose>
Create a login page using HTML, CSS, and JAVASCRIPT with Tailwind.
</purpose>
<examples>
<example>
<!-- Tailwind example -->
<!-- tailwind.config.js
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary:
{"50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a","950":"#172554"}
}
},
fontFamily: {
'body': [
'Inter',
'ui-sans-serif',
'system-ui',
'-apple-system',
'system-ui',
'Segoe UI',
'Roboto',
'Helvetica Neue',
'Arial',
'Noto Sans',
'sans-serif',
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji'
],
'sans': [
'Inter',
'ui-sans-serif',
'system-ui',
'-apple-system',
'system-ui',
'Segoe UI',
'Roboto',
'Helvetica Neue',
'Arial',
'Noto Sans',
'sans-serif',
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji'
]
}
}
}
-->
<!--
<section class="bg-gray-50 dark:bg-gray-900">
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<a href="#" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
<img class="w-8 h-8 mr-2" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg"
alt="logo">
Flowbite
</a>
<div class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0
dark:bg-gray-800 dark:border-gray-700">
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
<h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl
dark:text-white">
Sign in to your account
</h1>
<form class="space-y-4 md:space-y-6" action="#">
<div>
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your
email</label>
<input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900
rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5
dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white
dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com"
required="">
</div>
<div>
<label for="password" class="block mb-2 text-sm font-medium text-gray-900
dark:text-white">Password</label>
<input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50
border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500
dark:focus:border-blue-500" required="">
</div>
<div class="flex items-center justify-between">
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="remember" aria-describedby="remember" type="checkbox" class="w-4 h-4 border
border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700
dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800" required="">
</div>
<div class="ml-3 text-sm">
<label for="remember" class="text-gray-500 dark:text-gray-300">Remember me</label>
</div>
</div>
<a href="#" class="text-sm font-medium text-primary-600 hover:underline
dark:text-primary-500">Forgot password?</a>
</div>
<button type="submit" class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4
focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5
text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Sign
in</button>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">
Don’t have an account yet? <a href="#" class="font-medium text-primary-600 hover:underline
dark:text-primary-500">Sign up</a>
</p>
</form>
</div>
</div>
</div>
</section>
-->
</example>
<example>
<!-- Pure HTML, CSS, and JavaScript example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Login Form</h2>
<form action="/action_page.php" method="post">
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
</body>
</html>
-->
</example>
</examples>
<instructions>
<instruction>Form should be responsive.</instruction>
<instruction>Form should be centered on the page.</instruction>
<instruction>Have an illustration on the right side and login information on the left side.</instruction>
<instruction>Have a corporate login page.</instruction>
<instruction>Have a remember me button.</instruction>
<instruction>Have a forgot password link.</instruction>
<instruction>Have a sign up link.</instruction>
</instructions>
Example: Retro-Style Login Page
<persona>
You are a senior software developer. You are an expert in HTML, CSS, and JAVASCRIPT. You use Tailwind with CSS.
</persona>
<purpose>
Create a login page using HTML, CSS, and JAVASCRIPT with Tailwind.
</purpose>
<example>
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Corporate Login</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="./tailwind.config.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
</head>
<body class="bg-gray-100">
<div class="min-h-screen flex items-center justify-center">
<div class="max-w-6xl w-full mx-auto p-6">
<div class="bg-white rounded-2xl shadow-xl flex flex-col md:flex-row">
<!-- Login Form Section -->
<div class="w-full md:w-1/2 p-8 lg:p-12">
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-800 mb-2">
Welcome back
</h1>
<p class="text-gray-600">
Please enter your credentials to sign in
</p>
</div>
<form id="loginForm" class="space-y-6">
<div>
<label
for="email"
class="block text-sm font-medium text-gray-700 mb-2"
>Email
address</label>
<input
type="email"
id="email"
name="email"
required
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Enter your email"
/>
</div>
<div>
<label
for="password"
class="block text-sm font-medium text-gray-700 mb-2"
>
Password</label>
<input
type="password"
id="password"
name="password"
required
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Enter your password"
/>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input
type="checkbox"
id="remember"
name="remember"
class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
/>
<label for="remember"
class="ml-2 block text-sm text-gray-700"
>Remember me</label>
</div>
<a href="#"
class="text-sm text-blue-600 hover:text-blue-800"
>Forgot
password?</a>
</div>
<button
type="submit"
class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition duration-200"
>
Sign in
</button>
<p class="text-center text-sm text-gray-600"> Don't have an
account? <a
href="#"
class="text-blue-600 hover:text-blue-800 font-medium"
>Sign
up</a>
</p>
</form>
</div>
<!-- Illustration Section -->
<div
class="w-full md:w-1/2 bg-blue-600 rounded-r-2xl p-8 lg:p-12 hidden md:block"
>
<div class="h-full flex items-center justify-center">
<div class="text-center text-white">
<!-- Illustration svg-->
<h2 class="text-3xl font-bold mb-4">Welcome to Our Platform</h2>
<p class="text-lg opacity-80">
Securely access your workspace and manage your projects
efficiently.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</html>
<tailwind.config.js>
tailwind.config = {
theme: {
extend: {
colors: {
blue: {
50: "#eff6ff",
100: "#dbeafe",
200: "#bfdbfe",
300: "#93c5fd",
400: "#60a5fa",
500: "#3b82f6",
600: "#2563eb",
700: "#1d4ed8",
800: "#1e40af",
900: "#1e3a8a",
}
},
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'Segoe UI', 'Roboto',
'Helvetica Neue', 'Arial', 'sans-serif'],
},
},
},
plugins: [],
}
</tailwind.config.js>
<script>
document.addEventListener('DOMContentLoaded', function () {
const loginForm = document.getElementById('loginForm');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const rememberCheckbox = document.getElementById('remember');
loginForm.addEventListener('submit', function (e) {
e.preventDefault();
// Basic validation
if (!emailInput.value || !passwordInput.value) {
alert('Please fill in all fields');
return;
}
// Email validation
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(emailInput.value)) {
alert('Please enter a valid email address');
return;
}
// Here you would typically make an API call to your backend
console.log('Form submitted', {
email: emailInput.value,
password: passwordInput.value,
remember: rememberCheckbox.checked
});
// For demo purposes, show success message
alert('Login successful!');
});
});
</script>
</example>
<instructions>
<instruction>Form should be responsive.</instruction>
<instruction>Form should be centered on the page.</instruction>
<instruction>Have an illustration on the right side and login information on the left side.</instruction>
<instruction>Have a corporate login page.</instruction>
<instruction>Have a remember me button.</instruction>
<instruction>Have a forgot password link.</instruction>
<instruction>Have a sign up link.</instruction>
<instruction>Use illustration-as-svg as illustration </instruction>
<instruction>Use retro-style for page</instruction>
</instructions>
<illustration-as-svg>
<svg
class="w-48 h-48 mx-auto mb-6"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 7L12 3L4 7M20 7L12 11M20 7V17L12 21M12 11L4 7M12 11V21M4 7V17L12 21"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</illustration-as-svg>
AI is advancing rapidly before our eyes. Whether we choose to use this technology or be afraid of it is up to us. If we decide not to fear but to embrace and use this technology, the first thing we need to do is understand how to communicate with it. I have tried to explain how to write the right prompt as clearly as possible. I hope it has been useful for you. If you would like to check out the tool I developed on this topic, visit Prompt Generator. If you like my ideas and want more, feel free to reach out via X Linkedin or Github. Best regards!