AIWebApp

Tested templates for small web apps

Start from a template instead of a prompt. This one is a Spanish flashcards app with known/learning tracking and keyboard shortcuts.

Spanish Vocabulary FlashcardsFlashcardsExample — not saved until you change it

Runs on this device in under a second. Ctrl+Enter also generates.

What the planner understood

Confidence100%
  • flashcardFlashcards template
  • flashcardsFlashcards template
  • vocabularyFlashcards template
Feasibility, templates and prompt history

Feasibility

  • NATIVELight and dark theme
  • NATIVEResponsive layout
  • NATIVESave data on the device

Start from a template

Picking a template keeps the name, colours and fields from your description.

Prompt history

Off by default. Prompts are only kept in this browser if you turn this on.

index.html
Sandboxed · network off · fits 772px

App type

Flashcards — Flip cards with known/learning tracking.

Pages and sections

  • index.html
    1. App (Flashcards)

Drag sections to reorder, or use the arrow buttons. Navigation links are generated for every page.

Wireframe

Component library (8)

Native <dialog> with focus return, Escape to close and a labelled title.

<button class="btn btn-primary" type="button" data-open-dialog="demo-dialog">Open dialog</button>
<dialog class="c-modal" id="demo-dialog" aria-labelledby="demo-dialog-title">
  <h2 id="demo-dialog-title">Delete this project?</h2>
  <p>This removes it from this device. You can export a copy first.</p>
  <div class="c-modal-actions">
    <button class="btn" type="button" data-close-dialog>Cancel</button>
    <button class="btn btn-primary" type="button" data-close-dialog value="confirm">Delete</button>
  </div>
</dialog>

Every template is tested

Each template is composed and checked automatically: every file must pass the validator with no errors, scripts must parse, every page must pass the static accessibility check, and calculator maths is verified against reference values. Only templates that pass ship.

Star the templates you use most; favourites are remembered in this browser and appear first in the picker.

What each template includes

Shared pieces come with every template: a theme toggle that follows the system setting, storage that falls back to memory when localStorage is blocked, toast messages announced to screen readers, a generated icon and a web app manifest. Template-specific code lives in its own file so it is easy to find.

Frequently asked questions

Can I combine templates?

Pages can mix website sections (hero, features, FAQ, contact) with one app. Combining two apps on one page requires editing the code.

Are more templates coming?

Yes. Templates are added only when they pass the same validation, accessibility and correctness checks.