Startseite / AI-Rules-Builder

Studio-Werkzeug

AI-Coding-Regeln
für Ihren Stack

Originale REACTAPP.TOP-Leitlinien für Assistenten in React, TypeScript, Express und Operator-Systemen plus eine Bibliothek von UI-Layout-Prompts. Auswählen, Markdown prüfen, exportieren.

Regel-Builder

Schnellstart
Heuristische Autoselect aus Abhängigkeiten

Ausgewählte Regeln (0)

Wählen Sie links Regeln, um ein Markdown-Paket zu bauen.

Vorschau & Export

Pfad: .cursor/rules/
# AI rules for project

Generated by REACTAPP.TOP AI Rules Builder. Original studio guidance for assistants working in this repository.

_No rules selected yet._
UI-Prompt-Bibliothek

Layout-Prompts für Vibe Coding

Struktur wählen, Prompt kopieren und zusammen mit einem Screenshot des gewünschten Looks in Cursor, v0, Lovable oder Bolt einfügen. Prompts ins Paket legen, um sie neben den Coding-Regeln zu exportieren.

92 Layout-Prompts in 15 Kategorien

Login-Formulare6

Split-Screen mit Visual

Formular auf einer Seite, Produktvisual oder Markenfläche auf der anderen

Build a sign-in screen as a split layout: a form column with logo, heading, email, password with show/hide toggle, remember-me checkbox, forgot-password link, primary CTA and a sign-up link; and a visual column with a product screenshot or brand graphic plus a one-line customer quote. Collapse the visual column below 768 px and keep inline validation messages under each field. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Zentrierte Karte auf Hintergrund

Schwebende Karte mit Überschrift, Feldern, CTA und Registrierungslink

Build a sign-in form as a floating card centred on a full-page background with a soft gradient or subtle pattern. Inside the card: heading, email, password, primary CTA and a link to switch to sign-up. Show field-level validation inline and a disabled pending state on the button while submitting. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Minimal einspaltig

Ohne Karte — Logo, Überschrift, Felder und CTA sauber gestapelt

Build a sign-in page as a single narrow column (max 360 px) without a card container: logo, heading, email, password, primary CTA and a secondary link, stacked with generous vertical rhythm. Put legal links in a quiet footer and keep the whole form visible without scrolling on a phone. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Social-Login zuerst

Social-Login-Buttons oben, E-Mail und Passwort unter einem Trenner

Build a sign-in form where social providers (Google, GitHub, Apple) are the primary group of full-width buttons at the top, followed by an "or continue with email" divider and a secondary email/password form below. Each social button has the provider icon, consistent height and a visible focus ring. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Nur Magic Link

Ein E-Mail-Feld und ein CTA — Anmeldung ohne Passwort

Build a passwordless sign-in: a heading, a single email input and one CTA that sends a magic link. After submit, replace the form with a "check your inbox" state showing the masked email, a resend button with a 30-second countdown and a link to use a different address. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Mehrstufiger Assistent

Fortschrittsanzeige oben, Registrierung in 2–3 Schritten

Build a sign-up wizard with a step indicator at the top and three steps: account (email, password), profile (name, role) and workspace (name, team size). Provide back and next buttons, keep entered values when navigating between steps, and show a summary before the final submit. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Preise8

Klassische 3 Tarifkarten

Drei Karten nebeneinander, die mittlere als Empfehlung hervorgehoben

Build a pricing section with three tier cards side by side; the middle card is elevated, uses the accent border and carries a "Recommended" badge. Each card shows the plan name, price with billing period, a short positioning line, a feature list with check icons and a CTA. Stack the cards on mobile with the recommended one first. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Monatlich / jährlich umschalten

Abrechnungsschalter mit „X % sparen“-Badge und Live-Preisen

Build a pricing section with a monthly/annual switch above the plan cards and a "save 20%" badge next to the annual option. Prices update instantly when the switch changes, with a short crossfade; expose the switch with role="switch" and keyboard support. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Vergleichstabelle

