Vibe Code Your Way to Working Apps — Just Describe, Gemini Builds
Vibe coding is the new paradigm: describe what you want in natural language, and AI builds it. These 12 prompts are optimized for Gemini Canvas, producing complete, polished, interactive applications from a single prompt. No coding knowledge needed — just vibes.
What's Inside (12 Vibe Coding Prompts)
- Weather App with Live Data — Builds a weather app with city search, current conditions, 5-day forecast, animated weather icons, and temperature unit toggle. Clean glassmorphism UI with gradient backgrounds.
- Todo App with Local Storage — Full task manager with categories, priorities, due dates, drag-and-drop reordering, completion animations, and persistent local storage. Dark/light mode toggle.
- Calculator with Scientific Mode — Standard and scientific calculator with keyboard support, calculation history, parentheses handling, trigonometric functions, and a beautiful skeuomorphic or flat design.
- Timer/Stopwatch with Laps — Precision stopwatch with lap recording, countdown timer with presets, alarm sound, and a sleek race-inspired or minimalist interface with lap comparison stats.
- Color Palette Generator with Copy — Generate harmonious color palettes (complementary, analogous, triadic). Click-to-copy hex/RGB/HSL values, palette locking, and export as CSS variables or Tailwind config.
- Markdown Editor with Preview — Split-pane markdown editor with real-time preview, syntax highlighting, toolbar for common formatting, word count, and export to HTML. Supports tables, code blocks, and images.
- Flashcard Study App — Create decks, add cards with front/back, study with spaced repetition algorithm, track mastery per card, and review statistics. Flip animation and keyboard shortcuts.
- Password Generator with Strength Meter — Generate passwords with customizable length, character types, and pronounceability. Visual strength meter, entropy calculation, breach database check, and one-click copy.
- URL Shortener Interface — Clean URL shortener with custom alias support, QR code generation, click tracking dashboard, and bulk shortening. (Frontend with simulated backend for demo.)
- JSON Formatter/Validator — Paste JSON, get formatted output with syntax highlighting, collapsible tree view, path navigator, error highlighting with line numbers, and minify/prettify toggle.
- Unit Converter All-in-One — Convert between units across 10+ categories: length, weight, temperature, volume, speed, data, time, energy, pressure, and area. With favorites and recent conversions.
- BMI & Health Calculator — Calculate BMI, BMR, TDEE, ideal weight range, body fat estimate, and daily water intake. Visualizes results with gauge charts and provides personalized health insights.
How to Use
- Open Gemini (gemini.google.com) with Canvas
- Copy any app prompt from the pack
- Paste into Gemini — the app appears in Canvas within seconds
- Use the app immediately — all interactive features work in-browser
- Ask Gemini to customize: "Make it dark mode" or "Add a reset button"
Works With
Gemini with Canvas (gemini.google.com). Also works with Claude Artifacts and ChatGPT Canvas with minor adjustments. Apps are pure HTML/CSS/JavaScript — no dependencies needed.
