UI-Vorlage für eine Lieferdienst-App.
Ein komplettes UI-Design für eine App zum Bestellen und Liefern von Essen: acht Smartphone-Screens mit realistischen Restaurants, Gerichten und Preisen, vom Start-Feed über die Kasse bis zum Live-Tracking der Bestellung. Jeder Screen ist schlichtes HTML mit Tailwind, sodass Codex oder Claude Code die Vorlage klonen und in deine App verwandeln können.
Aktualisiert am 6. November 2026
Mobile app · 8 screens · Free and open source
01Start 
02Restaurant 
03Gericht 
04Warenkorb 
05Kasse 
06Bestellverfolgung 
07Bestellungen 
08Konto
Clone it
npx degit ummydev/ui-templates/apps/food-ordering my-app
Copies just this template into a new folder, without the rest of the repository.
Make it yours
This is the Lieferdienst-App template from codexdesign.io. Rename it to [your product], replace the sample data with [your features], and keep every screen on the design system in DESIGN.md.
Paste this into Codex or Claude Code in the new folder.
Design system
PantryAppWarm, freundlich und appetitlich, für Essens- und Bestell-Apps.Überschriften in Bricolage Grotesque- Built with
- HTML · Tailwind CSS v4 · Lucide icons · SVG illustrations
Was in der Vorlage steckt
| Screen | Was zu sehen ist |
|---|---|
| Start | Lieferadresse, Suche, Küchenkategorien, ein Angebot und Restaurants in deiner Nähe |
| Restaurant | Bewertung, Lieferzeit und Liefergebühr, Menü-Tabs, Gerichte mit Hinzufügen-Buttons und eine fixierte Warenkorb-Leiste |
| Gericht | Beschreibung, Größe, Schärfegrad und Extras mit Preisen, Menge und Button für den Warenkorb |
| Warenkorb | Artikel mit Mengenreglern, eine Notiz fürs Restaurant, ein Promo-Code und die Kostenaufstellung |
| Kasse | Adresse, Standard- oder geplante Lieferung, Zahlungsart, Trinkgeld für den Fahrer und Bestellung aufgeben |
| Bestellverfolgung | Eine Karte mit dem Fahrer, Ankunftszeit, Bestellschritte, Kontakt zum Fahrer und die Bestellübersicht |
| Bestellungen | Die laufende Bestellung und frühere Bestellungen, die du erneut aufgeben kannst |
| Konto | Profil, Gesamtwerte, ein Empfehlungsangebot, Adressen, Zahlungsarten und Einstellungen |
Jeder Screen ist eine HTML-Datei in 390×844, gestaltet mit Tailwind CSS v4 und einer gemeinsamen tokens.css. Die Gerichte sind 12 flache SVG-Illustrationen, die in der Vorlage enthalten sind, es gibt also keine externen Bilder. Öffne eine beliebige Datei im Browser; es gibt nichts zu installieren oder zu bauen.
Mit Codex oder Claude Code nutzen
Kopiere nur diese Vorlage aus dem ui-templates-Repository:
npx degit ummydev/ui-templates/apps/food-ordering my-food-app
Bitte dann deinen Agenten, sie zu deiner zu machen:
Dieser Ordner ist eine UI-Vorlage für eine Lieferdienst-App. Mach daraus [Name deiner App], für [deine Restaurants oder deinen Markt]. Behalte DESIGN.md und tokens.css als Designsystem, ersetze die Beispieldaten für Restaurants, Gerichte und Preise durch [deine Speisekarte] und ersetze die Illustrationen durch deine eigenen Fotos. Baue danach diese Screens in [Expo / SwiftUI / deinem Stack].
Weil das Designsystem in DESIGN.md festgehalten ist, passen neue Screens, die dein Agent ergänzt, etwa eine Restaurantsuche oder eine Seite fürs Bonusprogramm, zu den acht vorhandenen.
Gebaut auf dem Designsystem Pantry
Die Vorlage nutzt Pantry, ein Designsystem für Essens- und Bestell-Apps: ein cremefarbener Hintergrund, Tomatenrot fürs Bestellen, Kräutergrün für Lieferung und Erfolg, große abgerundete Essenskarten, pillenförmige Buttons und 48px-Touch-Ziele. Auf der Seite findest du eine Live-Vorschau, die komplette DESIGN.md und ein shadcn-Theme.
Häufige Fragen
Ist diese Lieferdienst-App-Vorlage kostenlos?
Ja. Sie ist Open Source unter der MIT-Lizenz, für private und kommerzielle Projekte, einschließlich der Illustrationen der Gerichte.
Kann ich sie in Figma nutzen?
Die Vorlage ist HTML, keine Figma-Datei, und genau deshalb kann ein KI-Agent sie direkt lesen und ändern. Die Screenshots taugen als Referenz, und die Farben und Schriften aus DESIGN.md lassen sich als Figma-Styles anlegen.
Gibt es ein dunkles Theme?
Ja. Füge class="dark" zum <html>-Tag eines Screens hinzu, um auf das dunkle Theme von Pantry zu wechseln.