Tarife als Spalten, Funktionen als Zeilen mit Häkchen und Strichen

Build a feature comparison table: plans as columns with a sticky header row containing name, price and CTA; features grouped into sections as rows with check icons, dashes or short values. On screens under 768 px collapse it into one accordion per plan instead of horizontal scrolling. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Einzeltarif als Hero

Eine große zentrierte Karte mit Preis, vollständiger Funktionsliste und CTA

Build a single-plan pricing hero: one large centred card with the price and period, a two-column list of everything included, a prominent CTA and a money-back or cancel-anytime note underneath. Keep it readable at a glance; no toggles or comparisons. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Nutzungs-Slider

Interaktiver Slider, der den angezeigten Preis live aktualisiert

Build a usage-based pricing block: a range slider for seats or monthly requests that updates the displayed price live, shows the unit price and highlights tier breakpoints along the track. The slider is keyboard operable with visible value labels; show a "contact sales" state past the last tier. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Credit-Paket-Raster

Kacheln mit Credit-Menge, Preis, Stückpreis und Badges

Build a credit pack picker as a grid of selectable tiles; each tile shows the credit amount, price, cost per credit and an optional "Best value" or "Popular" badge. Selecting a tile updates a summary and CTA below; support keyboard selection with radio semantics. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Free vs. Pro

Zwei Spalten mit starkem visuellem Kontrast zwischen den Tarifen

Build a two-plan pricing layout: Free on the left with a muted surface and Pro on the right on an accent or dark surface, features aligned row by row so the difference is obvious. Each column has its own CTA; on mobile stack Pro first. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Gestapelte Mobile-first-Karten

Karten in voller Breite, eine pro Tarif, jede mit kompletter Funktionsliste

Build a mobile-first pricing list: full-width stacked cards, one per tier, each with name, price, complete feature list and a CTA at the bottom. Add a sticky "compare plans" button that scrolls to a compact comparison table; on desktop limit the cards to a 640 px column. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Features & Bento8

Dreispaltiges Icon-Raster

Icon, Feature-Titel und Kurzbeschreibung in drei Spalten

Build a features section as a three-column grid of six items; each has an icon in a soft tinted square, a title and one or two sentences. Equalise card heights, collapse to two columns at 768 px and one at 480 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Bento-Raster

Asymmetrische Kacheln unterschiedlicher Größe, Kernfeatures größer

Build a bento-style features grid: two large tiles for the headline capabilities and four small tiles for supporting ones, all with the same corner radius and gap. Each tile has a visual (screenshot crop, chart or icon) and a short caption; reflow to a single column on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Wechselnde Reihen

Text auf einer Seite, Visual auf der anderen, pro Reihe wechselnd

Build a features section as alternating rows: text block (eyebrow, heading, paragraph, link) on one side and a visual on the other, switching sides each row. Stack text above visual on mobile and keep the visuals the same aspect ratio. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Features in Tabs

Tabs, die jeweils ein Feature mit Visual zeigen

Build a tabbed features block: a horizontal tab list on top (vertical on the left at desktop widths if there are more than four), and a panel showing the visual and description of the active feature. Tabs follow the WAI-ARIA tabs pattern with arrow-key navigation; no auto-rotation. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Akkordeon-Liste

Einklappbare Zeilen, die eine vollständige Beschreibung öffnen

Build a features accordion: vertical list of collapsible rows with the feature name, an expanded description and an optional visual on the side that changes with the open row. Only one row is open at a time; keep collapsed content in the DOM and hide it with CSS. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Scroll-gesteuertes Aufdecken

Sticky-Visual auf einer Seite, Beschreibungen scrollen auf der anderen

Build a scroll-driven features section: a sticky visual on one side and a column of feature descriptions on the other; as each description reaches the middle of the viewport the visual updates to match. Use IntersectionObserver, and fall back to a plain stacked list when prefers-reduced-motion is set or on narrow screens. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Icon-Wand

Dichtes Raster kleiner Icon-Kacheln mit kurzen Labels

