A comprehensive presentation exploring the tension between AI-assisted rapid development ("Vibe Coding") and traditional software engineering rigor. This project is an interactive web-based presentation featuring 21 slides covering the 4R Framework for responsible AI coding.
Presented by: Alejandro de la Fuente, Jose David
Duration: 45-60 minutes
Live: https://codigosinsiesta.github.io/ai-presentation/
- Overview
- Key Topics
- The 4R Framework
- Quick Start
- Project Structure
- Technology Stack
- Development
- Presentation Flow
- Design System
- Contributing
- License
This presentation tackles a critical challenge in modern software development: 85% of developers use AI for coding, but only 32% are confident in the quality of AI-generated code.
We explore:
- The hidden costs of AI-assisted development (PR overhead, code churn, security risks)
- A practical framework for responsible AI coding (the 4R Framework)
- Real-world case studies and proven tools
- Best practices for augmented code review and quality assurance
- Vibe Coding Paradox: High adoption, low confidence
- Metrics: +154% PR size, +91% review time, +9% bugs escaped
- Code Churn: +41% churn, 211M LOC copy-pasted (GitClear study)
- Security: 30% of AI-generated code has vulnerabilities
- METR 2025 Study: AI impact on code quality
A structured approach to responsible AI coding:
- Risk - Security assessment & vulnerability detection
- Readability - Code quality standards & complexity metrics
- Reliability - TDD with AI, test coverage, mutation testing
- Resilience - Graceful degradation, circuit breakers, timeouts
- Pre-commit hooks with Husky
- Stack PRs methodology (200-400 LOC limit)
- Human cognitive limits in code review (70% detection at 40-60 min)
- Prompt guardrail structure
- Few-shot learning & Chain-of-Thought prompting
- Augmented reviewers (GitHub Copilot, CodeRabbit, Kudu Merge)
- Real case studies: Amazon Java migration, UK Government modernization
| Framework Element | Focus | Tools & Practices |
|---|---|---|
| Risk | Security & vulnerability assessment | Static analysis, SAST, threat modeling |
| Readability | Code quality & maintainability | Linting, complexity metrics, peer review |
| Reliability | Testing & quality assurance | TDD, mutation testing, test coverage |
| Resilience | System robustness | Circuit breakers, graceful degradation, monitoring |
- Node.js 18.x or higher
- pnpm (recommended) or npm
# Clone the repository
git clone https://github.com/CodigoSinSiesta/ai-presentation.git
cd ai-presentation
# Install dependencies
pnpm install
# Start development server
pnpm run devThe presentation will be available at http://localhost:4321
By default, the last slide (workshop slide) is hidden. To display it for specific events:
-
Development: Add
?showWorkshop=trueto the URL- Example:
http://localhost:4321/?showWorkshop=true
- Example:
-
Production: Add
?showWorkshop=trueto the live URL- Example:
https://codigosinsiesta.github.io/ai-presentation/?showWorkshop=true
- Example:
This allows the workshop slide to be shown only when needed for specific presentations or events.
# Type-check and build
pnpm run build
# Preview production build locally
pnpm run previewai-presentation/
├── src/
│ ├── components/
│ │ ├── slides/ # 21 presentation slides (Astro + Svelte)
│ │ │ ├── Slide01Hero.astro
│ │ │ ├── Slide02Paradox.svelte
│ │ │ ├── Slide03Metrics.svelte
│ │ │ └── ... (18 more slides)
│ │ ├── ui/ # Reusable UI components
│ │ │ ├── Button.astro
│ │ │ └── Card.astro
│ │ └── Navigation.svelte # Custom slide navigation
│ ├── layouts/
│ │ └── PresentationLayout.astro
│ ├── pages/
│ │ └── index.astro # Main entry point
│ ├── styles/
│ │ ├── global.css # Design tokens & global styles
│ │ └── animations.css # Animation definitions
│ ├── utils/
│ │ └── animations.ts # GSAP animation utilities
│ └── env.d.ts # TypeScript definitions
├── package.json
├── astro.config.mjs # Astro configuration
├── tailwind.config.mjs # Tailwind CSS setup
├── tsconfig.json # TypeScript configuration
├── postcss.config.mjs # PostCSS configuration
└── README.md
- Astro 4.x - Static site generation & partial hydration
- Svelte 5.x - Reactive components for interactive slides
- TypeScript - Type safety
- Tailwind CSS 4.x - Utility-first CSS
- GSAP 3.x - Professional animations
- CSS Custom Properties - Design system & theming
- Lucide Svelte - Icon library
- Swiper - Slide navigation patterns (custom implementation)
- PostCSS - CSS transformation
- Astro Check - Type checking
# Development
pnpm run dev # Start dev server at http://localhost:4321
# Production
pnpm run build # Type-check & build for production
pnpm run preview # Preview production build locally
# Utilities
pnpm run astro # Run astro CLI commands
pnpm install # Install/update dependenciesAstro Components (static, CSS animations):
Slide01Hero.astro- IntroductionSlide05Security.astro- Security risksSlide07Framework.astro- 4R Framework introSlide09Readability.astro- Code qualitySlide11Resilience.astro- System patternsSlide13StackPRs.astro- Stack PRs methodologySlide15Guardrails.astro- Prompt guardrailsSlide18Closing.astro- Action planSlide18B.astro- Final thoughts
Svelte Components (interactive, GSAP animations):
Slide02Paradox.svelte- Animated paradox counterSlide03Metrics.svelte- Dynamic metrics visualizationSlide04Churn.svelte- Code churn analysisSlide06METR.svelte- Study resultsSlide08Risk.svelte- Risk assessmentSlide10Reliability.svelte- TDD demonstrationSlide12Limits.svelte- Review capacity indicatorsSlide14Hooks.svelte- Pre-commit hooks demoSlide16Reviewers.svelte- Reviewer tools showcaseSlide17Cases.svelte- Case studies
- Hash-based routing:
#/hero,#/paradox,#/metrics, etc. - Keyboard: Arrow keys to navigate
- Mouse: Prev/Next buttons
- Custom Svelte navigation - Full control over transitions
--color-base-dark: #0A1628 /* Deep navy background */
--color-primary-cobalt: #1E3A8A /* Primary interactive elements */
--color-accent-bright: #3B82F6 /* Call-to-action elements */
--color-electric: #60A5FA /* Highlights & accents */
--color-neutral-light: #FAF9F6 /* Text & light elements */- Display (4-6rem): Space Grotesk 800-900 - Main headings
- Subheaders (2-3rem): Bricolage Grotesque 600-700 - Section titles
- Body (1-1.2rem): IBM Plex Sans 400-500 - Paragraphs & content
- Monospace: JetBrains Mono 500 - Code & statistics
.card-glass- Glassmorphic cards with backdrop blur.btn-primary,.btn-secondary,.btn-ghost- Button variants- Hover states:
scale(1.03)+ shadow lift - All slides: 100vh full viewport height
- GSAP for all JavaScript animations (GPU-accelerated)
- CSS keyframes for simple hover/focus states
- Staggered children animations (0.1s delay)
- Smooth slide transitions with opacity & transform
- 85% of developers use AI, only 32% are confident in quality
- +154% average PR size increase
- +91% code review time increase
- +9% bugs escaped to production
- +41% code churn increase
- 211M LOC copy-pasted from AI sources (GitClear)
- 30% of AI-generated code has vulnerabilities
- 70% bug detection rate at 200-400 LOC per review
- 50% human attention decay after 40-60 min reviews
- Hero Introduction - Topic setup & speakers
- The Paradox - Problem statement & contradiction
- Metrics - Quantified overhead costs
- Code Churn - Quality degradation analysis
- Security Risks - Vulnerability landscape
- METR Study - Academic research insights
- 4R Framework - Introducing the solution
- Risk Assessment - Security in the 4R Framework
- Readability - Code quality standards
- Reliability - Testing & TDD with AI
- Resilience - System design patterns
- Review Limits - Human cognitive boundaries
- Stack PRs - Practical size limits
- Pre-commit Hooks - Automation tools
- Guardrails - Prompt structure & best practices
- Advanced Prompts - Few-shot & Chain-of-Thought
- Augmented Reviewers - Tool ecosystem
- Case Studies - Real-world implementations
- UK Government - Deep dive case study
- Action Plan - Next steps & takeaways
- Closing Thoughts - Final metrics & success criteria
We welcome contributions! Please feel free to:
- Report issues or bugs
- Suggest improvements or new slides
- Contribute code enhancements
- Improve documentation
Guidelines:
- Follow the existing code style and component patterns
- Ensure TypeScript types are correct
- Test animations in multiple browsers
- Keep the monochrome blue color scheme
- Respect the 100vh slide constraint
This project is open source. Please check the LICENSE file for details.
- GitHub Issues: Report bugs or suggest features
- Discussions: Share ideas and ask questions
- Direct Contact: Open an issue with questions
- Live Presentation: https://codigosinsiesta.github.io/ai-presentation/
- GitHub Repository: https://github.com/CodigoSinSiesta/ai-presentation
- Author Website: https://tellmealex.dev
This presentation was created to bridge the gap between the excitement of AI-assisted development and the realities of software engineering rigor. It's designed for:
- Developers learning to leverage AI responsibly
- Tech Leads implementing quality gates
- Engineering Managers making tool decisions
- Architects designing AI-aware systems
Key Takeaway: AI is a powerful tool, but it requires thoughtful integration with existing software engineering practices to deliver reliable, secure, maintainable code.
Made with ❤️ by Código Sin Siesta