Kleine Webanwendungen
Werkzeuge für konkrete Aufgaben, zum Beispiel Prüfungen, Datenerfassung, Kundenprozesse oder interne Abläufe.
Digitale Lösungen & Automatisierung
Wenn sich Arbeitsschritte ständig wiederholen, prüfe ich zuerst den Ablauf. Danach entsteht nur das, was wirklich hilft: eine einfache digitale Lösung, eine sinnvolle Verbindung zwischen Systemen oder eine klar geregelte Automatisierung.
Kurz erklärt
Automatisierung lohnt sich, wenn ein klarer Ablauf regelmäßig Zeit kostet, Fehler verursacht oder mehrfach von Hand erledigt wird. Erst wird der Prozess vereinfacht; danach wird nur das automatisiert, was stabil und nachvollziehbar bleibt.
Im Überblick
Nicht jeder Ablauf braucht neue Software. Entscheidend ist, dass die Lösung Arbeit vereinfacht und verständlich bleibt.
Werkzeuge für konkrete Aufgaben, zum Beispiel Prüfungen, Datenerfassung, Kundenprozesse oder interne Abläufe.
Wiederkehrende Schritte verbinden, wenn dadurch Zeit gespart und Fehler reduziert werden.
KI kann Entwürfe, Zusammenfassungen oder Vorarbeiten liefern. Kritische Entscheidungen bleiben kontrollierbar.
Daten zwischen vorhandenen Systemen übertragen, wenn dafür stabile und dokumentierte Schnittstellen existieren.
Nicht jede Aufgabe braucht eine neue Anwendung. Manchmal reicht eine bessere Struktur im vorhandenen System.
Mein Maßstab
Beispiel
Daten kopieren, E-Mail schreiben, Datei umbenennen, Aufgabe anlegen, Rückmeldung dokumentieren.
Daten einmal erfassen, automatisiert weitergeben und den Status an einer Stelle sehen.
Häufige Fragen
Kurze Antworten auf Fragen, die bei Websites, Shops, SEO und Betreuung immer wieder auftauchen.
Vor allem wiederkehrende, klar beschreibbare Schritte: Daten übernehmen, Informationen zusammenführen, Benachrichtigungen auslösen oder einfache Prüfungen automatisieren.
Nein. Viele Abläufe sind mit klassischen Regeln zuverlässiger und günstiger. KI ist nur sinnvoll, wenn sie für die konkrete Aufgabe einen echten Vorteil bringt.
Je nach System können Formulare, APIs, Webhooks oder kleine Webanwendungen miteinander verbunden werden. Vorher wird geprüft, ob eine Standardlösung reicht.
Ich beginne mit dem tatsächlichen Ablauf und nicht mit einem bestimmten Tool. Automatisiert wird nur, wenn der neue Prozess verständlicher und wartbarer wird.
Prozess prüfen
Beschreibe ihn in ein paar Sätzen. Ich prüfe zuerst, ob eine Automatisierung überhaupt sinnvoll ist.
Bricks Designsystem · Section-Zuordnung
Die Reihenfolge entspricht der sichtbaren Seite von oben nach unten. Grundregel: Section-Farbklasse + optionaler Größenmodifikator → Container-Klasse → Layout-/Komponentenklasse. Einzelwerte nur dort, wo das Layout wirklich seitenbezogen ist.
.page-herosection-standard section-grosscontainer-standard--section-innen-vertikal-gross; --container-breite; --container-innen-horizontal; --abstand-spaltenVerbindliche Hero-Komponente: `hero-layout` auf dem inneren Layout-Wrapper, `hero-inhalt` auf der linken Inhaltsspalte und `hero-grafik` auf der rechten Grafikspalte. Eyebrow: `text-eyebrow`; Lead/Subheadline: `text-subheadline`; Buttons: `button-gruppe`. Tablet Hochformat (≤991 px) bleibt zweispaltig; erst Mobile Landscape (≤767 px) wird einspaltig gestapelt; bei Mobile Portrait (≤478 px) stehen die Buttons untereinander. Vorhandene individuelle Breakpoint-Werte für Spaltenbreite oder Textausrichtung in Bricks entfernen.
.answer-bandsection-standard section-kompaktcontainer-standard--section-innen-vertikal-kompakt; --container-breite; --container-innen-horizontal; --abstand-spalten; --farbe-rahmenKompakter Antwortblock. Für die asymmetrische 0,72/1,28-Aufteilung das bestehende Answer-Grid als eigene Komponentenklasse beibehalten. Eyebrow: Klasse `text-eyebrow`.
.service-contextsection-standardcontainer-standard--farbe-weiss; --farbe-rahmen; --container-breite; --container-innen-horizontal; --abstand-elemente; --abstand-inhaltsgruppeKompakte Leistungsnavigation. Standard-Section-Padding nicht verwenden; eigenes Komponentenlayout auf Basis der Design-Tokens.
.sectionsection-standardcontainer-standard--section-innen-vertikal; --farbe-weiss; --farbe-text; --container-breite; --container-innen-horizontal; --abstand-inhaltsgruppeNormale Inhaltssektion auf weißer Fläche. Eyebrow: Klasse `text-eyebrow`.
.section.section-darksection-dunkelcontainer-standard--section-innen-vertikal; --farbe-dunkel; --farbe-text-invers; --container-breite; --container-innen-horizontal; --abstand-spaltenDunkle Section. Überschriften und Links erben die inverse Textlogik aus dem Designsystem. Eyebrow: Klasse `text-eyebrow`.
.sectionsection-standardcontainer-standard--section-innen-vertikal; --farbe-weiss; --farbe-text; --container-breite; --container-innen-horizontal; --abstand-spaltenNormale Inhaltssektion auf weißer Fläche. Eyebrow: Klasse `text-eyebrow`.
.section.faq-sectionsection-standardcontainer-standard--section-innen-vertikal; --farbe-weiss; --farbe-text; --container-breite; --container-innen-horizontal; --abstand-inhaltsgruppeNormale Inhaltssektion auf weißer Fläche. Eyebrow: Klasse `text-eyebrow`.
.section.section-softsection-dezentcontainer-standard--section-innen-vertikal; --farbe-grau-hell; --farbe-text; --container-breite; --container-innen-horizontal; --abstand-elemente; --radius-grossDezente Flächenabwechslung für ruhige Inhalts- oder CTA-Bereiche. Eyebrow: Klasse `text-eyebrow`.
Nur für die Umsetzung
Diese Angaben gehören in SEOPress bzw. in die redaktionelle/technische Umsetzung. Den gesamten grünen Arbeitsbereich auf der Live-Website nicht als sichtbaren Inhalt übernehmen.
Global: SEOPress Knowledge Graph auf „Person“ mit echten, konsistenten Kontaktdaten und nur tatsächlich vorhandenen Profilen (sameAs) pflegen. XML-Sitemap und Open Graph aktivieren. FAQ-Inhalte sichtbar lassen, aber FAQ-Schema nicht als Rich-Result-Strategie einplanen.
Die Seite nativ in Bricks aufbauen. Zusätzlich zu Layout und Breakpoints gelten verbindlich die Kapitel Barrierefreiheit, Datenschutz und KI-Suche. Öffentliche Texte nennen weiterhin nur WordPress und WooCommerce, nicht den Pagebuilder.
Bricks-Anweisung für diese Seite öffnen →