Build an icon wall: a dense grid of 16 to 24 small tiles, each with an icon and a two-word label (integrations, formats or capabilities). Tiles lift slightly on hover, wrap from six columns down to three, and keep labels visible without truncation. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Vorher / Nachher-Vergleich

Zwei Spalten: ohne und mit dem Produkt

Build a before/after comparison: two side-by-side columns, "Without" with muted styling and cross icons and "With" with the accent surface and check icons, item by item. Communicate the contrast with icons and labels, not colour alone; stack the columns on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Hero-Bereiche8

Zentrierter Text + Screenshot

Überschrift, Unterzeile und CTAs oben, großer Produkt-Screenshot darunter

Build a hero with centred eyebrow, heading, subheading and two CTAs, followed by a large product screenshot in a browser frame with a soft shadow that slightly overlaps the next section. Preload the screenshot, set explicit dimensions and use fluid type for the heading. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Geteilter Hero

Überschrift und CTAs auf einer Seite, Produkt-Mockup auf der anderen

Build a split hero: heading, subheading and two CTAs on the left, a product mockup (device frame or floating cards) on the right. Below 768 px stack the text above the visual and reduce the visual height. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Video-Hintergrund

Stummes Loop-Video hinter Überschrift und CTAs

Build a hero with a looping, muted, autoplaying background video under a dark overlay, with heading and CTAs on top. Provide a poster image, load the video lazily and show the static poster when prefers-reduced-motion is set or on slow connections. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Animiertes Gradient-Mesh

Langsam bewegter Verlaufshintergrund unter dem Text

Build a hero with a slowly animating gradient mesh background (three or four blurred colour blobs) and heading, subheading and CTAs on top. Animate only transform and opacity, pause the animation when prefers-reduced-motion is set, and keep text contrast at WCAG AA over every frame. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Terminal- / Code-Hero

Terminalfenster mit animierter Eingabe als zentrales Visual

Build a developer-focused hero: heading and one-line pitch above a terminal window that types an install command and prints its output, with a copy button for the command. Use a monospace font, realistic prompt and colours, and render the final text immediately when prefers-reduced-motion is set. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Schwebende UI-Elemente

Produktkarten, die um die zentrale Überschrift schweben

Build a hero where four to six small product UI cards (notifications, charts, list items) float around a centred heading and CTA with slight parallax on pointer movement. Hide all but two cards under 768 px, and disable the parallax when prefers-reduced-motion is set. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Große, fette Typografie

Überdimensionierte Überschrift als Fokus mit minimaler Begleitung

Build a typography-led hero: an oversized, tightly set heading occupying most of the viewport, a single short sentence and one CTA. Use clamp() for fluid type between 40 and 120 px, balanced line wrapping and no imagery. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Hero mit Inline-Formular

E-Mail-Erfassung direkt unter der Überschrift

Build a hero with heading, subheading and an inline email capture form directly beneath: input and button on one row, a privacy note under it. Validate the email inline, show a success state replacing the form and stack input and button on narrow screens. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

CTA-Banner7

Vollflächiges Verlaufsbanner

Vollbreiter Bereich mit Verlauf, zentrierter Überschrift und CTA

Build a full-bleed call-to-action section with a gradient background, centred heading, one supporting sentence and a single high-contrast CTA. Keep vertical padding generous and the text readable at AA contrast over the gradient. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Geteilte CTA-Karte

Karte mit Überschrift links und Button rechts

Build a contained call-to-action card: heading and one sentence on the left, primary button on the right, aligned on one row with a border and subtle surface. Stack the content and make the button full width under 640 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Sticky-Leiste unten

Am unteren Viewport fixierte Leiste mit Nachricht, CTA und Schließen

Build a sticky bottom bar fixed to the viewport: short message, one CTA and a dismiss button; remember the dismissal in localStorage. Respect the safe-area inset on mobile, do not cover page content by adding bottom padding to the body while visible. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Gemusterter Hintergrund

Dezentes Punkt- oder Rastermuster hinter zentrierter Nachricht und Button

