Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>The AI-Powered Developer — Strategic Prompting, Agentic Workflows & Tooling</title> | |
| <meta name="description" content="Practical approaches, templates, and decisions for frontend delivery using AI."> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" | |
| rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="presentation-container"> | |
| <!-- Progress Bar --> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill"></div> | |
| </div> | |
| <!-- Slide Counter --> | |
| <div class="slide-counter"> | |
| <span id="currentSlide">1</span> / <span id="totalSlides">13</span> | |
| </div> | |
| <!-- Navigation Controls --> | |
| <div class="nav-controls"> | |
| <button class="nav-btn" id="prevBtn" aria-label="Previous Slide"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <polyline points="15 18 9 12 15 6"></polyline> | |
| </svg> | |
| </button> | |
| <button class="nav-btn" id="nextBtn" aria-label="Next Slide"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <polyline points="9 18 15 12 9 6"></polyline> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- Slides Container --> | |
| <div class="slides-wrapper" id="slidesWrapper"> | |
| <!-- ==================== SLIDE 1: Title ==================== --> | |
| <section class="slide active" data-slide="1"> | |
| <div class="slide-content title-slide"> | |
| <div class="title-badge">AI-Powered Development</div> | |
| <h1 class="main-title"> | |
| <span class="gradient-text">The AI-Powered Developer</span> | |
| </h1> | |
| <p class="subtitle">Strategic Prompting, Agentic Workflows & Tooling</p> | |
| <p class="tagline">Practical approaches, templates, and decisions for frontend delivery</p> | |
| <div class="logo-row"> | |
| <!-- LLM Icons --> | |
| <div class="logo-wrapper light-bg"><img src="../icon_assets/OpenAI Symbol SVG.svg" alt="OpenAI" | |
| class="logo-icon" title="OpenAI / ChatGPT"></div> | |
| <div class="logo-wrapper light-bg"><img src="../icon_assets/Google_Gemini_icon_2025.svg" | |
| alt="Gemini" class="logo-icon" title="Google Gemini"></div> | |
| <div class="logo-wrapper light-bg"><img src="../icon_assets/Anthropic Symbol SVG.svg" | |
| alt="Claude" class="logo-icon" title="Claude"></div> | |
| <div class="logo-wrapper light-bg"><img src="../icon_assets/X Symbol SVG.svg" alt="Grok" | |
| class="logo-icon" title="Grok"></div> | |
| <div class="logo-wrapper light-bg"><img src="../icon_assets/mistral-color.svg" alt="Mistral" | |
| class="logo-icon" title="Mistral"></div> | |
| <div class="logo-wrapper light-bg"><img src="../icon_assets/kimi.svg" alt="Kimi" | |
| class="logo-icon" title="Kimi K2"></div> | |
| <div class="logo-wrapper light-bg"><img src="../icon_assets/meta-color.svg" alt="Meta" | |
| class="logo-icon" title="Meta Llama"></div> | |
| <div class="logo-wrapper light-bg"><img src="../icon_assets/deepseek-color.svg" alt="Deepseek" | |
| class="logo-icon" title="DeepSeek"></div> | |
| <!-- <!-- Editor Icons --> | |
| <!-- <div class="logo-wrapper"><img src="../icon_assets/Vscode.svg" alt="VS Code" class="logo-icon" | |
| title="VS Code"></div> | |
| <div class="logo-wrapper light-bg"><img src="../icon_assets/cursor.svg" alt="Cursor" | |
| class="logo-icon" title="Cursor"></div> | |
| <div class="logo-wrapper"><img src="../icon_assets/antigravity.png" alt="Antigravity" | |
| class="logo-icon" title="Antigravity"></div> --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ==================== SLIDE 2: Agenda ==================== --> | |
| <section class="slide" data-slide="2"> | |
| <div class="slide-content"> | |
| <h2 class="slide-title">Agenda</h2> | |
| <p class="slide-subtitle">What we'll cover today</p> | |
| <div class="agenda-list"> | |
| <div class="agenda-item" style="--delay: 0.1s"> | |
| <span class="agenda-number">01</span> | |
| <span class="agenda-text">Interactive: How would you approach a task?</span> | |
| </div> | |
| <div class="agenda-item" style="--delay: 0.2s"> | |
| <span class="agenda-number">02</span> | |
| <span class="agenda-text">Prompt template families & provider resources</span> | |
| </div> | |
| <div class="agenda-item" style="--delay: 0.3s"> | |
| <span class="agenda-number">03</span> | |
| <span class="agenda-text">LLM platforms & interactive leaderboard poll</span> | |
| </div> | |
| <div class="agenda-item" style="--delay: 0.4s"> | |
| <span class="agenda-number">04</span> | |
| <span class="agenda-text">Modes, MCP & Connectors overview</span> | |
| </div> | |
| <div class="agenda-item" style="--delay: 0.5s"> | |
| <span class="agenda-number">05</span> | |
| <span class="agenda-text">LLM versions & benchmarks with SWE-Bench</span> | |
| </div> | |
| <div class="agenda-item" style="--delay: 0.6s"> | |
| <span class="agenda-number">06</span> | |
| <span class="agenda-text">AI code editors poll & my pick</span> | |
| </div> | |
| <div class="agenda-item" style="--delay: 0.7s"> | |
| <span class="agenda-number">07</span> | |
| <span class="agenda-text">Risks, precautions & closing thoughts</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ==================== SLIDE 3: Interactive Opener ==================== --> | |
| <section class="slide" data-slide="3"> | |
| <div class="slide-content"> | |
| <div class="interactive-badge">🎯 Interactive Discussion</div> | |
| <h2 class="slide-title">How would <em>you</em> approach these challenges?</h2> | |
| <div class="scenarios-container"> | |
| <h3 class="section-header">Common Developer Scenarios</h3> | |
| <div class="scenario-tags"> | |
| <span class="scenario-tag">🔬 R&D / Research</span> | |
| <span class="scenario-tag">⚡ Rapid Prototyping</span> | |
| <span class="scenario-tag">🔗 API Integration</span> | |
| <span class="scenario-tag">🚀 MVP Generation</span> | |
| <span class="scenario-tag">🧪 Testing & QA</span> | |
| </div> | |
| </div> | |
| <div class="approaches-grid"> | |
| <div class="approach-card open-discussion" data-option="A"> | |
| <span class="approach-letter">A</span> | |
| <h3>Design First</h3> | |
| <p>Create mock → hand off to dev</p> | |
| <div class="approach-details"> | |
| <strong>Best for:</strong> Complex UX, team collaboration<br> | |
| <strong>Challenge:</strong> Slow iteration, design-dev gap | |
| </div> | |
| </div> | |
| <div class="approach-card open-discussion" data-option="B"> | |
| <span class="approach-letter">B</span> | |
| <h3>Code First</h3> | |
| <p>Prototype directly in code</p> | |
| <div class="approach-details"> | |
| <strong>Best for:</strong> Fast feedback, developer-led<br> | |
| <strong>Challenge:</strong> Technical debt, missing design | |
| </div> | |
| </div> | |
| <div class="approach-card open-discussion" data-option="C"> | |
| <span class="approach-letter">C</span> | |
| <h3>AI-Assisted</h3> | |
| <p>Prompt LLM to generate component + tests</p> | |
| <div class="approach-details"> | |
| <strong>Best for:</strong> Speed, boilerplate, exploration<br> | |
| <strong>Challenge:</strong> Hallucinations, review overhead | |
| </div> | |
| </div> | |
| </div> | |
| <p class="discussion-prompt">💬 Let's discuss: Which approach fits your current project? What | |
| challenges do you face with each?</p> | |
| </div> | |
| </section> | |
| <!-- ==================== SLIDE 4: Prompt Template Families ==================== --> | |
| <section class="slide" data-slide="4"> | |
| <div class="slide-content"> | |
| <h2 class="slide-title">Prompt Template Families</h2> | |
| <p class="slide-subtitle">Common patterns across all providers</p> | |
| <div class="templates-grid"> | |
| <div class="template-card"> | |
| <span class="template-icon">📋</span> | |
| <h3>System + User</h3> | |
| <p>Separate role/context from user input</p> | |
| </div> | |
| <div class="template-card"> | |
| <span class="template-icon">🎯</span> | |
| <h3>Zero-Shot</h3> | |
| <p>Single clear instruction</p> | |
| </div> | |
| <div class="template-card"> | |
| <span class="template-icon">📚</span> | |
| <h3>Few-Shot</h3> | |
| <p>Include input→output examples</p> | |
| </div> | |
| <div class="template-card"> | |
| <span class="template-icon">🧠</span> | |
| <h3>Chain-of-Thought</h3> | |
| <p>Step-by-step reasoning</p> | |
| </div> | |
| <div class="template-card"> | |
| <span class="template-icon">📦</span> | |
| <h3>JSON Schema</h3> | |
| <p>Structured output templates</p> | |
| </div> | |
| <div class="template-card"> | |
| <span class="template-icon">🔧</span> | |
| <h3>Tool/Agent</h3> | |
| <p>External API call scaffolds</p> | |
| </div> | |
| </div> | |
| <div class="provider-links"> | |
| <h3>📖 Provider Documentation</h3> | |
| <div class="links-grid"> | |
| <a href="https://platform.openai.com/docs/guides/prompt-engineering" target="_blank" | |
| class="provider-link"> | |
| <img src="../icon_assets/OpenAI Symbol SVG.svg" alt="OpenAI" | |
| class="link-icon light-bg-inline"> | |
| <span>OpenAI Guide</span> | |
| </a> | |
| <a href="https://platform.claude.com/docs/en/build-with-claude/prompt-engineering/prompt-templates-and-variables" | |
| target="_blank" class="provider-link"> | |
| <img src="../icon_assets/Anthropic Symbol SVG.svg" alt="Anthropic" | |
| class="link-icon light-bg-inline"> | |
| <span>Claude Templates</span> | |
| </a> | |
| <a href="https://docs.cloud.google.com/vertex-ai/generative-ai/docs/learn/prompts/prompt-templates" | |
| target="_blank" class="provider-link"> | |
| <img src="../icon_assets/Google_Gemini_icon_2025.svg" alt="Google" class="link-icon"> | |
| <span>Vertex AI</span> | |
| </a> | |
| <a href="https://docs.mistral.ai/capabilities/completion/prompting_capabilities" | |
| target="_blank" class="provider-link"> | |
| <span class="link-icon text-icon">M</span> | |
| <span>Mistral Docs</span> | |
| </a> | |
| <a href="https://huggingface.co/collections/MoritzLaurer/prompt-templates" target="_blank" | |
| class="provider-link"> | |
| <span class="link-icon text-icon">🤗</span> | |
| <span>HuggingFace</span> | |
| </a> | |
| <a href="https://www.pinecone.io/learn/series/langchain/langchain-prompt-templates/" | |
| target="_blank" class="provider-link"> | |
| <span class="link-icon text-icon">🔗</span> | |
| <span>LangChain</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ==================== SLIDE 5: LLM Platforms + Interactive Poll ==================== --> | |
| <section class="slide" data-slide="5"> | |
| <div class="slide-content"> | |
| <h2 class="slide-title">LLM Platforms & Your Preference</h2> | |
| <p class="slide-subtitle">Click to vote for your preferred LLM!</p> | |
| <div class="llm-platforms-grid compact"> | |
| <div class="llm-card voting-card" data-llm="anthropic"> | |
| <div class="llm-header"> | |
| <div class="logo-wrapper light-bg"><img src="../icon_assets/Anthropic Symbol SVG.svg" | |
| alt="Anthropic" class="llm-icon"></div> | |
| <h3>Claude (Anthropic)</h3> | |
| </div> | |
| <p>Best agentic reasoning</p> | |
| <div class="vote-bar"> | |
| <div class="vote-fill" data-votes="0"></div> | |
| </div> | |
| <span class="vote-count">0 votes</span> | |
| </div> | |
| <div class="llm-card voting-card" data-llm="openai"> | |
| <div class="llm-header"> | |
| <div class="logo-wrapper light-bg"><img src="../icon_assets/OpenAI Symbol SVG.svg" | |
| alt="OpenAI" class="llm-icon"></div> | |
| <h3>GPT (OpenAI)</h3> | |
| </div> | |
| <p>Reliable, wide ecosystem</p> | |
| <div class="vote-bar"> | |
| <div class="vote-fill" data-votes="0"></div> | |
| </div> | |
| <span class="vote-count">0 votes</span> | |
| </div> | |
| <div class="llm-card voting-card" data-llm="gemini"> | |
| <div class="llm-header"> | |
| <div class="logo-wrapper"><img src="../icon_assets/Google_Gemini_icon_2025.svg" | |
| alt="Gemini" class="llm-icon"></div> | |
| <h3>Gemini (Google)</h3> | |
| </div> | |
| <p>All-around champion</p> | |
| <div class="vote-bar"> | |
| <div class="vote-fill" data-votes="0"></div> | |
| </div> | |
| <span class="vote-count">0 votes</span> | |
| </div> | |
| <div class="llm-card voting-card" data-llm="grok"> | |
| <div class="llm-header"> | |
| <div class="logo-wrapper light-bg"><img src="../icon_assets/X Symbol SVG.svg" alt="Grok" | |
| class="llm-icon"></div> | |
| <h3>Grok (xAI)</h3> | |
| </div> | |
| <p>Strong reasoning</p> | |
| <div class="vote-bar"> | |
| <div class="vote-fill" data-votes="0"></div> | |
| </div> | |
| <span class="vote-count">0 votes</span> | |
| </div> | |
| <div class="llm-card voting-card" data-llm="mistral"> | |
| <div class="llm-header"> | |
| <div class="logo-wrapper"><img src="../icon_assets/mistral-color.svg" alt="Mistral" | |
| class="llm-icon"></div> | |
| <h3>Mistral</h3> | |
| </div> | |
| <p>Large context, efficient</p> | |
| <div class="vote-bar"> | |
| <div class="vote-fill" data-votes="0"></div> | |
| </div> | |
| <span class="vote-count">0 votes</span> | |
| </div> | |
| <div class="llm-card voting-card" data-llm="kimi"> | |
| <div class="llm-header"> | |
| <div class="logo-wrapper"><img src="../icon_assets/kimi.svg" alt="Kimi" | |
| class="llm-icon"></div> | |
| <h3>Kimi K2</h3> | |
| </div> | |
| <p>99.1% non-agentic coding</p> | |
| <div class="vote-bar"> | |
| <div class="vote-fill" data-votes="0"></div> | |
| </div> | |
| <span class="vote-count">0 votes</span> | |
| </div> | |
| <div class="llm-card voting-card" data-llm="deepseek"> | |
| <div class="llm-header"> | |
| <div class="logo-wrapper"><img src="../icon_assets/deepseek-color.svg" alt="Kimi" | |
| class="llm-icon"></div> | |
| <h3>DeepSeek V3</h3> | |
| </div> | |
| <p>Open-source, popular</p> | |
| <div class="vote-bar"> | |
| <div class="vote-fill" data-votes="0"></div> | |
| </div> | |
| <span class="vote-count">0 votes</span> | |
| </div> | |
| <div class="llm-card voting-card" data-llm="other"> | |
| <div class="llm-header"> | |
| <div class="logo-wrapper"><span class="text-logo">+</span></div> | |
| <h3>Other / Local</h3> | |
| </div> | |
| <p>Ollama, Llama, custom</p> | |
| <div class="vote-bar"> | |
| <div class="vote-fill" data-votes="0"></div> | |
| </div> | |
| <span class="vote-count">0 votes</span> | |
| </div> | |
| </div> | |
| <div class="leaderboard-link"> | |
| <a href="https://lmarena.ai/leaderboard" target="_blank" class="arena-link"> | |
| 🏆 View Live LLM Arena Leaderboard → | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ==================== SLIDE 6: Modes, MCP & Connectors ==================== --> | |
| <section class="slide" data-slide="6"> | |
| <div class="slide-content"> | |
| <h2 class="slide-title">Modes, MCP & Connectors</h2> | |
| <p class="slide-subtitle">Enable these for maximum productivity</p> | |
| <div class="modes-extended-grid"> | |
| <div class="mode-extended-card"> | |
| <div class="mode-icon-wrapper">🔍</div> | |
| <h3>Research Mode</h3> | |
| <p>Gather references, docs, constraints</p> | |
| <div class="mode-tasks"> | |
| <span class="task-tag">📄 Documentation search</span> | |
| <span class="task-tag">🔗 API discovery</span> | |
| <span class="task-tag">📚 Best practices</span> | |
| </div> | |
| </div> | |
| <div class="mode-extended-card"> | |
| <div class="mode-icon-wrapper">🎨</div> | |
| <h3>Canvas Mode</h3> | |
| <p>Create visual/interactive mockups</p> | |
| <div class="mode-tasks"> | |
| <span class="task-tag">🖼️ UI/UX design</span> | |
| <span class="task-tag">📊 Diagrams</span> | |
| <span class="task-tag">🎯 Wireframes</span> | |
| </div> | |
| <a href="https://huggingface.co/spaces/parthwebashlar/UI-Web" target="_blank" | |
| class="expert-talk-link"> | |
| <span class="expert-icon">🎓</span> Experts Talk → | |
| </a> | |
| </div> | |
| <div class="mode-extended-card"> | |
| <div class="mode-icon-wrapper">🧠</div> | |
| <h3>Thinking Mode</h3> | |
| <p>Let model plan (CoT) before coding</p> | |
| <div class="mode-tasks"> | |
| <span class="task-tag">🔄 Complex logic</span> | |
| <span class="task-tag">🧩 Problem decomposition</span> | |
| <span class="task-tag">📋 Planning</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mcp-section"> | |
| <h3 class="section-header">🔌 MCP (Model Context Protocol) & Connectors</h3> | |
| <div class="mcp-grid"> | |
| <div class="mcp-card"> | |
| <h4>What is MCP?</h4> | |
| <p>Standard protocol for AI models to connect with external tools, databases, and APIs | |
| </p> | |
| </div> | |
| <div class="mcp-card"> | |
| <h4>Connectors Enable</h4> | |
| <ul> | |
| <li>🗄️ Database access (read-only recommended!)</li> | |
| <li>🌐 Web browsing & scraping</li> | |
| <li>📁 File system operations</li> | |
| <li>🔧 Custom tool integration</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ==================== SLIDE 7: LLM Versions & Benchmarks ==================== --> | |
| <section class="slide" data-slide="7"> | |
| <div class="slide-content"> | |
| <h2 class="slide-title">LLM Benchmark Comparison (2025)</h2> | |
| <p class="slide-subtitle">SWE-Bench Agentic Scores & Recommended Use Cases</p> | |
| <div class="benchmarks-section"> | |
| <div class="benchmark-table-container"> | |
| <table class="benchmark-table compact-table"> | |
| <thead> | |
| <tr> | |
| <th>Model</th> | |
| <th>Key Strength</th> | |
| <th>Score</th> | |
| <th>Best For</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td> | |
| <div class="model-cell"> | |
| <div class="logo-wrapper-small light-bg"><img | |
| src="../icon_assets/Anthropic Symbol SVG.svg" alt="Anthropic" | |
| class="table-icon"></div> | |
| <strong>Claude Sonnet 4.5</strong> | |
| </div> | |
| </td> | |
| <td>Best for real-world agents, 30hr+ autonomous tasks</td> | |
| <td class="score-cell"><span class="score-badge high">82%</span></td> | |
| <td>Autonomous bug resolution, agent orchestration</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <div class="model-cell"> | |
| <div class="logo-wrapper-small light-bg"><img | |
| src="../icon_assets/Anthropic Symbol SVG.svg" alt="Anthropic" | |
| class="table-icon"></div> | |
| <strong>Claude Opus 4.5</strong> | |
| </div> | |
| </td> | |
| <td>Complex reasoning, 200K context</td> | |
| <td class="score-cell"><span class="score-badge high">80.9%</span></td> | |
| <td>Architectural planning, deep code review</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <div class="model-cell"> | |
| <div class="logo-wrapper-small light-bg"><img | |
| src="../icon_assets/OpenAI Symbol SVG.svg" alt="OpenAI" | |
| class="table-icon"></div> | |
| <strong>GPT 5.1</strong> | |
| </div> | |
| </td> | |
| <td>Reliable code gen, wide ecosystem</td> | |
| <td class="score-cell"><span class="score-badge medium">76.3%</span></td> | |
| <td>API gen, high-volume code completion</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <div class="model-cell"> | |
| <div class="logo-wrapper-small"><img | |
| src="../icon_assets/Google_Gemini_icon_2025.svg" alt="Gemini" | |
| class="table-icon"></div> | |
| <strong>Gemini 3 Pro</strong> | |
| </div> | |
| </td> | |
| <td>Highest overall, Z-Score 1.38</td> | |
| <td class="score-cell"><span class="score-badge medium">76.2%</span></td> | |
| <td>General dev, multimodal apps</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <div class="model-cell"> | |
| <div class="logo-wrapper-small light-bg"><img | |
| src="../icon_assets/X Symbol SVG.svg" alt="Grok" | |
| class="table-icon"></div> | |
| <strong>Grok 4</strong> | |
| </div> | |
| </td> | |
| <td>Strong reasoning, complex problem-solving</td> | |
| <td class="score-cell"><span class="score-badge medium">75%</span></td> | |
| <td>Code planning, robustness-critical tasks</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <div class="model-cell"> | |
| <div class="logo-wrapper-small"><img | |
| src="../icon_assets/Google_Gemini_icon_2025.svg" alt="Gemini" | |
| class="table-icon"></div> | |
| <strong>Gemini 2.5 Pro</strong> | |
| </div> | |
| </td> | |
| <td>All-around champion, highest Z-score</td> | |
| <td class="score-cell"><span class="score-badge">Z: 1.38</span></td> | |
| <td>Reliable general-purpose dev</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <div class="model-cell"> | |
| <div class="logo-wrapper-small"><img src="../icon_assets/kimi.svg" | |
| alt="Kimi" class="table-icon"></div> | |
| <strong>Kimi K2 Thinking</strong> | |
| </div> | |
| </td> | |
| <td>Non-agentic coding expert</td> | |
| <td class="score-cell"><span class="score-badge high">99.1%*</span></td> | |
| <td>Specialized non-agentic tasks</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <div class="model-cell"> | |
| <div class="logo-wrapper-small"><img | |
| src="../icon_assets/mistral-color.svg" alt="Mistral" | |
| class="table-icon"></div> | |
| <strong>Mistral Large 3</strong> | |
| </div> | |
| </td> | |
| <td>Top-tier reasoning, 32K context</td> | |
| <td class="score-cell"><span class="score-badge">Top-Tier</span></td> | |
| <td>Multilingual, function calling</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <div class="model-cell"> | |
| <div class="logo-wrapper-small light-bg"><img | |
| src="../icon_assets/Anthropic Symbol SVG.svg" alt="Anthropic" | |
| class="table-icon"></div> | |
| <strong>Claude 3.5 Sonnet</strong> | |
| </div> | |
| </td> | |
| <td>Versatile, speed + cost optimized</td> | |
| <td class="score-cell"><span class="score-badge">High</span></td> | |
| <td>Enterprise, cost-optimized agents</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <div class="model-cell"> | |
| <div class="logo-wrapper-small"><img | |
| src="../icon_assets/deepseek-color.svg" alt="DeepSeek" | |
| class="table-icon"></div> | |
| <strong>DeepSeek V3</strong> | |
| </div> | |
| </td> | |
| <td>Open-source, popular foundation</td> | |
| <td class="score-cell"><span class="score-badge">N/A</span></td> | |
| <td>Code gen, fine-tuning</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <p class="table-note">* Non-agentic benchmark score</p> | |
| </div> | |
| <div class="kpi-links"> | |
| <h3>📊 Key Benchmarks & Leaderboards</h3> | |
| <div class="kpi-grid"> | |
| <a href="https://www.swebench.com/" target="_blank" class="kpi-link"> | |
| <span class="kpi-icon">🎯</span> | |
| <span>SWE-Bench</span> | |
| <small>Agentic coding</small> | |
| </a> | |
| <a href="https://lmarena.ai/leaderboard" target="_blank" class="kpi-link"> | |
| <span class="kpi-icon">🏆</span> | |
| <span>LLM Arena</span> | |
| <small>Community</small> | |
| </a> | |
| <a href="https://www.vellum.ai/llm-leaderboard" target="_blank" class="kpi-link"> | |
| <span class="kpi-icon">📈</span> | |
| <span>Vellum AI</span> | |
| <small>Full comparison</small> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ==================== SLIDE 8: AI Code Editors Poll ==================== --> | |
| <section class="slide" data-slide="8"> | |
| <div class="slide-content"> | |
| <div class="interactive-badge">🗳️ Interactive Poll</div> | |
| <h2 class="slide-title">Which AI code editor do you use?</h2> | |
| <p class="slide-subtitle">Click to vote! Multiple votes allowed.</p> | |
| <div class="editors-poll-grid"> | |
| <div class="editor-poll-card voting-editor" data-editor="vscode"> | |
| <div class="logo-wrapper"><img src="../icon_assets/Vscode.svg" alt="VS Code" | |
| class="editor-poll-icon"></div> | |
| <span class="editor-name">VS Code + Copilot</span> | |
| <div class="vote-bar"> | |
| <div class="vote-fill" data-votes="0"></div> | |
| </div> | |
| <span class="vote-count">0 votes</span> | |
| </div> | |
| <div class="editor-poll-card voting-editor" data-editor="cursor"> | |
| <div class="logo-wrapper light-bg"><img src="../icon_assets/cursor.svg" alt="Cursor" | |
| class="editor-poll-icon"></div> | |
| <span class="editor-name">Cursor</span> | |
| <div class="vote-bar"> | |
| <div class="vote-fill" data-votes="0"></div> | |
| </div> | |
| <span class="vote-count">0 votes</span> | |
| </div> | |
| <div class="editor-poll-card voting-editor" data-editor="antigravity"> | |
| <div class="logo-wrapper"><img src="../icon_assets/antigravity.png" alt="Antigravity" | |
| class="editor-poll-icon"></div> | |
| <span class="editor-name">Antigravity</span> | |
| <div class="vote-bar"> | |
| <div class="vote-fill" data-votes="0"></div> | |
| </div> | |
| <span class="vote-count">0 votes</span> | |
| </div> | |
| <div class="editor-poll-card voting-editor" data-editor="windsurf"> | |
| <div class="logo-wrapper"><img src="../icon_assets/Windsurf Icon.png" alt="Windsurf" | |
| class="editor-poll-icon"></div> | |
| <span class="editor-name">Windsurf</span> | |
| <div class="vote-bar"> | |
| <div class="vote-fill" data-votes="0"></div> | |
| </div> | |
| <span class="vote-count">0 votes</span> | |
| </div> | |
| <div class="editor-poll-card voting-editor" data-editor="kiro"> | |
| <div class="logo-wrapper"><img src="../icon_assets/kiro.svg" alt="Kiro" | |
| class="editor-poll-icon"></div> | |
| <span class="editor-name">Kiro (AWS)</span> | |
| <div class="vote-bar"> | |
| <div class="vote-fill" data-votes="0"></div> | |
| </div> | |
| <span class="vote-count">0 votes</span> | |
| </div> | |
| <div class="editor-poll-card voting-editor" data-editor="qoder"> | |
| <div class="logo-wrapper"><img src="../icon_assets/qoder.svg" alt="Qoder" | |
| class="editor-poll-icon"></div> | |
| <span class="editor-name">Qoder</span> | |
| <div class="vote-bar"> | |
| <div class="vote-fill" data-votes="0"></div> | |
| </div> | |
| <span class="vote-count">0 votes</span> | |
| </div> | |
| </div> | |
| <!-- Editor Comparison Table --> | |
| <div class="editor-comparison"> | |
| <h3 class="section-header">📊 Free Tier Comparison</h3> | |
| <div class="editor-table-container"> | |
| <table class="editor-table"> | |
| <thead> | |
| <tr> | |
| <th>Editor</th> | |
| <th>Free Tier Type</th> | |
| <th>Models Available</th> | |
| <th>Limitation</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><strong>VS Code + Copilot</strong></td> | |
| <td>Quota-based</td> | |
| <td>GPT-4.1, GPT-4o mini, Claude 3.5</td> | |
| <td>Monthly chat cap</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Cursor</strong></td> | |
| <td>Quota + promo</td> | |
| <td>DeepSeek v3, GPT-4o mini, Grok 3</td> | |
| <td>Daily/monthly limits</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Antigravity</strong></td> | |
| <td>Preview freemium</td> | |
| <td>Gemini 3 Pro, Claude 3.5, GPT-OSS</td> | |
| <td>Preview may end</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Windsurf</strong></td> | |
| <td>Hybrid freemium</td> | |
| <td>SWE-1 Lite, Claude/Gemini credits</td> | |
| <td>Credit exhaustion</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Kiro (AWS)</strong></td> | |
| <td>Credit-based</td> | |
| <td>Sonnet 4.0/4.5, Haiku, Opus 4.5</td> | |
| <td>Credit depletion</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Qoder</strong></td> | |
| <td>Public preview</td> | |
| <td>Alibaba Qwen3-Coder</td> | |
| <td>Preview closure</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ==================== SLIDE 9: My Pick - Antigravity ==================== --> | |
| <section class="slide" data-slide="9"> | |
| <div class="slide-content"> | |
| <h2 class="slide-title">My Pick</h2> | |
| <p class="slide-subtitle">The IDE I use for agentic development</p> | |
| <div class="my-pick-container"> | |
| <div class="pick-card featured"> | |
| <div class="pick-header"> | |
| <img src="../icon_assets/antigravity.png" alt="Antigravity" class="pick-main-icon"> | |
| <div> | |
| <h3>Antigravity</h3> | |
| <span class="pick-tagline">AI-First Agentic IDE</span> | |
| </div> | |
| </div> | |
| <div class="pick-features"> | |
| <div class="feature-item"> | |
| <span class="feature-icon">🤖</span> | |
| <span>Built-in agent manager for complex tasks</span> | |
| </div> | |
| <div class="feature-item"> | |
| <span class="feature-icon">🧪</span> | |
| <span>Integrated testing & browser automation</span> | |
| </div> | |
| <div class="feature-item"> | |
| <span class="feature-icon">🔄</span> | |
| <span>Multi-model support (switch providers)</span> | |
| </div> | |
| <div class="feature-item"> | |
| <span class="feature-icon">📁</span> | |
| <span>VS Code based — familiar environment</span> | |
| </div> | |
| <div class="feature-item"> | |
| <span class="feature-icon">💰</span> | |
| <span>Freemium model — try before you commit</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ==================== SLIDE 10: Demo Time ==================== --> | |
| <section class="slide" data-slide="10"> | |
| <div class="slide-content demo-slide"> | |
| <div class="demo-badge">🎬 LIVE DEMO</div> | |
| <h2 class="demo-title gradient-text">Demo Time</h2> | |
| <p class="demo-subtitle">Let me show you what AI-assisted development looks like in practice</p> | |
| <div class="demo-placeholder"> | |
| <div class="demo-icon">💻</div> | |
| <p>Application demonstration in progress...</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ==================== SLIDE 11: Risks & Precautions ==================== --> | |
| <section class="slide" data-slide="11"> | |
| <div class="slide-content"> | |
| <div class="warning-badge">⚠️ Critical Awareness</div> | |
| <h2 class="slide-title">Real AI Editor Incidents</h2> | |
| <p class="slide-subtitle">Why precautions matter — these actually happened</p> | |
| <div class="incidents-grid"> | |
| <div class="incident-card danger"> | |
| <div class="incident-header"> | |
| <span class="incident-icon">💥</span> | |
| <h3>Entire Drive Deleted</h3> | |
| </div> | |
| <p>AI deleted user's entire D:\ drive instead of a cache folder. Irreversible data loss.</p> | |
| </div> | |
| <div class="incident-card danger"> | |
| <div class="incident-header"> | |
| <span class="incident-icon">🗄️</span> | |
| <h3>Production DB Wiped</h3> | |
| </div> | |
| <p>Replit AI Agent wiped live production codebase & database despite explicit instructions | |
| not to.</p> | |
| </div> | |
| <div class="incident-card warning"> | |
| <div class="incident-header"> | |
| <span class="incident-icon">🔓</span> | |
| <h3>30+ IDE Vulnerabilities</h3> | |
| </div> | |
| <p>"IDESaster" research found critical security flaws in Cursor, Copilot, Windsurf, Zed... | |
| </p> | |
| </div> | |
| <div class="incident-card warning"> | |
| <div class="incident-header"> | |
| <span class="incident-icon">💸</span> | |
| <h3>Costly Outages</h3> | |
| </div> | |
| <p>Untested AI-generated code pushed to production — hundreds of thousands in damages.</p> | |
| </div> | |
| </div> | |
| <div class="takeaway-box"> | |
| <span class="takeaway-icon">🎯</span> | |
| <p><strong>AI editors are no longer just assistants — they are operators.</strong> Without | |
| strict permission boundaries, they cause damage at machine speed.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ==================== SLIDE 12: Safety Precautions ==================== --> | |
| <section class="slide" data-slide="12"> | |
| <div class="slide-content"> | |
| <h2 class="slide-title">Precautions & Best Practices</h2> | |
| <p class="slide-subtitle">Protect yourself and your team</p> | |
| <div class="precautions-grid"> | |
| <div class="precaution-card"> | |
| <span class="precaution-icon">🔒</span> | |
| <h3>Never Give DB Write Access</h3> | |
| <p>Use read-only connections. No direct production access for AI agents.</p> | |
| </div> | |
| <div class="precaution-card"> | |
| <span class="precaution-icon">👁️</span> | |
| <h3>Always Review Output</h3> | |
| <p>Never auto-deploy AI-generated code. Human review is mandatory.</p> | |
| </div> | |
| <div class="precaution-card"> | |
| <span class="precaution-icon">🧪</span> | |
| <h3>Sandbox & Test</h3> | |
| <p>Run AI operations in isolated environments. Test before production.</p> | |
| </div> | |
| <div class="precaution-card"> | |
| <span class="precaution-icon">⚡</span> | |
| <h3>Disable Auto-Run</h3> | |
| <p>Turn off autonomous command execution. Require confirmation for destructive actions.</p> | |
| </div> | |
| <div class="precaution-card"> | |
| <span class="precaution-icon">💾</span> | |
| <h3>Backup Everything</h3> | |
| <p>Regular backups before AI operations. Version control is your friend.</p> | |
| </div> | |
| <div class="precaution-card"> | |
| <span class="precaution-icon">📋</span> | |
| <h3>Scope Limitations</h3> | |
| <p>Define clear boundaries. Limit file system and network access.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ==================== SLIDE 13: Thank You & Closing ==================== --> | |
| <section class="slide" data-slide="13"> | |
| <div class="slide-content closing-slide"> | |
| <h2 class="closing-title gradient-text">Thank You!</h2> | |
| <div class="closing-message"> | |
| <div class="closing-card"> | |
| <span class="closing-icon">🧠</span> | |
| <h3>Don't Make It a Habit</h3> | |
| <p>AI is a powerful tool, but don't let it replace your thinking. Always brainstorm the | |
| logical flow yourself first.</p> | |
| </div> | |
| <div class="closing-card"> | |
| <span class="closing-icon">🔄</span> | |
| <h3>Stay Critical</h3> | |
| <p>Review, test, and validate. The human in the loop is what keeps everything safe.</p> | |
| </div> | |
| <div class="closing-card"> | |
| <span class="closing-icon">📈</span> | |
| <h3>Keep Learning</h3> | |
| <p>The landscape changes fast. Stay updated on best practices and new risks.</p> | |
| </div> | |
| </div> | |
| <div class="contact-section"> | |
| <p class="questions-text">Questions? Let's discuss!</p> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Keyboard Hints --> | |
| <div class="keyboard-hints"> | |
| <span>← → or Space to navigate</span> | |
| </div> | |
| </div> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |