Agent-friendly UI (AUI) Gallery
Below are the UI by Gemini3-Pro and their agent-optimized versions.
Artisan Csa — Task
Title: Artisan CSA — Hand-Drawn Farm Landing Prompt: Create a single-page app, in a single HTML file, for a community-supported agriculture program with a hand-drawn, watercolor aesthetic. Visuals: paper texture background, ink-style SVG illustrations, warm serif headings, muted earth-tone palette; gentle parallax on illustrations. Hero: seasonal basket illustration, short pitch, ZIP checker input to confirm delivery area; CTA “Join the harvest.” Share: grid of seasonal boxes (Spring/Summer/Fall/Winter) with rollover tooltips listing typical produce; allergen icons. Plans: slider for weekly vs bi-weekly; price updates in real time; add-ons (eggs, flowers, bread) with toggles. Map: embedded static map image with delivery radius overlay; pickup locations list with distance badges. Testimonials: card carousel with farmer portraits drawn as line art. FAQ + Contact: accordion with smooth open/close; simple email form; accessibility and keyboard support; fully responsive.
Audio Step Sequencer — Task
Create a single-page app in a single HTML file with following requirements: - Name: Audio Step Sequencer - Stack: WebAudio API. - Goal: 16-step drum grid. - Features: Tempo, swing, patterns save/load, export WAV (render simple buffer). - The UI should be futuristic and make the play fun!
Brutalist Dev Landing Page — Task
Title: Brutalist Dev Platform Landing Prompt: Build a single HTML file for a brutalist developer platform landing page. Style: monochrome, oversized type, strict 12-col grid, visible outlines, sharp corners; cursor shows grid coordinates. Hero: stark headline, one-line value prop, two CTAs (“Start free”, “Docs”), background = live terminal demo typing a sample API call. Proof: SVG logo wall + light/dark invert toggle. Features: 3 code-snippet cards with tabs (JS/Python/cURL), copy-to-clipboard + tooltip. Pricing: 3-tier table with sticky header, CTAs open signup modal. Footer: keyboard-navigable site map + social links; only SVGs; responsive & fast.
Camping Gear Checklist — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Camping Gear Checklist - Goal: Track gear for camping trips. - Features: Checklist items, weight calculator, save lists. - The UI should be outdoor-themed.
Cloud Painter — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Cloud Painter - Goal: Paint the sky by drawing clouds with a brush tool; enjoyable for kids. - Features: Multiple brush shapes, animated cloud drift, air planes to fly in the sky, save image. - The UI should be soft and whimsical.
Color Match Challenge — Task
Create a single-page app in a single HTML file for a fast-paced “color match” game. - Show a word (e.g., “RED”) in a random font color — player must click the correct color button (not the word meaning). - Keep score based on correct answers within 30 seconds. - Use large typography, color-coded buttons, and smooth button press animations.
Company Acronym List — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Company Acronym List - Goal: Help users learn and remember internal company acronyms. - Features: Search bar to look up acronyms, list view with definitions, category tags (e.g., teams, projects, processes), and a quiz mode to test knowledge. - The UI should be clean, professional, and easy to navigate, with a responsive layout for both desktop and mobile.
Csv To Charts — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Data Visualization Playground - Goal: Upload CSV and generate charts. - Features: Chart type selector, color customization, save as image. - The UI should be modern with a focus on charts.
Customer Journey Flow — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Customer Journey Flow - Goal: Visualize a customer’s steps from awareness to purchase. - Features: Editable stages, drag-and-drop connections. - The UI should be clean and diagram-like.
Employee Skills Matrix — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Employee Skills Matrix - Goal: Track team skills coverage. - Features: Skill list vs. employee grid, proficiency levels. - The UI should be HR-focused.
Equation Solver Tool — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Equation Solver Tool - Goal: Solve and explain math equations. - Features: Input field, step-by-step breakdown, export results. - The UI should be academic and minimal.
Escape The Maze — Task
Create a single-page app in a single HTML file with following requirements: - Name: Escape the Maze - Goal: Navigate from start to finish in a randomly generated maze. - Features: Arrow key controls, timer, shortest path bonus, replay button. - The UI should be clear with visible maze walls and a movable avatar.
Esports Tournament Landing Page — Task
Title: Esports Tournament Prompt: Create a single-page app, in a single HTML file, for a neon, high-contrast esports tournament landing page. Hero: animated 3D/Canvas backdrop with subtle scanlines; bold headline, date, and CTA buttons (“Register Team”, “Get Tickets”, “Watch Live”). Interactive bracket: 8/16-team bracket with hover states, team logos, and match times; auto-advance demo mode. Schedule section: timezone-aware match list with filters (stage, day) and an “Add to calendar” button (ICS export). Team cards: roster, roles, country flags, recent form; responsive grid with quick compare. Stream preview: embedded placeholder player with “Now/Next” ticker and sponsor carousel. Venue & travel: map image, directions links, hotels list; accessibility and safety notes. Social proof: testimonials, follower counts, and recent highlights carousel. Footer: FAQs, rules PDF link, code of conduct, contact form; sticky “Buy Tickets” CTA on mobile. Performance: lazy-loaded images, prefers-reduced-motion support; clean, modern, fully responsive.
Espresso — Task
Please generate a beautiful, realistic landing page for a service that provides the ultimate coffee enthusiast a $200/month subscription that provides equipment rental and coaching for coffee roasting and creating the ultimate espresso. The target audience is a bay area middle-aged person who might work in tech and is educated, has disposable income, and is passionate about the art and science of coffee. Optimize for conversion for a 6 month signup.
Event Count Down — Task
Create a single-page app in a single HTML file that builds a live event countdown. - Inputs: event name, date/time, location, background image upload. - Display large animated countdown numbers, subtle background parallax effect, and a “Save to Calendar” button.
Event Feedback — Task
Create a single-page app in a single HTML file that provides the following features using modern, user-friendly web frontend components suitable for business users: - Display a large table view listing all database rows. The data includes event participant feedback submissions with columns for date, event name, participant name, rating, and feedback. - Feedback should be a bit long, but the table should nicely display it as well - Add a search bar at the top that allows users to filter entries by keyword. - Place an "AI summary" section at the top with a close button. - Populate the table with a realistic, randomly generated dataset containing 30 entries. - Enable users to sort the table by clicking on a column header; the table should reorder the rows in ascending or descending order, with icons indicating the current sort direction. - Pay attention to details: ensure the layout and UI remain intact, colors are used effectively (a monotone business palette is safe, but feel free to be creative!), and no part of the interface appears broken.
Falling Object Catcher — Task
Create a single-page app in a single HTML file for a falling objects game. - Player controls a basket at the bottom (arrow keys or mouse) to catch falling fruits. - Score increases with each catch; missing 3 ends the game. - Use bright, playful colors, smooth animations, and clear score display. - The falling objects should be large enough for kids
Farewell Message Board — Task
Create a single-page app, in a single HTML file, for a farewell message board with a warm and fun feeling: - Use the latest UI components to give the site a professional appearance. - Display 10 pre-posted messages nicely as heartfelt cards, each with a meaningful picture. If a message includes pictures, be sure the text remains the main focus. - Include a "Write" button that allows users to add new messages. - Add a pseudo login button at the top. - Ensure UI design policies, such as button sizes, are consistent throughout.
Festival Lights Show — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Festival Lights Show - Goal: Control a virtual light show. - Features: Color changes, patterns, music sync. - The UI should be vibrant and dynamic.
Fun Game — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Fun Game - Goal: Jump over obstacles to survive as long as possible. - Features: Increasing speed, high score tracking, retry button, and funny sounds for actions and events. - The UI should be colorful, with parallax scrolling backgrounds. - The characters should look cartoonish and be fun to watch. - The game should be enjoyable for everyone.
Healthy Meal Tracker — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Healthy Meal Tracker - Goal: Log meals and nutrition info. - Features: Ingredient list, calories per meal, daily summary. - The UI should be clean with food icons.
Holiday Card For Kids — Task
Create a single-page app, in a single HTML file, that demonstrates a warm and fun holiday card! The card should be interactive and enjoyable for kids! - Have variety of items kids can drop in the UI; a few should be already placed by default - Also have fun sound interactions - Place many cute and fun stuff as much as possible - Animation like snowdrop should be used nicely
Interactive World Clock — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Interactive World Clock - Goal: Display current times in multiple cities. - Features: Add/remove cities, 12/24h toggle. - The UI should be time-focused; each city should reflect morning/afternoon/evening/night time using colors and icons.
Kinetic Typography Studio — Task
Title: Kinetic Typography Studio Prompt: Create a single-page app, in a single HTML file, that lets users design and export animated text sequences. Timeline editor with keyframes for position, scale, rotation, opacity, letter/word offsets, and tracking; easing curves with presets and custom Bézier. Animation presets: typewriter, bounce, liquid, glitch, fade-up, cascade by word/letter/line; per-glyph stagger controls. Audio-reactive mode: load a local audio file, auto-detect beats, and snap keyframes to bars/beats; live preview with scrub. Style controls: font picker (system + a few bundled web fonts), weight, italics, fill/outline, gradients, shadows, motion blur toggle, background color or image. Layout tools: safe-area guides, 1:1/9:16/16:9 aspect presets, margins, grid. Export: MP4/WebM/GIF or PNG sequence; include frame rate and resolution options; render without UI chrome. Accessibility: keyboard shortcuts, focus order, ARIA labels on controls; “prefers-reduced-motion” reduces heavy effects. Responsive, touch + mouse support; no external APIs.
Language Learning Flashcards — Task
Create a single-page app in a single HTML file for interactive language flashcards. - Ask a visitor which language they want to learn (English, Spanish, French, or Japanese) - Consider visitor's locale to translate the UI by default - Display cards with flip animations to reveal the translation on the back. - Create 10 built-in questions for each language; these ten should be useful phrases when traveling. - Include a “shuffle” and “mark as learned” function with smooth animations.
Markdown To Slides — Task
Create a single-page app in a single HTML file with following requirements: - Name: Markdown → Slides - Goal: Convert markdown (--- as slide breaks) to deck. - Features: Live preview with full-screen button, keyboard nav, theme toggle, sample deck loader. - The outlook must be sophisticated and suitable for business presentatio - For demo purpose, an example markdown text should be filled in the text box
Math Practice Drills — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Math Practice Drills - Goal: Improve speed and accuracy with math problems. - Features: Timed quizzes, difficulty settings, score tracker. - The UI should be minimal with large, readable text.
Micro Habit Tracker — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Micro Habit Tracker - Goal: Track up to 7 daily habits with streaks and simple charts. - Features: Add, edit, and delete habits; daily checkmarks; streak counter; "Skip day" option; export/import JSON. - The design should be concise and simple for daily use, but it should inspire and energize the user - Must be compatible with both laptop and mobile screens - For demo purposes, include a few days of example data by default.
Music Theory Trainer — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Music Theory Trainer - Goal: Teach notes, scales, and chords. - Features: Interactive piano, ear training exercises. - The UI should be music-themed, interactive, and fun.
Nonprofit Impact Report — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Nonprofit Impact Report - Goal: Show measurable results of programs. - Features: Infographics, success stories, donation link. - The UI should be inspiring and visually engaging.
Ocean Wave Simulation — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Ocean Wave Simulatio - Goal: Display realistic animated waves. - Features: Change wind speed, wave height, lighting. - The UI should be calming and realistic.
Online Course Landing Page — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Online Academy - Goal: Promote a variety of online courses; coding, design, marketing, etc. - Features: Course syllabus, instructor bio, enrollment form. - The UI should be learning-focused with bright accents.
Online Poll Board — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Online Poll Board - Goal: Let visitors vote on topics (mock). - Features: List of polls, vote count animations, results display. - The UI should be engaging and easy to use; the background should be a light delightful color.
Online Whiteboard — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Online Whiteboard - Goal: Draw and collaborate visually (local-only). - Features: Drawing tools, erase, save image. - The UI should be simple and full-screen.
Openai Fm Inspired — Task
Create a single-page app in a single HTML file that is inspired by https://openai.fm/
Podcast Homepage — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Podcast Home Page - Goal: Display all podcast episodes. - Features: Episode list, search, subscribe buttons. - The UI should be audio-centric and easy to navigate.
Pomodoro — Task
Create a single-page app in a single HTML file with following requirements: - Name: Pomodoro - Goal: Timer + sessions log. - Features: Custom durations, auto-start option, session charts (SVG), sound alert (beep), dark mode. - The UI should be good for daily-use and give some energy to the user!
Product Launch Page — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Product Press Release - Goal: Showcase a new physical or digital product. - Features: Large hero image, specs section, pre-order form. - The UI should be modern and product-centric.
Qr Code Generator — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Custom QR Code Generator - Goal: Generate QR codes from text or URLs. - Features: Color customization, download PNG. - The UI should be minimal with a large preview.
Regex Lab — Task
Build a single-file regex playground (index.html) with no bundler that helps users learn and test regular expressions: - Inputs: pattern, flags (g i m s u y), and test text area with live updates - Output panes: highlighted matches with group colors, table of matches with indices and capture groups, and an explanation of the pattern using common tokens - Utilities: quick inserts for common tokens (\d, \w, \s, [A-Z], lookahead, etc.), copy/share permalink with pattern+flags encoded in URL hash - Error handling: graceful feedback for invalid patterns, show error message and caret positio - UX: terminal-window style, light/dark toggle (default to dark), clear butto
Target Clicker — Task
Create a single-page app in a single HTML file for a target clicking challenge. - Random targets appear briefly around the screen — click them to score. - Game runs for 20 seconds; show score and accuracy at the end. - Use colorful animated targets and a modern scoreboard overlay. The background should be a light color.
Tea Dunkability — Task
Generate a React page that simulates tea dunkability for classic biscuits: sliders for tea temp, dunk time, biscuit type, and structural integrity; animate a looping teacup with steam, show a crumble-o-meter graph, and sprinkle crumbs on over-dunks; glass cards, dark mode, and keyboard shortcuts
Tic Tac Toe Game — Task
Create a single-page app, in a single HTML file: a Tic Tac Toe game that is Roman Empire themed, fully responsive, and modern. Requirements: - Full-viewport, fluid board (vmin-based) and mobile/desktop responsive layout. - Roman theme: marble background, gold accents, SPQR crest, subtle Colosseum vibe. - Clean top bar with only three buttons: “New Round”, “Customize”, “Reset Scores”. - Put all options in a “Customize” dialog: • Theme: Marble Day / Night Legio • Glyphs: Standard X/O or Gladius/Laurel • Mode: 2-player or vs AI • First move: X or O • AI discipline: Perfect / Pragmatic / Reckless - Game logic: • Perfect-play AI via minimax with difficulty handicaps • Scoreboard for X, O, and Draws • Gold win highlight + non-overlapping victory banner under header • Canvas-based confetti on win (no DOM node spraying), respects prefers-reduced-motio - Accessibility: ARIA roles for grid/cells, live status updates, keyboard + touch support. - Visuals: smooth hover/press states, soft shadows, rounded corners, scalable typography. - Constraints: no element overlap or flashing; no external JS frameworks; one HTML file with inline CSS/JS (Google Fonts allowed).
Tiny Kanban — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Tiny Kanba - Goal: Enable Todo → Doing → Done workflow. - Features: Drag cards, WIP limits, priority colors, assign to people, search filter, delete items. - The UI, font size, and colors etc. should be suitable for daily standup meetings.
Trivia Quiz Game — Task
Create a single-page app in a single HTML file that hosts a themed trivia quiz. - Inputs: question text, multiple-choice answers, correct answer. - Show one question at a time with card-style layout, large readable text, and animated feedback (green check or red X). - Include a progress bar at the top and final score display at the end. - Create 10 built-in quiz and display them randomly; the quiz must be basic level for US citizens
Typing Rain — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Typing Rai - Goal: Type falling words before they reach the bottom. - Features: Increasing difficulty, accuracy tracker, score. - The UI should be the city background with animated raindrop words.
Virtual Drum Kit — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Virtual Drum Kit - Goal: Play a drum kit using keyboard or clicks. - Features: Multiple drum sounds, record and playback mode. - The UI should be music-studio themed & drum set featured; the pads should be large enough to tap on mobile.
Weather Theatre — Task
Generate a beautiful React + Canvas “weather theatre” where sliders (cosy, eerie, heroic) remix the same mock forecast into different stage sets; parallax backdrops, spotlight sweeps, and a curtain reveal; add a typewriter subtitle of the scene and a “Matinée/Night” toggle; no external APIs.
Webcam Filter Playground — Task
Create a single-page app in a single HTML file with the following requirements: - Name: Webcam Filter Playground - Goal: Apply fun & surprising filters to live webcam feed - Features: Multiple effects, snapshot capture, save image. - The UI should be minimal with a live preview.