Build a call-to-action section with a subtle dot or grid pattern background, a centred heading, one sentence and a button. Fade the pattern towards the edges with a radial mask and keep it purely decorative for assistive technology. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Doppelter CTA

Primäre und sekundäre Aktion nebeneinander

Build a call-to-action block with a heading, one sentence and two buttons side by side: a filled primary action and an outlined secondary one, each with a short helper text underneath. Stack the buttons full width on narrow screens with the primary first. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Inline-E-Mail-Erfassung

E-Mail-Feld und Absenden-Button in einer Zeile unter der Überschrift

Build an email capture call to action: heading, subheading and an inline form with email input and submit button on one row, plus a note about frequency and unsubscribe. Show inline validation and a success message in place of the form. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Kundenstimme + CTA

Kundenzitat über Überschrift und Button als Social Proof

Build a call-to-action block that opens with a short customer quote, avatar, name and company, followed by the heading and a single CTA. Keep the quote to two lines and align everything centrally. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Kennzahlen-Leisten7

Vier Zahlen in einer Reihe

Vier große Zahlen nebeneinander mit Labels darunter

Build a stats bar with four large numbers in a row and a short label under each, separated by thin vertical dividers. Use tabular figures, wrap to two columns on tablets and one on phones. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Animiertes Hochzählen

Zahlen zählen hoch, sobald sie in den Viewport scrollen

Build a stats row whose numbers animate from zero to their final value when scrolled into view, once, over about a second with easing. Render the final values in the server HTML and skip the animation when prefers-reduced-motion is set. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Icon + Kennzahl

Ein Icon zu jeder Zahl und jedem Label

Build a stats block where each metric is a pair of a rounded icon tile on the left and the number with its label on the right, three or four pairs in a row. Icons are decorative; the label carries the meaning. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Logo-Leiste + Kennzahlen

Kundenlogos neben Kennzahlen wie „10k+ Nutzer“

Build a social-proof strip combining a row of monochrome customer logos with two or three key figures such as users, uptime and countries. Give logos equal optical size, and place the figures above the logos on narrow screens. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Vertikal gestapelte Kennzahlen

Stapel von Metriken für eine schmale Spalte oder Sidebar

Build a vertical stats stack for a narrow column or sidebar: each metric shows a number, a label and an optional delta, separated by hairlines. Keep numbers right-aligned with tabular figures. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Kennzahlen über Vollbild

Zahlen über einem vollbreiten Bild oder Verlauf

Build a full-bleed section with a background image or gradient and a dark overlay, with three or four stats laid over it in white. Ensure AA contrast for numbers and labels and load the image with explicit dimensions. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Kennzahlen in Karten

Reihe umrandeter Karten mit je einer Kennzahl

Build a stats row as individual bordered cards, each with a label, a large number and a small trend indicator (arrow and percentage) with an accessible text equivalent. Cards wrap to a 2×2 grid on tablets. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Navigation8

Logo + Links + CTA

Logo links, Links mittig oder rechts, CTA ganz rechts

Build a top navigation bar: logo on the left, four or five text links in the centre or right, and a primary CTA button on the far right. Under 768 px collapse the links into a menu button that opens an accessible drawer with focus trapping and Escape to close. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Zentriertes Logo

Logo in der Mitte, Links gleichmäßig auf beide Seiten verteilt

Build a navigation bar with the logo centred and links split evenly on both sides, all vertically aligned on one row. On mobile show the logo on the left and a menu button on the right. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Mega-Menü

Vollbreites Dropdown mit kategorisierten Unterlinks

Build a navigation bar with a full-width mega menu: hovering or clicking a top-level item opens a panel with three or four columns of categorised links, each with an icon and a one-line description, plus a featured card on the right. Open on click and Enter, close on Escape and outside click, and render the panel as an accordion inside the mobile drawer. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Sidebar-Navigation

Vertikale Sidebar mit Logo, gestapelten Links und Nutzerblock

