Yapay zekayı daha etkili kullanmanın yollarını mı arıyorsunuz? Günümüzde, dil modelleri ve gelişmiş yapay zeka sistemleri, dünya çapındaki bilgileri kullanıcıların ihtiyaçlarına en yakın şekilde sunabiliyor.Peki, bu teknolojiyi en verimli hale getirmek için hangi yöntemleri kullanmalıyız?
Son gelişen yapay zeka modelleri (örneğin, o1, DeepSeek, o3-mini) insan zekasını yakalama ve hatta bazı noktalarda onu aşma kapasitesine ulaşmaya başladı (detaylar için TrackingAI). Yapay zekanın verimli kullanımı için geliştirilen yeni yöntemler, teknolojiyi daha da güçlü kılıyor. Özellikle Prompt Engineering ve Chain of Prompts teknikleri, AI Agents ile birlikte bu sürecin temel taşları olarak öne çıkıyor.
Ayrıca, Google Deep Research, OpenAI Deep Research ve diğer açık kaynak alternatiflerle desteklenen derin araştırma yöntemleri, yapay zekanın sunduğu olanakları genişletiyor. Tüm bu gelişmeler, yapay zekayı optimize etme ve etkili kullanma arayışında ortaya atılan cevaplardan sadece bazılarını temsil ediyor. Bu modeller, veri açısından neredeyse internetteki her veriyi yutmuş durumda; GPU gücü açısından da gayet yeterli. Yani, modeller belirli işler için yeterliliğe ulaşmış durumda. Bir sonraki zeka sıçramasından önce, yapay zekayı etkili kullanmaya yönelik yeni çığır açıcı ürünler görmemiz daha olasıdır. Örneğin araştırmacılar, OpenAI Deep Research ile "İnsanlığın Son Sınavı" isimli testte, aynı modeli kullanarak başarısını %13'ten %26,6'ya çıkarmışlar.
Peki, biz buradan nasıl bir sonuç çıkarmalıyız? Yapay zeka modellerini sunan şirketler, bazı "benchmark" testleri uyguluyor. Bu testlerde genelde matematik, bilim ve kodlama gibi konular ele alınıyor. Bu metriklerde sıkça şu ifadeleri duyuyoruz:
Peki, biz deneyimlediğimizde ne görürüz?
Tamam abi, güzel de ya hani testler? Benchmarklar? Nerede bizim şampiyon yazılımcı? Neyse, daha fazla uzatmadan sadede geleyim.
İşin özüne inmemiz gerekiyor. Yapay zeka bize bir cevap verirken, öncelikle bizim yazdığımız prompt’u analiz ediyor; buradan bir anlam çıkartıyor ve eğitildiği geniş veri setindeki bilgilere dayanarak, basitçe söylemek gerekirse, istatistik olarak en yüksek olasılığa sahip olan kelime ve ifadeleri seçerek yanıtını hazırlıyor. Bu süreç, modelin sahip olduğu devasa veriyi istatistiksel tahmin yöntemleriyle harmanlamasından ibaret olduğundan, ortaya çıkan cevap da büyük ölçüde sorumuz veya komutumuz doğrultusunda mantıklı bir bütünlük taşıyor. Yani, ne kadar mantıklı, düzenli ve aradığımız konuya uygun bir prompt yazarsak, o kadar güzel bir cevap alıyoruz. İş yine bizde bitiyor; sonuç, yazdığımız prompt'a dayanıyor. Peki, nasıl daha iyi prompt yazarız?
Başta, biraz daha bilimsel yaklaşarak, araştırmalarım sonucu bulduğum kategorilerden ve örneklerden bahsedeceğim. Sonrasında, daha çok deneyimlerimi içeren promptlardan bahsedeceğim. Deneyimlerimden bahsederken yazma stilinden, formattan ve meta prompttan bahsederek yazıyı tamamlayacağım. Doğrudan deneyime atlamak isterseniz. Keyifli okumalar diliyorum :)
YZ istemleri yazarken bazı yaygın hatalardan kaçınmak, daha etkili sonuçlar elde etmenize yardımcı olabilir:
YZ istemleri, amaçlarına ve kullanım alanlarına göre farklı türlerde olabilir. İşte yaygın olarak kullanılan bazı istem türleri :
| İstem Türü | Açıklama | Örnek |
|---|---|---|
| Bilgi İstemleri | Belirli bilgi veya gerçekleri aramak için kullanılır. | "Bir güneş tutulması nedir?" |
| Yaratıcı İstemleri | Yeni sanatsal veya yaratıcı fikirler üretmek için kullanılır. | "Çikolata severler için eğlenceli bir jingle bestele." |
| Yönerge İstemleri | YZ'nin belirli bir görevi yerine getirmesini veya belirli bir çıktı türü üretmesini ister. | "Beyaz pamuklu bir gömlekten kırmızı şarap lekesini nasıl çıkarabilirim?" |
| Karşılaştırma İstemleri | İki veya daha fazla öğeyi veya kavramı karşılaştırmak için kullanılır. | "2017 Honda Civic ve 2019 Toyota Corolla'nın özelliklerini karşılaştır." |
| Özetleme İstemleri | Büyük miktarda materyali hızlı bir şekilde özetlemek için kullanılır. | "Dostoyevski'nin Suç ve Ceza adlı eserinin olay örgüsünü ve temalarını özetle." |
| Çeviri İstemleri | Bir kelimeyi, ifadeyi veya metin bloğunu başka bir dile çevirmek için kullanılır. | ""Alfabe" kelimesini Lehçe'ye çevir." |
| Tamamlama İstemleri | Modelin eksik bir fikri, cümleyi veya problemi devam ettirmesini ister. | "Lütfen şu cümleyi tamamlayın: Florida'daki en yağışlı ay..." |
| Diyalog İstemleri | Karakterler arasında diyalog geliştirmek için kullanılır. | "Kısa bir kurgu öyküsü yazıyorum ve diyaloglarımda yardıma ihtiyacım var..." |
| Yansıtıcı İstemleri | YZ'nin geçmiş deneyimleri, teorileri veya fikirleri düşünmesini veya analiz etmesini ister. | "Günümüz dijital çağında veri gizliliğinin önemi üzerine düşünün. Neden önemlidir?" |
| Bileşik İstemleri | Farklı istem türlerinden unsurları birleştirerek çok katmanlı bir görev oluşturur. | "YZ'nin kişisel sağlık sorunlarını tahmin edebildiği bir gelecek hayal edin..." |
| Sıralı İstemleri | Birbiri üzerine inşa edilen bir dizi soru veya görevdir. | "Yenilenebilir enerji teknolojilerindeki mevcut trendleri açıklayarak başlayın..." |
Bu istem türleri, YZ modellerinden farklı çıktılar elde etmek ve çeşitli görevleri yerine getirmek için kullanılabilir. Örneğin, bilgi istemleri belirli bir konuda bilgi edinmek için kullanılabilirken, yaratıcı istemler yeni fikirler üretmek veya sanatsal içerik oluşturmak için kullanılabilir. YZ istemlerini kullanmanın amacı, verimliliği artırmak, kesin yanıtlar üretmek, yaratıcılığı geliştirmek ve karar vermeyi iyileştirmektir.
YZ modelleriyle etkileşim kurarken, istem mühendisliğini bir konuşma olarak düşünmek faydalıdır. İlk isteminiz, konuşmanın başlangıç noktasıdır ve YZ'ye ne hakkında konuşmak istediğinizi bildirir. YZ'nin yanıtlarına göre takip istemleri kullanarak konuşmayı yönlendirebilir ve istediğiniz konuya odaklanmasını sağlayabilirsiniz. Örneğin, YZ'nin konudan sapması durumunda, istemlerinizi yeniden ifade ederek veya ek bağlam sağlayarak onu tekrar doğru yola yönlendirebilirsiniz.
Farklı YZ modelleri farklı yeteneklere ve güçlü yönlere sahiptir. Bu nedenle, istemleri belirli bir YZ modeline göre özelleştirmek önemlidir. Örneğin, bir model belirli bir alanda uzmanlaşmışsa (örneğin, sağlık veya finans), istemlerinizi bu alana göre uyarlamanız gerekir. Ayrıca, bazı modeller belirli istem tekniklerine (örneğin, birkaç atışlı istem veya düşünce zinciri istemi) daha iyi yanıt verebilir. Her YZ modelinin kendine özgü bir "kişiliği" olduğunu ve buna göre iletişim kurmanız gerektiğini unutmayın.
YZ modelinin yeteneklerini ve sınırlamalarını anlamak, istemlerinizi özelleştirmenize yardımcı olabilir. Örneğin, model belirli bir veri türünde (örneğin metin, resim veya kod) uzmanlaşmışsa, istemlerinizi bu veri türüne göre uyarlamanız gerekir. Ayrıca, modelin belirli bir görevde (örneğin özetleme, çeviri veya soru yanıtlama) daha iyi olduğunu biliyorsanız, istemlerinizi bu göreve odaklamanız gerekir.
Öncelikle belirtmeliyim ki şimdiye kadar sunduğum ve şimdi sunacağım tüm çözümler ile çıkarımlar geçicidir. Elbette, temellerde pek bir değişim olmayacak ve bizim yazdığımız prompt her zaman olacaktır; ancak biraz sonra belirteceğim karmaşık yazma şekillerine belki de 1 yıl sonra ihtiyacımız kalmayacaktır. Kendimizi bu alanda geliştirmeye itmeli ve yeni şeyler denemeye hep açık olmalıyız. Yapay zekanın üstel büyümeye girdiği bir döneme adım atmak üzereyiz. Dolayısıyla, her şey çok hızlı yaşanacak ve değişecektir. Yapay zeka bizi işsiz mi bırakacak diye endişe etmeyi bırakmalı ve bu konulara nasıl adapte olabileceğimizi araştırmalıyız. YZ'yi, en küçük modelden en karmaşık modele kadar nasıl kullanabileceğimizi anlamalıyız. Evet, şimdi deneyimlerime geçebiliriz.
OpenAI'ın yapay zekayı aktif kullanmak ile ilgili dökümanına göz attığınızda, modellerini "the planners" ve "the workhorses" olarak ikiye ayırdığını görürsünüz. Yani, modellerinden bazıları anlam çıkartmak ve plan yapmak konusunda iyiyken, bazıları iş bitirmeye odaklıdır. Örneğin, reasoning (o1, o3-mini) modelleri anlam çıkartma ve mantık yürütme konularında başarılıyken; GPT (gpt-4o) modeli, ortaya çıkartılan ve adım adım ayrıştırılan talimatları yerine getirmekte iyidir.
Diyelim ki kurumsal bir websitesi geliştiriyorsunuz ve bu websitesi için yeni bir giriş sayfası tasarlamak istiyorsunuz. Dikkat ettiğiniz konular şunlar:
Eğer bu konuları doğrudan gpt-4o modeline iletirseniz, çok büyük ihtimalle bir konuda sizin istediğinizi tam olarak yerine getirmeyecektir. Ancak, gpt-4o modeline iletmeden önce, "Yeni bir giriş sayfası tasarlamaya çalışıyorum; daha önce kullandığım siteyi de sana iletiyorum; benim için adım adım uygulanması gereken maddeleri çıkar" (meta-prompt) diyerek, yukarıda sıralanan maddeler ile birlikte mevcutta bulunan sitenizi o1'e iletirseniz ve ortaya çıkan yeni maddeleri gpt-4o veya sonnet-3.5'e iletirseniz, her şey daha tutarlı ve istediğiniz gibi ilerleyecektir. Bunu, yeni nesil AI destekli bazı IDE ve araçlar uygulamaya başladılar bile. (bkz: aider)
Meta prompt ile ilgili bir videoyu buraya bırakıyorum -> Indy Dev Dan Meta Prompt
Prompt yazmak için hangi metin formatını kullanıyorsunuz? Raw, JSON, XML, MD? Bir dakika, prompt yazmak için metin formatı mı? Evet, eğer daha fazla ayrıntı vererek prompt yazacaksak, bunu belirli bir format kullanarak yapmak, isteğimizi yapay zekaya anlatmak konusunda işimizi kolaylaştıracaktır. Bu konuda bir çok deneme yaptım. Garip bir şekilde YZ'ler .md formatında çok kötü sonuçlar veriyorlar. Hiç formatlamadan göndermek bile .md formatından daha çok işe yarıyor. Benim en verim aldığım format xml formatı oldu. Sanırım, yapay zekalar internetten çekilen veriler ile eğitildiği için bu formatı daha kolay ilişkilendirebiliyorlar. Bu konuyu anlamamda ve bir çok konuda bana yardımcı olan bir videoyu şuraya bırakıyorum gerçekten iyi bir test -> Indy Dev Dan Format Karşılaştırma
Xml formatını Anthropic de öneriyor (bkz. Anthropic Prompt Engineering)
Yukarıdaki talimatlara uygun bir örneği aşağıya bırakıyorum:
<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>
Kısaca hayır; ancak, ayrıntı vermeniz gereken durumlar varsa bu formatı kullanmak birçok şeyi kolaylaştırıyor. Prompt yazmayı seviyelere ayıracak olursak:
Örnek 1: Yılan Oyunu
<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, look for the start button in the center of the canvas. When the game is in progress, there will be a scoreboard in the upper right corner. A restart button when the game is lost. Make sure you check the situations correctly.
</instruction>
<instruction>
Create a snake object that has a length of 3 and a direction of right.
</instruction>
<instruction>
Create a food object that has a random position on the canvas. When the snake eats the food, the snake grows longer. Every time the snake eats the food, the score increases by 1. and the food position is changed to a new random position.
The snake grows by 1 unit each time it eats.
</instruction>
<instruction>
The game is lost when the snake hits itself.
</instruction>
<instruction>
The snake moves 1 unit at a time. Adjust the unit size according to the size of the canvas. The canvas should have a total of 256 units.
</instruction>
<instruction>
The snake can move up, down, left and right.
</instruction>
<instruction>
Control the snake with the arrow keys.
</instruction>
<instruction>
The game is won when the snake reaches the size of the canvas.
</instruction>
<instruction>
Use retro colors and style for the game.
</instruction>
</instructions>
Örnek 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 to a SQL table definition.
</purpose>
<instructions>
<instruction> Use postgres 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>
Örnek: Giriş Sayfası
<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 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>
Örnek: Retro stilinde giriş sayfası
<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>
Yapay zeka, çok hızlı bir şekilde gelişerek önümüze geliyor. Bu teknolojiyi kullanmak veya korkmak bizim elimizde. Eğer bu teknolojiden korkmayacak ve kullanmaya karar verirsek, ilk yapmamız gereken şey onunla nasıl iletişim kuracağımızı anlamaktan geçiyor. Bunun için doğru bir prompt'un nasıl yazılacağını dilim döndüğünce anlatmaya çalıştım. Umarım, sizin için faydalı olmuştur. Bu konu hakkında geliştirmiş olduğum aracı incelemek isterseniz Prompt Generator. Fikirlerimi beğendiyseniz ve daha fazlasını istiyorsanız X Linkedin Github adreslerinden bana ulaşabilirsiniz. Saygılarımla :)