59 Prototype.
Interactive product mockups — dashboards, apps, landing pages, internal tools. Anything you’d hand a stakeholder and click through.
Artefakt-Art
Szene
- 001
Blog-Beitrag Langform-Artikel / Blog-Beitrag — mit Masthead, Hero-Bild-Platzhalter, Artikeltext mit Abbildungen und Zitatblöcken, Autorenzeile und verwandten Beiträgen. Verwenden Sie dies bei Anfragen für 'Blog', 'Artikel', 'Beitrag', 'Essay' oder 'Fallstudie'. - 002
Klinischer Fallbericht Strukturierte medizinische Fallpräsentation für Visiten, Konferenzen und Dokumentation. Erstellt Fallberichte im SOAP-Format oder als Narrativ mit physiologisch korrekten Vitalwerten, Laborwerten und evidenzbasierten Behandlungsplänen. - 003
Codex Interactive Capability Map Verwandeln Sie lange Artikel, Threads, Memos oder Produktbeschreibungen in eine interaktive Codex-Fähigkeitskarte mit Workflow-Schleife, Use-Case-Matrix und responsivem Detailpanel. - 004
Critique Führt eine 5-dimensionale Design-Expertenbewertung für jedes HTML-Artefakt im Projekt durch — Philosophie/Visuelle Hierarchie/Details/Funktionalität/Innovation, jeweils bewertet von 0-10. Erstellt einen eigenständigen HTML-Bericht mit Radar-Diagramm, belegten Bewertungen und drei Listen: Behalten/Beheben/Quick-Wins. - 005
Dashboard Admin-/Analyse-Dashboard in einer einzelnen HTML-Datei. Feste linke Seitenleiste, obere Leiste mit Benutzer/Suche, Hauptraster mit KPI-Karten und Diagrammen. Verwenden Sie es für 'Dashboard', 'Admin', 'Analytics' oder 'Systemsteuerung'. - 006
Datenvisualisierungsbericht Verwandelt CSV-, Excel- oder JSON-Daten in eine ansprechende visuelle Berichtsseite. - 007
Dating Web Ein konsumentenorientiertes Dating-/Matchmaking-Dashboard mit linker Navigationsleiste, Ticker mit Community-Signalen, wichtigen KPIs, 30-Tage-Balkendiagramm für gegenseitige Matches und Matchrate-Trendblock. Redaktionelle Typografie mit zurückhaltenden Akzenten. Geeignet für Dating-Websites, Matchmaking, Community- und Social-Network-Dashboards. - 008
DCF-Bewertung Discounted-Cashflow-Bewertung und innere Wertanalyse für börsennotierte Unternehmen. Geeignet für DCF, fairer Wert, intrinsischer Wert, Kursziel und Über-/Unterbewertungsanalysen. - 009
Geräte-3D-Showcase Statisches iPhone- und MacBook-3D-Showcase mit echtem HTML auf Bildschirmen, Glaslinsen-Brechung und 360-Grad-Drehteller-Komposition. - 010
Digitaler E-Guide Vorschau eines zweiseitigen digitalen E-Guides – Seite 1 ist ein Cover (Titel, Autor, ‚Was enthalten ist'-Statistiken, Inhaltsverzeichnis-Teaser); Seite 2 ist eine Doppelseite (Lektionstext mit Pullquote und Schritt-Liste). Lifestyle-/Creator-Brand-Ton. Verwenden bei Anfragen nach ‚E-Guide', ‚Digital Guide', ‚Lookbook', ‚Lead Magnet', ‚Creator Guide', ‚Playbook', ‚PDF-Guide' oder ‚电子指南'. - 011
Dokumentationsseite Eine Dokumentationsseite mit seitlicher Navigation, scrollbarem Artikelbereich und Inhaltsverzeichnis. Verwenden Sie sie bei Erwähnung von 'Dokumentation', 'Anleitung', 'API-Referenz' oder 'Tutorial'. - 012
E-Mail-Marketing E-Mail-Vorlage für Produkteinführungen mit Masthead, Hero-Bild, kursiver Überschrift, Fließtext, primärem CTA und Spezifikationstabelle im zentrierten HTML-Einspaltenlayout. - 013
Engineering-Runbook Ein Engineering-Runbook — mit Service-Übersicht, Alarm-Tabelle, Dashboard-Links, gängigen Prozeduren mit kopierbaren Befehlen, On-Call-Rotation und Incident-Response-Checkliste. Verwenden Sie es für Runbooks, Ops-Docs, On-Call-Guides, SRE-Docs oder 运维手册. - 014
Finanzbericht Quartals-/Monatsfinanzbericht mit KPI-Header, Umsatz- und Burn-Diagrammen, P&L-Übersichtstabelle, Top-Highlights und Ausblick-Absatz. Verwenden Sie dies bei Erwähnung von 'Finanzbericht', 'Q3-Bericht', 'MRR-Review', 'P&L' oder '财报'. - 015
Flowai Live-Dashboard-Vorlage Team-Management-Dashboard im FlowAI-Design mit drei Tabs (Teammitglieder, Teamdetails, Aktivitätsprotokoll), KPI-Statistikzeile, Mitgliedertabelle, Rollenverteilungs-Balkendiagramm, Online-Präsenz- und Aktivitäts-Sparklines sowie Top-Mitarbeiter-Panel. Unterstützt Hell-/Dunkel-Modus, Chart-Tooltips, Zoom-Funktion und CSV-Export. - 016
Gamifizierte App Drei-Screen-Prototyp einer gamifizierten Mobile-App: Cover-Screen, heutige Quests mit XP-Ribbons und Level-Leiste, Quest-Details. Geeignet für gamifizierte Apps, Habit-Tracker, RPG-Life-Apps, Level-up-Apps, Daily Quests und XP/Streak-Apps. - 017
GitHub Dashboard GitHub Repository-Analyse-Dashboard — Sterne, Forks, Mitwirkende, Issues, Pull Requests, aktuelle Aktivitäten und Top-Mitwirkende. Verwenden Sie es für GitHub-Repository-Dashboards, Open-Source-Wachstumsberichte, Repository-Integritätsseiten oder GitHub-Analyseansichten. - 018
HR-Onboarding Ein Onboarding-Plan für neue Mitarbeiter auf einer Seite – Zeitplan für die erste Woche, Buddy- und Manager-Vorstellung, Lernpfad, Ausrüstungs-Checkliste und ‚Sie sind startklar, wenn…'-Ziele. Verwenden, wenn das Briefing ‚Onboarding', ‚neue Mitarbeiter', ‚Plan für die erste Woche' oder ‚入职' erwähnt. - 019
Html Ppt Taste Brutalist 16:9 HTML-Deck im Tactical-Telemetry / CRT-Terminal-Stil. Deaktivierte CRT-Anthrazit-Folien, weiß-phosphoreszierende Monospace, Gefahren-Rot-Akzent, Scanline-Overlay, ASCII-Syntax, Dichte statt Dekoration. Destilliert aus Leonxlnx/taste-skill `brutalist-skill` (Tactical Telemetry-Modus). - 020
Html Ppt Taste Editorial 16:9 HTML-Deck im editorial-minimalistischen Stil. Warme cremefarbene Folien, Serifenschrift für Überschriften + Grotesk-Body, haarfeine Linien, dicktengleiche Meta-Infos, großzügiger Weißraum, ein Akzent. Destilliert aus Leonxlnx/taste-skill `minimalist-skill`. - 021
Rechnung Eine druckbare Rechnungsseite – mit Absender- und Empfängerblock, Positionstabelle, Steueraufschlüsselung, Summen und Zahlungsanweisungen. Verwenden Sie diese Vorlage bei Begriffen wie 'invoice', 'bill', 'billing statement' oder '发票'. - 022
Kami Landing Erstellt ein druckfertiges einseitiges Papierdokument — warme Pergamentoptik, tintenblaue Akzente, Serife in einer Stärke, kein Kursiv, keine kühlen Grautöne. Die Ausgabe wirkt wie ein professionelles Whitepaper oder Studio-One-Pager, nicht wie eine App-UI. Mehrsprachig konzipiert (EN · zh-CN · ja). Eine eigenständige HTML-Datei, keine Abhängigkeiten. - 023
Kami Pergament-Dokument Warme Pergament-Leinwand (#f5f4ed), monochromer Tintenblau-Akzent (#1B365D), eine Serifenschrift und Typografie in redaktioneller Qualität. - 024
Kanban Board Kanban- / Aufgabentafel mit Spalten (To do / In progress / In review / Done), ziehbaren Karten, Zuweisungs-Avataren, Swimlanes und einer oberen Filterleiste. Verwenden Sie es, wenn 'kanban', 'task board', 'sprint board', 'trello' oder '看板' erwähnt werden. - 025
Letzte 30 Tage Community- und Social-Trend-Recherche der letzten 30 Tage. Verwenden Sie dies für aktuelle Meinungen, jüngste Stimmungen, Community-Reaktionen, Social Proof, Launch-Feedback, Trend-Scans oder Kontext der letzten 30 Tage. - 026
Magazinartikel Von Huashu / huashu-md-html inspiriertes Magazinartikel-Layout zum Umwandeln von Markdown oder Notizen in einen ausgefeilten HTML-Langformartikel. - 027
Magazin-Poster Editorial-Poster im Zeitungsstil mit Zeitungspapier, Datumszeile, übergroßer Serifenschrift mit Durchstreichung und Kursivierung, zweispaltigem Textblock und 6 nummerierten Abschnitten mit Zitatanmerkungen. Ideal für Magazinposter, Editorial-Designs, Zeitungslayouts oder Manifeste. - 028
Marketing-Poster Hochformat-Poster oder Moments-Style-Teilen-Bild mit starker visueller Wirkung. - 029
Besprechungsnotizen Besprechungsnotizseite – Titelleiste mit Teilnehmern, Agenda-Checkliste, Entscheidungsblock, Aufgabentabelle mit Verantwortlichen und Terminen sowie Fußzeile für das nächste Meeting. Geeignet für Begriffe wie 'Besprechungsnotizen', 'Protokoll', '1:1-Notizen', 'All-Hands-Zusammenfassung' oder '会议纪要'. - 030
Mobile App Ein Mobile-App-Bildschirm, der in einem pixelgenauen iPhone 15 Pro-Rahmen auf der Seite gerendert wird. Erstellt durch Kopieren der Seed-Datei assets/template.html und Einfügen eines Bildschirm-Archetyps aus references/layouts.md. Verwenden Sie dies, wenn im Brief nach 'Mobile App', 'iOS App', 'Android App', 'Telefonbildschirm' oder 'App UI' gefragt wird. - 031
Mobile Onboarding Ein mehrbildschirmiger mobiler Onboarding-Ablauf mit drei nebeneinander angeordneten Handy-Frames — Splash, Value-Prop, Sign-in. Mit Statusleiste, Swipe-Punkten und primärem CTA. Verwenden Sie dies für 'Mobile Onboarding', 'iOS Onboarding', 'Phone Signup' oder '移动端引导'. - 032
Moderner Lebenslauf Moderner minimalistischer Lebenslauf, einzelne A4-Seite, druckfertig oder als PDF-Export. - 033
Motion Frames Einzel-Frame-Motion-Design-Komposition mit loopenden CSS-Animationen – rotierender Textring, animierter Globus, Timer, Parallax-Labels. Rendert als Hero-Video-Poster für HyperFrames oder jeden keyframe-basierten Exporter. Ideal für Motion Design, animierte Hero-Bereiche, Loops, Video-Poster und Titelkarten. - 034
Open Design Landing-Seite Erstellt eine einseitige Editorial-Landing-Seite in der visuellen Sprache von Atelier Zero (Monocle / Apartamento / Études Collage-Stil). Füllt inputs.json aus einem Marken-Brief, generiert optional 16 Collage-Assets via gpt-image-2 und gibt eine eigenständige HTML-Datei mit Scroll-Animationen und fixierter Navigation aus. - 035
Orbit Allgemein Wird automatisch von Orbit ausgelöst, wenn zwei oder mehr Konnektoren verbunden sind. Sammelt Aktivitäten der letzten 24 Stunden von allen authentifizierten Konnektoren (GitHub, Linear, Notion, Slack, 飞书, Kalender, Gmail, Drive, Sentry, Vercel usw.) und erstellt ein adaptives Bento-Grid-Dashboard oben in "我的设计". Wird täglich vom Orbit-Digest-Scheduler ausgeführt. - 036
Orbit Github Orbit-Skill zur automatischen Erstellung täglicher Zusammenfassungen basierend auf GitHub-Verbindungen. Ruft PRs, Review-Anfragen, Issues, CI-Läufe und Merges der letzten 24 Stunden ab und zeigt sie im GitHub-nativen Benachrichtigungsstil an. Wird automatisch vom Orbit Daily-Digest-Scheduler aufgerufen. - 037
Orbit Gmail Extrahiert die Posteingangsaktivitäten der letzten 24 Stunden und erstellt eine tägliche Zusammenfassung, wenn Gmail der einzige verbundene Dienst ist oder explizit ausgewählt wurde. Wird automatisch vom Orbit-Scheduler ausgelöst und sollte nicht manuell gestartet werden. - 038
Orbit Linear Wird automatisch vom Orbit-Pipeline ausgelöst, wenn Linear der einzige verbundene Connector des Benutzers ist oder der Benutzer sein tägliches Digest explizit auf Linear beschränkt. Ruft die letzten 24 Stunden an Issue-Bewegungen, Statusänderungen, Zuweisungen und Zyklus-Fortschritt ab und rendert das Digest in Linear's nativer Inbox-Visualsprache. - 039
Orbit Notion Open Orbit Briefing-Skill – wird von der Orbit-Pipeline ausgewählt, wenn Notion der einzige verbundene Connector des Benutzers ist oder wenn der Benutzer seinen täglichen Digest explizit auf Notion beschränkt. Ruft die Dokumentbearbeitungen, Kommentare, Erwähnungen und Datenbankzeilenänderungen der letzten 24 Stunden aus der authentifizierten Notion-Verbindung des Benutzers ab und rendert den Digest als native Notion-Seite (Callout/Toggle/Datenbanktabellen-Elemente). Dieser Skill sollte nicht manuell ausgelöst werden – er wird vom täglichen Digest-Scheduler von Orbit gegen Live-Notion-Daten aufgerufen. - 040
Produktspezifikation Einseitige Produktspezifikation/PRD mit Problem, Erfolgsmetriken, Umfang, User Stories, Design-Notizen, Rollout-Plan und offenen Fragen. Für Produktspezifikationen und Feature-Briefs. - 041
Preisseite Eine eigenständige Preisseite – Header, Tarif-Stufen, Feature-Vergleichstabelle und FAQ. Verwenden Sie diese, wenn das Briefing nach 'Preisen', 'Plänen', 'Abo-Stufen' oder einer 'Tarife vergleichen'-Seite verlangt. - 042
Reddit-Post-Karte Realistische Reddit-Post-Karte mit Vote-Leiste und Kommentaranzahl, geeignet für Video-Overlays oder Story-Sharing. - 043
SaaS Landing Einseitige SaaS-Landingpage mit Hero, Features, Social Proof, Preisen und CTA. Berücksichtigt die aktiven DESIGN.md-Token für Farbe/Typografie/Layout. Trigger-Schlüsselwörter: "saas landing", "marketing page", "product landing". - 044
Social Carousel Ein dreiteiliges Social-Media-Karussell mit 1080×1080-Quadraten – drei filmische, markengerechte Panels mit Display-Überschriften, die über die Serie hinweg verbunden sind ('vorwärts.' → 'zum nächsten.' → 'nach vorne blicken.'). Jede Karte enthält ein Markenzeichen, Nummer/Gesamt, eine Bildunterschrift und ein 'Loop'-Affordance. Verwenden Sie es für Anfragen wie 'Karussell-Post', 'Social Carousel', 'Instagram-Karussell', 'LinkedIn-Serie', 'X-Thread-Karten' oder '三连发'. - 045
Social-Media-Dashboard Social-Media-Analyse-Dashboard für Creator in einer einzelnen HTML-Datei. Mit Plattform-Umschalter (X / LinkedIn / YouTube / Instagram), KPI-Karten (Follower, Engagement-Rate, Likes, Reposts), Follower-Wachstums-Chart, Top-Post-Vorschau der Woche und Trending-Topics/Top-Kommentare-Seitenleiste. - 046
Spotify Aktuell-Läuft-Karte Spotify-Wiedergabekarte mit Albumcover, Fortschrittsbalken und Steuerungselementen, geeignet für Video-Overlays oder persönliche Homepages. - 047
Sprite-Animation Animierte Erklärfolie im Pixel-Art-Stil mit cremefarbenem Hintergrund, fetter Jahreszahlanzeige, animiertem Pixel-Art-Maskottchen (z. B. Hanafuda-Karte, Pilz oder 8-Bit-Konsole), kinetischer japanischer Typografie und Timeline-Band. Reine CSS-Animation, bereit für Hochformatvideo-Aufnahme. - 048
Team-OKRs OKR-Tracker-Seite mit Quartalsbanner, drei Zielen mit zugehörigen Schlüsselergebnissen als Fortschrittsbalken, Owner-Avataren, Status-Pills und einer Seitenleiste für die Quartalsübersicht. Verwenden Sie dies bei Erwähnung von OKRs, Schlüsselergebnissen, Zielen oder 目标. - 049
Tweaks Fügt HTML-Elementen ein Live-Bedienfeld hinzu, um Akzentfarbe, Schriftgröße, Dichte, Bewegung und Theme in Echtzeit anzupassen. Änderungen werden sofort in CSS Custom Properties übernommen und in localStorage gespeichert. - 050
Twitter-Teilen-Karte Twitter-Zitat- oder Datenkarte, die für die Kombination mit einem Beitrag entwickelt wurde. - 051
Wartelisten-Seite Minimalistische Pre-Launch-Landingpage mit E-Mail-Erfassung, Markenlogo und optionaler Dekorationsebene. Liest Farben, Typografie und Layout-Regeln aus DESIGN.md. Ideal für Produkteinführungen, Beta-Anmeldungen, Early-Access-Programme und Indie-Projekte. - 052
Web-Prototyp Allzweck-Desktop-Web-Prototyp. Einzelne eigenständige HTML-Datei durch Kopieren von `assets/template.html` und Einfügen von Layouts aus `references/layouts.md` erstellt. Standard für Landing-, Marketing-, Dokumentations- oder SaaS-Seiten. - 053
Web Prototype Taste Brutalist Web-Prototyp im Schweizer Industriedruck-Stil. Zeitungspapier-Canvas, monolithische schwarze Grotesk-Schrift, viewport-übergreifende Ziffern, haardünne Rastereinteilungen, gefahrenrote Akzente, ASCII-Syntax-Dekoration. Abgeleitet von Leonxlnx/taste-skill `brutalist-skill` (Schweizer Industriedruck-Modus). - 054
Web Prototype Taste Editorial Editorial-minimalistischer Web-Prototyp. Warme monochrome Leinwand, Serifenschrift für Überschriften + groteske Schrift für Text, 1px Haarlinien, gedämpfte Pastellfarben, großzügiger Weißraum, subtile Mikroanimationen. - 055
Web Prototype Taste Soft Web-Prototyp in Apple-Qualität mit softem Design. Silber/Creme-Canvas, doppelte Rahmen-Karten, verschachtelte Button-CTAs, großzügige Squircle-Radien, Spring-Motion und Ambient-Mesh. Basierend auf Leonxlnx/taste-skill soft-skill und Abschnitten 4–8. - 056
Wireframe-Skizze Handgezeichnetes Wireframe mit Karopapier-Hintergrund, Marker-/Bleistiftton, Tabs für Varianten, Haftnotiz-Anmerkungen und skizzierten Diagramm-Platzhaltern. Ideal für Anfragen nach Wireframe, Sketch, Lo-Fi oder Whiteboard-Designs. - 057
X / Twitter Beitragskarte Realistische X-Beitragskarte mit Engagement-Metriken (Likes, Reposts, Aufrufe), geeignet für Video-Overlays oder teilbare Bildkarten. - 058
X Research X/Twitter-Stimmungsanalyse zu aktuellen Markt-, Unternehmens-, Produkt- oder Community-Diskussionen. Verwenden Sie dies, um öffentliche Meinung, Expertenbeiträge oder soziale Reaktionen zu Aktien, Sektoren, Unternehmen, Produkten oder Marktereignissen zu analysieren. - 059
Xiaohongshu-Karte Wissenskarten im Xiaohongshu-Stil, angeordnet als wischbares Mehrkarten-Karussell.