Build a vertical sidebar navigation: logo at the top, grouped links with icons and an active state in the middle, and a user block with avatar, name and menu at the bottom. Collapse to an icon-only rail on tablets and to a slide-in drawer on phones. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Schwebende Pill-Navigation

Abgerundete, vom oberen Rand gelöste Leiste mit Schatten

Build a floating pill navigation: a rounded bar detached from the top edge, centred, with logo, links and a small CTA, a soft shadow and a translucent blurred background. Shrink it slightly on scroll and fall back to a full-width bar under 640 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Transparent über dem Hero

Transparent über dem Hero, nach dem Scrollen deckend

Build a navigation bar that is transparent with light text while over the hero and becomes a solid surface with a bottom border and dark text after scrolling 40 px. Animate only background and colour, and keep a visible focus style in both states. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Command-Palette-Navigation

Ein prominentes ⌘K-Suchfeld als zentrales Element

Build a navigation bar centred on a command palette trigger: a wide search-like button showing "Search or jump to…" and the ⌘K shortcut; it opens a modal with fuzzy results grouped by pages, actions and recent items. Support arrow keys, Enter and Escape, and trap focus inside the modal. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Mobile Bottom-Navigation

App-artige Tab-Leiste unten mit Icons und Labels

Build a mobile bottom tab bar with four or five items, each an icon with a label, a clear active state and an optional badge. Respect the safe-area inset, keep touch targets at least 44 px and hide it at desktop widths in favour of the top navigation. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Kundenstimmen8

Zitatkarten in 3 Spalten

Drei Karten mit Foto, Name, Rolle und Zitat

Build a testimonials section with three quote cards side by side; each has the quote, a photo, name, role and company, with the quote first for scannability. Collapse to one column on mobile and keep card heights aligned. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Laufband

Endlos scrollende Reihe von Testimonial-Kacheln

Build a testimonials marquee: a row of compact quote tiles scrolling horizontally and looping seamlessly, pausing on hover and focus. Duplicate the list for the loop, animate with transform only, and show a static two-row grid when prefers-reduced-motion is set. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Masonry-Raster

Pinterest-artiges Raster mit unterschiedlich hohen Kundenstimmen

Build a masonry grid of testimonial cards with varying quote lengths, three columns on desktop, two on tablet and one on phones. Use CSS columns or grid with dense packing so cards keep their natural height; include a "show more" button after the first twelve. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Eine hervorgehobene Kundenstimme

Ein großes Zitat mit Foto, Name, Rolle und Firmenlogo

Build a single featured testimonial: a large quote in display type, a portrait photo, the name, role and company logo, arranged as a two-column layout with the photo on one side. Stack on mobile and keep the quote under 40 words. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Video-Testimonial-Raster

Klickbare Video-Vorschauen mit Play-Icon, Name und Firma

Build a grid of video testimonials: thumbnails with a centred play button, duration badge, and the customer name and company underneath; clicking opens an accessible modal player. Use poster images with explicit dimensions and load the player only on click. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Tweet-Wand

Karten im Stil von Social-Posts mit Avatar, Handle und Zeitstempel

Build a wall of social-post style testimonial cards: avatar, display name, handle, timestamp and post text, in a three-column grid. Link each card to the original post, keep the platform logo small and stack to one column on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Logo-Wolke

Raster oder Reihe von Kunden- und Partnerlogos mit Überschrift

Build a logo cloud: a short heading such as "Trusted by teams at" and a grid of eight to twelve monochrome customer logos with equal optical weight. Give each logo an accessible name, and wrap to three columns on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Karussell mit Punkten

Eine Kundenstimme pro Ansicht mit Punkten oder Pfeilen

Build a single-testimonial carousel showing one quote with photo, name and role at a time, with previous/next arrows and dot indicators. Support keyboard arrows and touch swipe, announce slide changes politely, and do not autoplay. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Footer5

Mehrspaltige Sitemap

Gruppierte Links, Logo, Tagline, Social-Icons und Copyright

Build a site footer with the logo and a one-line tagline on the left, three or four columns of grouped links (Product, Company, Resources, Legal) and a bottom row with copyright, language selector and social icons. Collapse the columns into accordions on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Minimal in einer Zeile

Logo, wenige Links und Copyright in einer Zeile

Build a minimal footer: logo on the left, three or four key links in the centre and the copyright on the right, all in a single row with a top border. Wrap to two rows on mobile and keep the tap targets at least 44 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Footer mit Riesenlogo

Riesige Wortmarke als Mittelpunkt, Links darum angeordnet

Build a footer with the brand wordmark set in huge type across the full width as the centrepiece, with link groups above it and a thin row of legal links and copyright below. Clip the wordmark so it never causes horizontal scrolling. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Newsletter-Footer

Newsletter-Anmeldung als Hauptelement, Links zweitrangig

Build a footer where the newsletter signup is the dominant element: heading, one sentence, an inline email form and a consent note, with the navigation links in smaller type below. Show inline validation and a success state, and put the copyright on the last row. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Footer mit Statusanzeige

Live-Systemstatus neben den üblichen Links und dem Logo

Build a footer with the usual logo and link columns plus a live system status pill ("All systems operational") with a coloured dot that links to the status page. Fetch the status client-side after hydration and fall back to a neutral state on error. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

FAQ5

Einspaltiges Akkordeon

Eine Spalte; jede Frage klappt ihre Antwort auf

Build an FAQ as a single-column accordion: each question is a button with a chevron, and the answer expands beneath it. Use aria-expanded and aria-controls, keep the answers in the DOM and hide them with CSS so search engines can read them, and allow several items to be open at once. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Zweispaltiges Akkordeon

Fragen auf zwei Akkordeon-Spalten verteilt

Build an FAQ with questions split evenly across two accordion columns to save vertical space, collapsing to one column under 768 px. Order the questions by importance top to bottom, left to right, and keep answers in the DOM. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Frage & Antwort als Chat

Fragen und Antworten als abwechselnde Chat-Blasen

Build an FAQ styled as a conversation: questions as right-aligned bubbles from a user avatar and answers as left-aligned bubbles from the brand avatar, alternating down the page. Keep it a plain list semantically (a definition list or headings and paragraphs), not a live chat widget. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Durchsuchbare FAQ

Suchfeld, das die Fragenliste beim Tippen filtert

Build an FAQ with a search input at the top that filters the list of questions as the user types, highlighting matched words and showing an empty state with a contact link when nothing matches. Filter client-side, keep the full list in the server HTML and announce the result count to screen readers. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Kategorie-Tabs

Kategorie-Tabs, die zwischen gefilterten Fragensätzen wechseln

Build an FAQ with category tabs at the top (Billing, Security, Getting started, Integrations) that switch between filtered sets of questions, each set an accordion. Follow the tabs ARIA pattern, sync the active tab with a URL hash and render all sets in the HTML. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Dashboards6

Sidebar + Inhalt

Vertikale Sidebar mit Navigation und Hauptinhaltsbereich

Build an application shell with a collapsible left sidebar (logo, grouped navigation, user block) and a main area with a top bar containing breadcrumbs, search and account menu, then the page content. Persist the collapsed state and turn the sidebar into a drawer under 1024 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Top-Navigation + Inhalt

Horizontale Navigation oben, Inhalt in voller Breite darunter

Build an application shell with a horizontal top navigation (logo, primary sections, search, notifications, avatar) and full-width content beneath with no sidebar. Show the active section with an underline and collapse the sections into a menu on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Drei-Spalten-Layout

Sidebar, Listen- oder Feed-Spalte und Detailbereich

Build a three-pane layout: a narrow navigation sidebar, a middle pane with a scrollable list or feed and a right detail panel that shows the selected item. Make the middle/detail split resizable, and on tablets and phones show one pane at a time with a back button. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Kanban-Board

Phasen-Spalten mit verschiebbaren Karten

Build a kanban board with columns for each stage, a WIP count in every column header and cards that can be dragged between columns with a drop indicator. Provide a keyboard alternative for moving cards (menu or shortcuts), announce moves to screen readers and scroll columns horizontally on small screens. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Kennzahlkarten + Diagramm

KPI-Karten oben, großes Diagramm darunter

Build a dashboard overview: a row of four KPI cards (label, value, delta versus the previous period, sparkline) above a large time-series chart with a date-range picker and series toggles. Design loading, empty and error states for every card and chart, and show units and time zone. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Leerer Zustand

Zentrierte Illustration, Überschrift und Handlungsaufforderung

Build an empty state for a dashboard page: a centred illustration or icon, a short heading, one sentence explaining what will appear here and a primary CTA to create the first item, plus a secondary link to documentation. Keep the layout inside the normal content area so navigation stays visible. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Onboarding4

Onboarding-Checkliste

Einrichtungsaufgaben mit Fortschritt und aufklappbaren Schritten

Build an onboarding checklist card: a progress bar with "2 of 5 completed", a list of setup tasks each with a checkbox state, a short description and an expandable panel with the action button. Persist completion, let users dismiss the card when done and keep it keyboard accessible. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Tour-Tooltips

Geführte Tour mit Hinweisen, die auf UI-Elemente zeigen

Build a guided product tour: a sequence of tooltip callouts anchored to real UI elements, each with a title, one sentence, step counter, next/back buttons and a skip link, with a dimmed backdrop around the highlighted element. Manage focus inside the tooltip, close on Escape and remember completion. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Modal mit Video-Rundgang

Modal mit eingebettetem Rundgang-Video und Los-geht’s-CTA

Build a welcome modal that appears on first login with a short heading, an embedded walkthrough video with a poster, and a "Get started" CTA plus a "Skip for now" link. Load the video only when the modal opens, trap focus, close on Escape and never show it again after dismissal. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Illustrierter leerer Zustand

Eigene Illustration, Überschrift, ein Satz und CTA

Build an illustrated empty state for a first-run screen: a custom illustration, a short heading, one supporting sentence and a primary CTA, optionally with a secondary "import" action. Size the illustration with explicit dimensions and hide it from screen readers. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Blog & Inhalte4

Magazin-Raster

Großer Hauptbeitrag oben, kleinere Karten im Raster darunter

Build a blog index in magazine style: one large featured post with cover image, category, title, excerpt and author on top, then a three-column grid of smaller post cards. Use consistent image aspect ratios, and collapse the grid to one column on phones. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Einspaltige Leseansicht

Klare einzelne Spalte mit angenehmer Zeilenlänge und Zeilenhöhe

Build an article page as a single reading column of 65 to 75 characters with generous line height, a title block (category, title, author, date, reading time), a lead image and styled typography for headings, lists, quotes, code and figures. Add share links and a "next article" card at the end. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Inhaltsverzeichnis in der Sidebar

Sticky-Inhaltsverzeichnis, das den aktuellen Abschnitt hervorhebt

Build a long-form documentation or article layout with the content in the centre and a sticky table of contents in the right sidebar that highlights the current section while scrolling. Generate the TOC from h2/h3 headings, use IntersectionObserver and collapse the TOC into a details element above the content on mobile. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Kartenraster mit Filtern

Beitragskarten mit Kategorie-Filtertags darüber

Build a blog index with a row of category filter chips (All plus categories) above a three-column grid of post cards with image, category, title, excerpt and date. Sync the active filter with the URL query, show a result count and an empty state, and render the full list in the server HTML. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Kontakt3

Formular + Kontaktdaten

Kontaktformular auf einer Seite, Firmendaten auf der anderen

Build a contact page as two columns: a form with name, email, company, message and consent checkbox on one side, and contact details (email, phone, address, office hours) with a small map or office photo on the other. Validate inline, show a success state and stack the columns on mobile with the form first. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Support-Kanal-Karten

Karten für Chat, E-Mail, Dokumentation und Community

Build a support page as a grid of channel cards: live chat, email, documentation and community, each with an icon, title, one sentence, expected response time and a CTA. Show availability (online, business hours) where relevant and stack to one column on phones. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Minimales Ganzseiten-Formular

Zentriertes Formular mit Überschrift, wenigen Feldern und einem Button

Build a minimal full-page contact form: a centred column with a heading, one sentence, name, email and message fields and one submit button, with a note on response time. Keep the fields large, validate inline and show a clear success state. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Hilfsseiten5

Vergleichstabelle (wir vs. Wettbewerb)

Ihr Produkt gegen Wettbewerber mit Häkchen und Strichen

Build a competitor comparison table: your product as the highlighted first column, two or three competitors as further columns, and feature rows with checks, dashes or short notes. Add a sticky header, footnotes for claims and switch to per-product cards under 768 px. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Feature-Ankündigungsbanner

Schmale Leiste oben mit „Neu“-Tag, Nachricht, Link und Schließen

Build a slim announcement bar above the navigation: a "New" tag, a one-line message, a "Learn more" link and a dismiss button, with the dismissal persisted per announcement id. Do not shift layout on load — reserve its height server-side — and keep AA contrast on the accent background. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Cookie-Banner

Karte in der unteren Ecke mit Akzeptieren, Ablehnen und Einstellungen

Build a cookie consent card anchored to the bottom corner: a short message with a privacy link and three actions — accept all, reject non-essential and settings, where settings opens a modal with per-category toggles. Do not block the page, keep equal visual weight for accept and reject, and store the choice with a version. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

404-Seite

„Seite nicht gefunden“ mit Erklärung und hilfreichen Links

Build a 404 page: a large "404", a friendly heading, one sentence, a search box or list of popular links, and CTAs back to home and support. Keep the site header and footer, return a real 404 status and emit noindex. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

Ladezustand

Skeleton-Layout, das den fertigen Inhalt mit Schimmer nachbildet

Build a loading state as a skeleton that mirrors the final layout (header, cards, table rows) with a subtle shimmer animation and no layout shift when the real content arrives. Use aria-busy on the region, disable the shimmer when prefers-reduced-motion is set and show an error state after a timeout. Match the colours, typography, spacing and corner radius of the attached screenshot or the project design tokens. Use semantic HTML, keep the layout responsive down to 360 px, make every control keyboard accessible, and use realistic copy instead of lorem ipsum.

So geht’s

  1. Die passende Struktur wählen und den Prompt kopieren.
  2. Zusammen mit einem Screenshot oder den Design-Tokens ins KI-Tool einfügen, damit das Ergebnis zur eigenen Ästhetik passt.
  3. Prompts ins Paket legen, um sie als .mdc-Dateien neben den Coding-Regeln auszuliefern.
FAQ

Über den AI Rules Builder

Ein kostenloses Browser-Tool: es erstellt eigene Coding-Regeln für Cursor, GitHub Copilot, Claude Code und Windsurf plus eine Bibliothek von UI-Prompts. Markdown-Vorschau, Kopieren und Download — nichts wird auf unsere Server hochgeladen.
Cursor (.mdc / rules), GitHub-Copilot-Anweisungen, Claude Code und Windsurf. Wählen Sie die Export-Umgebung — der Builder formatiert die Regeln für dieses Tool.
Ja, kostenlos. Auswahl und Vorschau laufen im Browser. Wir speichern Ihr Paket nicht auf einem Server — kopieren oder laden Sie die Dateien lokal herunter.
UI-Prompts sind fertige Briefs für gängige Layouts. Sie können sie demselben Paket wie Engineering-Regeln hinzufügen und gemeinsam als Markdown oder Cursor-Dateien exportieren.
Ja. Vorschau kopieren, Markdown herunterladen oder Cursor-Regeln exportieren. Für AI-Features im Produkt siehe unsere Seite zu AI- und LLM-Expertise.

Angebot in 24 Stunden

Originale REACTAPP.TOP-Leitlinien für Assistenten in React, TypeScript, Express und Operator-Systemen plus eine Bibliothek von UI-Layout-Prompts. Auswählen, Markdown prüfen, exportieren.

Brief sendenAI & LLM-Integration