From 098d444b321370315e0298407e7719b98fbadcc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fatih=20Kadir=20Ak=C4=B1n?= Date: Mon, 18 May 2026 09:48:27 +0300 Subject: [PATCH] Add Turkish prompt design presentation Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/app/layout.tsx | 3 +- src/app/presentation/page.tsx | 716 +++++++++++++++------- src/components/presentation/SlideDeck.tsx | 208 +++++-- 3 files changed, 651 insertions(+), 276 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 44a2ea20..b67a0762 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -153,6 +153,7 @@ export default async function RootLayout({ const pathname = headersList.get("x-pathname") || headersList.get("x-invoke-path") || ""; const isEmbedRoute = pathname.startsWith("/embed"); const isKidsRoute = pathname.startsWith("/kids"); + const isPresentationRoute = pathname.startsWith("/presentation"); const locale = await getLocale(); const messages = await getMessages(); @@ -191,7 +192,7 @@ export default async function RootLayout({ )} - {isEmbedRoute || isKidsRoute ? ( + {isEmbedRoute || isKidsRoute || isPresentationRoute ? ( children ) : ( <> diff --git a/src/app/presentation/page.tsx b/src/app/presentation/page.tsx index 583b32a3..2bd94827 100644 --- a/src/app/presentation/page.tsx +++ b/src/app/presentation/page.tsx @@ -1,233 +1,527 @@ -import { SlideDeck, SlideTitle, SlideContent, SlideHighlight } from "@/components/presentation/SlideDeck"; -import { MoveRight, Star, GitMerge, FileCode2, Sparkles, MessageSquare, Globe, Users, Code, Zap, Lightbulb } from "lucide-react"; -import Link from "next/link"; -import { Button } from "@/components/ui/button"; +import { + Blocks, + Bot, + BrainCircuit, + CheckCircle2, + CircleDotDashed, + ClipboardCheck, + Clock3, + DatabaseZap, + FileText, + Filter, + GitBranch, + Layers3, + Lightbulb, + MessageSquareText, + Network, + PackageCheck, + Puzzle, + RefreshCw, + Route, + Scissors, + ShieldCheck, + Sparkles, + Target, + TimerReset, + WandSparkles, +} from "lucide-react"; +import type { LucideIcon } from "lucide-react"; +import Image from "next/image"; +import type { ReactNode } from "react"; +import { SlideContent, SlideDeck, SlideHighlight, SlideTitle } from "@/components/presentation/SlideDeck"; export const metadata = { - title: "Why prompts.chat? | Presentation", - description: "Discover why prompts are more important than ever in the agentic era.", + title: "Prompt Tasarımı ve Context Yönetimi | Presentation", + description: "30 dakikalık Türkçe konuşma: prompt tasarımı, context yönetimi ve prompts.chat.", }; +const speakerNotes = [ + "Açılışta sunumun amacını netleştir: Bu konuşma prompt ezberlemek değil, bağlamı bilinçli yönetmek üzerine. 30 dakika sonunda herkesin kendi işine uygulayabileceği bir kontrol listesi olacak.", + "Konuşmacı slaytı kısa tutulmalı. Kişisel hikaye: Awesome ChatGPT Prompts ile başlayan topluluk deneyimi, prompts.chat ile promptların paylaşılabilir, sürümlenebilir ve geliştirilebilir varlıklara dönüşmesi.", + "Akışı anlat: önce zihinsel model, sonra promptun anatomisi, sonra context yönetimi ve ölçüm. prompts.chat bölümünü ürün demosu gibi değil, bu prensiplerin pratik karşılığı olarak konumlandır.", + "Ana mesaj: Modeli sadece cevap makinesi gibi değil, sınırlı dikkat alanına sahip bir ekip arkadaşı gibi düşünün. Prompt tasarımı görevi tanımlar; context yönetimi modelin neye bakacağını seçer.", + "Prompt tasarımının yalnızca güzel cümle yazmak olmadığını vurgula. Rol, hedef, veri, sınır, örnek ve çıktı sözleşmesi bir araya geldiğinde modelin çalışma alanı oluşur.", + "Bu slaytta kötü prompt / iyi prompt farkını canlı okuyarak göster. İyi örneğin daha uzun olduğu için değil, karar yükünü azalttığı için iyi olduğunu söyle.", + "Context penceresini dosya dolabı değil, toplantı masası metaforu ile anlat. Masaya her şeyi koymak odak kaybettirir; doğru şeyleri doğru sırayla koymak performansı artırır.", + "Bağlam katmanlarını sırayla açıkla. Sistem ve geliştirici talimatlarının politikayı, kullanıcı mesajının amacı, araç sonuçlarının kanıtı, geçmişin ise sürekliliği taşıdığını anlat.", + "Önemli ayrım: Context çokluğu kalite demek değildir. Gürültü, eski kararlar ve çelişkili talimatlar modeli kararsızlaştırır. Context tasarrufu aynı zamanda kalite kontrolüdür.", + "Kısa bir teknik çerçeve ver: seç, sırala, sıkıştır, doğrula. Bu dört fiil context yönetiminin günlük pratiği olabilir.", + "Örnekler model davranışını güçlü biçimde kilitler. Ancak yanlış örnekler de yanlış davranışı kilitler. Örnekleri az ama temsil gücü yüksek seçmek gerektiğini vurgula.", + "Çıktı sözleşmesi özellikle ekiplerde önemlidir. JSON, tablo, diff, adım adım plan gibi formatlar otomasyon ve tekrar üretilebilirlik sağlar.", + "Araç kullanan ajanlarda prompt, sadece cevap formatını değil yetki sınırını da belirler. Ne zaman arama yapmalı, ne zaman sormalı, ne zaman durmalı gibi kararları açık yazın.", + "Context yönetiminin operasyonel tarafı: uzun konuşmalarda özet, dosya tabanlı işlerde ilgili parçalar, arama tabanlı işlerde kaynak ve alıntı. Her şeyi tek mesaja doldurmak yerine akış tasarla.", + "Hata modlarını örneklerle anlat: belirsiz hedef, eski bağlam, çelişki, görünmez varsayım, format eksikliği. Bunlar model hatası gibi görünür ama çoğu zaman tasarım hatasıdır.", + "Ölçüm slaytında küçük bir test setinin değerini anlat. Aynı promptu birkaç gerçek senaryo ile denemek, tek seferlik iyi cevaptan daha güvenilirdir.", + "prompts.chat'i bağlamla ilişkilendir: iyi promptlar tek kişide kalmamalı. Paylaşım, sürümleme ve geri bildirim prompt kalitesini artırır.", + "Ekip pratiğine geç: promptlar kod gibi yaşamalı. Sahiplik, değişiklik geçmişi, review ve örnek çıktılar promptun güvenilirliğini artırır.", + "Kapanış kontrol listesini yavaş oku. Dinleyicilerin kendi promptlarını bu beş soruyla gözden geçirmesini iste.", + "Son slaytta tek cümlelik kapanış: İyi prompt, modele ne yapacağını söyler; iyi context yönetimi, neye dayanarak yapacağını belirler.", +]; + +type CardProps = { + icon: LucideIcon; + title: string; + children: ReactNode; + accent?: string; +}; + +function Card({ icon: Icon, title, children, accent = "text-primary" }: CardProps) { + return ( +
+
+ +
+

{title}

+

{children}

+
+ ); +} + +function Pill({ children }: { children: ReactNode }) { + return ( + + {children} + + ); +} + +function CodePanel({ children, title = "prompt.md" }: { children: ReactNode; title?: string }) { + return ( +
+
+
+ + + +
+ {title} +
+ 
{children}
+
+ ); +} + +function FlowStep({ icon: Icon, title, text }: { icon: LucideIcon; title: string; text: string }) { + return ( +
+
+ +
+

{title}

+

{text}

+
+ ); +} + +function ContextLayer({ label, description, tone }: { label: string; description: string; tone: string }) { + return ( +
+
+
+

{label}

+

{description}

+
+
+ ); +} + +function MiniChecklist({ items }: { items: string[] }) { + return ( +
+ {items.map((item) => ( +
+ + {item} +
+ ))} +
+ ); +} + export default function PresentationPage() { return ( - - {/* 1. Title Slide */} -
-
- + +
+
+
- Why prompts.chat? - Discover why prompts are more important than ever in the agentic era. -

- Use arrow keys or swipe to navigate -

-
- - {/* 2. The Genesis */} -
- - The History of prompts.chat - - From a simple repository to a full-fledged platform. We started as Awesome ChatGPT Prompts, and evolved to support the entire AI community with typed prompts, workflows, and skills. + Prompt Tasarımı ve Context Yönetimi + + 30 dakikalık pratik bir çerçeve: daha iyi talimat, daha temiz bağlam, daha güvenilir AI çıktısı. -
-

- Awesome ChatGPT Prompts → prompts.chat -

+
+ prompts.chat/presentation + Ok tuşları, boşluk, F, N
- {/* 3. The Paradigm Shift */} -
- - The Agentic Era - - Why are prompts still important? Because agents need instructions. As AI becomes more autonomous, the quality of instructions determines the quality of the outcome. - -
- - {/* 4. The Core Question */} -
- - Wait, isn't AI getting smarter? - - Yes, but smart AI still needs direction. -

- A genius without instructions is just a very capable idle machine. - -
- - {/* 5. The Agentic Need */} -
- The Agentic Need - - Agents require precise instructions, constraints, and goal definitions. -
    -
  • What tools can they use?
    • -
  • What are their boundaries?
    • -
  • How should they format the output?
    • -
  • What tone should they adopt?
    • -
- -
- - {/* 6. The SLM Revolution */} -
- - Crucial for SLMs - - Small Language Models (SLMs) are the future of edge computing. They require precise, well-crafted prompts to perform tasks accurately without the massive parameter count of frontier models. - -
- - {/* 7. SLM Constraints */} -
- SLM Constraints - - Smaller models lack the vast "common sense" of 1T+ parameter models. -

- They require highly optimized, battle-tested prompts to punch above their weight class and run efficiently on local devices. - -
- - {/* 8. The New Primitive */} -
- - Prompts are New Code Snippets - - Just as developers copy/paste code snippets from StackOverflow, AI practitioners now share prompt templates. Prompts are the new primitive of programming. - -
- const codeSnippet = "..." - - const promptTemplate = "..." +
+
+
+
+
+
+ Fatih Kadir Akın profil fotoğrafı +
+

Konuşmacı

+

Fatih Kadir Akın

+

+ WordPress Developer Advocate, Automattic - Creator of prompts.chat +

+
+
+
+
+
+ Merhaba, ben Fatih. + + Geliştiricilerin hayatını kolaylaştıran uygulamalar geliştiriyorum; bunlardan biri de{" "} + prompts.chat. + +
+
+ WordPress + WordPress +
+
+ Automattic + Automattic +
+
- {/* 9. Open Source AI */} -
- - Community Sharing - - Nobody learns in isolation. By sharing prompts, we accelerate the collective understanding of how to communicate with AI. It's the open-source movement for human-AI interaction. - -
- - {/* 10. Collective Intelligence */} -
- Collective Intelligence - - We are building the largest open repository of human-AI interaction patterns. -

- Tested, versioned, and peer-reviewed. - -
- - {/* 11. Feature - Typed Prompts */} -
- - Feature: Typed Prompts - - Natural language is ambiguous. Typed Prompts bring structure. -

- Define inputs, outputs, and variables systematically so prompts can be executed predictably via APIs. - -
- - {/* 12. Feature - Workflows */} -
-
-
- -
- -
+
+ Bugünkü rota +
+ + + +
- Feature: Workflows - - Some tasks are too complex for a single prompt. -

- Chain multiple prompts together to create Workflows — dividing and conquering complex agentic tasks. -
- {/* 13. Feature - Agent Skills */} -
- Feature: Agent Skills - - Equip coding assistants (like Claude, Cursor, Windsurf) with specialized, multi-file capabilities. -

- Give your AI the context and rules it needs to build within your specific tech stack. - -
- - {/* 14. Feature - Change Requests */} -
- - Feature: Change Requests - - Prompts evolve. We've introduced Pull Requests for Prompts. -

- Collaborate, suggest improvements, and refine instructions together as a community. - -
- - {/* 15. For Developers */} -
- For Developers - - prompts.chat isn't just for end-users. With features like Agent Skills, Typed Prompts, and API integrations, it's a vital tool for developers building the next generation of AI apps. - -
- - {/* 16. For Everyone */} -
- - For Everyone - - Discover, collect, and learn from Promptmasters. -

- A beautifully designed, accessible platform to find exactly what you need to make AI work for you. - -
- - {/* 17. Self-Hosted */} -
- - Fully Self-Hosted - - Your data, your platform. -

- prompts.chat is 100% open-source and deployable to any server or cloud provider. Own your organization's prompt library securely. - -
- - {/* 18. The Vision */} -
- The Vision - - To create the standard protocol for human-AI interaction. -

- Where every great instruction is shared, improved, and accessible to all. - -
- - {/* 19. Call to Action */} -
-
- +
+ AI ile çalışmak: çok zeki ama bağlama bağımlı bir ekip arkadaşı +
+ + Modelin optimizasyon hedefi belirsizse cevap da belirsizleşir. + + + Ne yapılmayacağı, ne yapılacağı kadar önemlidir. + + + Model en son ve en belirgin bağlama fazla ağırlık verir. +
- Join the Community - - Start exploring, sharing, and building the future of AI interaction today. + + İyi prompt ne yapılacağını, iyi context yönetimi ise{" "} + neye dayanarak yapılacağını belirler. -
- - - - - - +
+ +
+
+ Prompt tasarımı cümle süslemek değildir + + Prompt, modelle aranızdaki çalışma sözleşmesidir. + Cevabın amacı, kapsamı, kaynakları, formatı ve kalite barı bu sözleşmede yer alır. + +
+
+ {[ + ["Rol", "Hangi perspektiften düşünecek?"], + ["Görev", "Tam olarak neyi üretecek?"], + ["Bağlam", "Hangi bilgiye dayanacak?"], + ["Kısıt", "Neyi yapmayacak veya aşmayacak?"], + ["Çıktı", "Nasıl teslim edecek?"], + ].map(([label, text]) => ( +
+
{label[0]}
+
+

{label}

+

{text}

+
+
+ ))} +
+
+ +
+
+ Kötü prompt / iyi prompt + + Uzun olan değil, karar yükünü azaltan prompt daha iyidir. + +
+
+ + {`Bana context management hakkında iyi bir yazı yaz.`} + + + {`Rol: Kıdemli AI ürün danışmanı. +Amaç: Teknik olmayan ürün ekibine context management anlat. +Bağlam: 30 dakikalık şirket içi eğitim. +Kısıt: Jargon kullanma, 3 örnek ver, riskleri belirt. +Çıktı: Başlık, 5 maddelik özet, uygulanabilir kontrol listesi.`} + +
+
+ +
+ Context penceresi dosya dolabı değil, toplantı masasıdır + + Masaya her şeyi koyarsanız ekip odaklanamaz. Doğru belgeleri, doğru sırayla, doğru ayrıntı seviyesinde getirirsiniz. + +
+ + + + +
+
+ +
+
+ Bağlam katmanları + + Model tek bir metni değil, üst üste binmiş talimat ve kanıt katmanlarını yorumlar. + +
+
+ + + + + +
+
+ +
+ Daha fazla context her zaman daha iyi değildir +
+ + Alakasız detaylar, önemli sinyali gömer. + + + Geçmişte doğru olan bilgi bugün yanlış olabilir. + + + Model hangi talimata uyacağını tahmin etmek zorunda kalır. + +
+ + Context yönetimi, token tasarrufu değil; dikkat yönetimidir. + +
+ +
+ Pratik yöntem: seç, sırala, sıkıştır, doğrula +
+ + + + +
+
+ +
+
+ Örnekler davranışı kilitler + + Few-shot örnekler modele sadece formatı değil, neyi iyi saydığınızı gösterir. + +
+
+
+ +

Örnek seçerken

+
+ +
+
+ +
+
+ Çıktı sözleşmesi otomasyonun kapısıdır + + İnsan okuyacaksa okunabilirlik, sistem okuyacaksa şema önemlidir. + +
+ + {`{ + "summary": "en fazla 3 cümle", + "risks": ["kanıta dayalı risk listesi"], + "next_actions": [ + { "owner": "rol", "task": "yapılacak iş", "priority": "P0 | P1 | P2" } + ], + "confidence": "low | medium | high" +}`} + +
+ +
+ Ajanlarda prompt = yetki ve durma kuralları +
+ + Bilgi eksikse arama yap; tahminle doldurma. + + + Kapsam veya risk davranışı etkiliyorsa kullanıcıya dön. + + + Başarı kriteri tamamlandıysa yeni iş icat etme. + +
+
+ +
+
+ Uzun işlerde context akışı tasarla + + Tek dev prompt yerine, işi aşamalara böl: keşif, plan, uygulama, doğrulama, özet. + +
+
+ {[ + { icon: Network, title: "Keşif", text: "Dosya, kaynak ve kısıtları topla." }, + { icon: Route, title: "Plan", text: "Kararları ve bağımlılıkları görünür yap." }, + { icon: Blocks, title: "Uygulama", text: "Sadece gerekli bağlamı sonraki adıma taşı." }, + { icon: ClipboardCheck, title: "Doğrulama", text: "Çıktıyı ölçüt ve kaynakla kontrol et." }, + ].map(({ icon: Icon, title, text }) => ( +
+
+ +
+
+

{title}

+

{text}

+
+
+ ))} +
+
+ +
+ En sık görülen hata modları +
+ + + + +
+
+ +
+
+ Promptları ölç: tek iyi cevap yetmez + + Küçük bir test seti, promptun gerçek hayatta dayanıklı olup olmadığını gösterir. + +
+
+ +
+
+ +
+
+ prompts.chat: promptları paylaşılabilir hale getirmek + + Promptlar kaybolan sohbet parçaları olmamalı. Keşfedilebilir, fork edilebilir, iyileştirilebilir ve tekrar kullanılabilir olmalı. + +
+
+ + İyi örneği arayıp bulmak, sıfırdan başlamaktan hızlıdır. + + + Promptlar review ve geri bildirimle olgunlaşır. + + + Aynı kaliteyi farklı ekip ve iş akışlarına taşırsınız. + +
+
+ +
+ Promptlar kod gibi yaşamalı +
+ + + + +
+
+ +
+
+ Kapanış kontrol listesi + + Bir sonraki promptunuzu göndermeden önce bu beş soruyu sorun. + +
+ +
+ +
+
+ +
+ Teşekkürler + + İyi prompt modele ne yapacağını söyler. +
+ İyi context yönetimi neye dayanarak yapacağını belirler. + +
+ prompts.chat + Q&A
diff --git a/src/components/presentation/SlideDeck.tsx b/src/components/presentation/SlideDeck.tsx index a241b7f4..f1e58b00 100644 --- a/src/components/presentation/SlideDeck.tsx +++ b/src/components/presentation/SlideDeck.tsx @@ -1,18 +1,25 @@ "use client"; -import { useState, useEffect, useCallback, ReactNode } from "react"; -import { ChevronLeft, ChevronRight, X } from "lucide-react"; -import { Button } from "@/components/ui/button"; +import { Children, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { ChevronLeft, ChevronRight, Maximize, Minimize, StickyNote, X } from "lucide-react"; import Link from "next/link"; +import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; interface SlideDeckProps { - children: ReactNode[]; + children: ReactNode; + notes?: string[]; } -export function SlideDeck({ children }: SlideDeckProps) { +export function SlideDeck({ children, notes }: SlideDeckProps) { + const slides = useMemo(() => Children.toArray(children), [children]); const [currentSlide, setCurrentSlide] = useState(0); - const totalSlides = children.length; + const [isFullscreen, setIsFullscreen] = useState(false); + const [showNotes, setShowNotes] = useState(false); + const swipeStartX = useRef(null); + const containerRef = useRef(null); + const totalSlides = slides.length; + const currentNote = notes?.[currentSlide]; const nextSlide = useCallback(() => { setCurrentSlide((prev) => Math.min(prev + 1, totalSlides - 1)); @@ -22,89 +29,156 @@ export function SlideDeck({ children }: SlideDeckProps) { setCurrentSlide((prev) => Math.max(prev - 1, 0)); }, []); + const toggleFullscreen = useCallback(() => { + if (document.fullscreenElement) { + document.exitFullscreen(); + return; + } + + containerRef.current?.requestFullscreen(); + }, []); + useEffect(() => { - const handleKeyDown = (e: KeyboardEvent) => { - if (e.key === "ArrowRight" || e.key === " ") { - e.preventDefault(); + const handleFullscreenChange = () => { + setIsFullscreen(Boolean(document.fullscreenElement)); + }; + + document.addEventListener("fullscreenchange", handleFullscreenChange); + return () => document.removeEventListener("fullscreenchange", handleFullscreenChange); + }, []); + + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === "ArrowRight" || event.key === " " || event.key === "PageDown") { + event.preventDefault(); nextSlide(); - } else if (e.key === "ArrowLeft") { - e.preventDefault(); + } else if (event.key === "ArrowLeft" || event.key === "PageUp") { + event.preventDefault(); prevSlide(); + } else if (event.key === "Home") { + event.preventDefault(); + setCurrentSlide(0); + } else if (event.key === "End") { + event.preventDefault(); + setCurrentSlide(totalSlides - 1); + } else if (event.key === "f" || event.key === "F") { + event.preventDefault(); + toggleFullscreen(); + } else if (event.key === "n" || event.key === "N") { + event.preventDefault(); + setShowNotes((value) => !value); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); - }, [nextSlide, prevSlide]); + }, [nextSlide, prevSlide, toggleFullscreen, totalSlides]); return ( -
- {/* Top Navigation */} -
-
+
{ + swipeStartX.current = event.clientX; + }} + onPointerUp={(event) => { + if (swipeStartX.current === null) return; + + const deltaX = event.clientX - swipeStartX.current; + swipeStartX.current = null; + + if (Math.abs(deltaX) < 64) return; + if (deltaX < 0) nextSlide(); + else prevSlide(); + }} + > +
+
+ +
+
{currentSlide + 1} / {totalSlides}
+ {notes && ( + + )} + -
- {/* Slides Container */} -
- {children.map((child, index) => { - // Calculate the relative position (-1 is left, 0 is active, 1 is right) +
+ {slides.map((child, index) => { const offset = index - currentSlide; - - let translateX = "translate-x-full"; - if (offset === 0) translateX = "translate-x-0"; - else if (offset < 0) translateX = "-translate-x-full"; + const translateX = offset === 0 ? "translate-x-0" : offset < 0 ? "-translate-x-full" : "translate-x-full"; return ( -
-
- {child} -
-
+
{child}
+ ); })}
- {/* Bottom Navigation */} -
+
- - {/* Progress Dots */} -
- {Array.from({ length: totalSlides }).map((_, i) => ( + +
+ {slides.map((_, index) => (
@@ -114,16 +188,22 @@ export function SlideDeck({ children }: SlideDeckProps) { size="icon" onClick={nextSlide} disabled={currentSlide === totalSlides - 1} - className="rounded-full w-12 h-12 bg-background/50 backdrop-blur-sm hover:bg-background/80" + className="h-11 w-11 rounded-full bg-background/70 shadow-sm backdrop-blur hover:bg-background/90" > - - Next + + Sonraki
- {/* Progress Bar */} -
-
+
Konuşmacı notu
+

{currentNote || "Bu slayt için not yok."}

+
+ )} + +
+
@@ -132,10 +212,14 @@ export function SlideDeck({ children }: SlideDeckProps) { ); } -// Helper components for slide content export function SlideTitle({ children, className }: { children: ReactNode; className?: string }) { return ( -

+

{children}

); @@ -143,16 +227,12 @@ export function SlideTitle({ children, className }: { children: ReactNode; class export function SlideContent({ children, className }: { children: ReactNode; className?: string }) { return ( -
+
{children}
); } export function SlideHighlight({ children, className }: { children: ReactNode; className?: string }) { - return ( - - {children} - - ); + return {children}; }