Das Weber Webdesign-System · Für Unternehmer, Selbstständige & Freelancer
Kein Bock auf teure Agenturpakete? Kein eigener Webdesigner im Unternehmen? Oder du willst als Freelancer Kundenwebsites bauen — mit einem System statt improvisierten Einzellösungen? Hier lernst du, wie du mit KI, VS Code und einem klaren Workflow professionelle Websites planst, baust und live stellst.
Du suchst eine Website für deinen Betrieb? Hier entlang.
Wenn du dich in einer davon erkennst — dann ist dieses Programm für dich.
Jede kleine Änderung kostet Geld und dauert Tage. Ich bin komplett abhängig von meinem Webdesigner.
AgenturabhängigkeitIch traue mich nicht, etwas anzufassen — aus Angst, die ganze Seite kaputtzumachen.
Angst vor technischen FehlernIch weiß nicht mal, wem meine Domain, das Hosting oder der Quellcode gehört.
Keine Kontrolle über eigene ZugängeMeine Website läuft irgendwie — aber sie bringt kaum Anfragen und ich weiß nicht warum.
Website ohne WirkungGoogle Fonts, Cookies, Datenschutzerklärung — ich weiß nie genau, was ich wirklich brauche.
DSGVO-UnsicherheitIch weiß was ich mache — aber ich weiß nicht, wie ich das auf meiner Website verständlich erklären soll.
Keine überzeugenden Texte23 Module in 9 Phasen — KI-First, dann Website-System — plus 3 Praxisprojekte, Abschlussprojekt und 4 Bonus-Module. Alles aus echter Praxis, nichts aus dem Lehrbuch.
Phase 0 · Schnellstart
Bevor du mit KI oder Code anfängst: die Shortcuts, Workflows und Grundeinstellungen, die dir täglich Zeit sparen. Kleine Investition, dauerhafter Gewinn.
Phase 1 · KI verstehen
VS Code, Git und GitHub Copilot als vollständige Arbeitsumgebung einrichten. Du lernst globale vs. Workspace-Einstellungen, dein GitHub-Budget planen und Copilot von Anfang an richtig konfigurieren.
Parameter, Temperature, Context Window — was steckt wirklich hinter modernen Sprachmodellen? Du lernst Halluzinationen und Bias realistisch einschätzen und weißt danach was du der KI vertrauen kannst.
Phase 2 · KI richtig anweisen
Die universellen Kommandos die in jedem KI-Tool funktionieren: @, #file, #codebase, Slash Commands — und wie du Ausgabeformat, Länge und Scope direkt steuerst.
Prompts aus Ziel, Kontext, Aufgabe und Format aufbauen. Rollen, Metaprompts und Beispiele einsetzen — und schwache Prompts durch systematische Iteration in 4 Schritten verbessern.
Was du der KI gibst, bestimmt was sie zurückgibt. Relevanten Kontext auswählen, unnötigen entfernen — und das RAG-Grundprinzip praktisch einordnen.
Verlässliches Standardverhalten für KI formulieren: wann fragen, wann planen, wann direkt umsetzen. Plus: eine wiederverwendbare Metainstruction die in jedem Projekt funktioniert.
Phase 3 · Projects und KI-Gedächtnis
Projects in ChatGPT, Claude und Gemini als dauerhaften Arbeitsraum einrichten. Instructions, Dateien und Chat-Aufträge klar voneinander trennen und Projektwissen konsistent halten.
Drei Gedächtnisebenen: Projects als Arbeitsgedächtnis, Markdown als Langzeitgedächtnis, Git als Versionsgedächtnis. So briefst du jede neue KI-Session ohne zu wiederholen.
Claude, ChatGPT und Gemini Memory im Vergleich. Wer sein Wissen als portable Markdown-Dateien organisiert, ist unabhängig vom Anbieter — und wechselt ohne Datenverlust.
Phase 4 · Skills, Agenten und Artefakte
Ein Skill ist eine wiederverwendbare Arbeitsanweisung. Einmal geschrieben, in jedem Projekt nutzbar. Du lernst die Struktur, erstellst deinen ersten eigenen Skill und versionierst ihn mit Git.
Ask, Edit, Agent Mode, Inline Modify, Autocompletion — jeder Modus hat seine Stärken. Du lernst sie vergleichen, kombinieren und weißt wann ein Agent sinnvoll ist und wann er mehr schadet als nützt.
Copilot konfigurieren, Deny-Regeln setzen, Secrets schützen: settings.json, .github/copilot-instructions.md und Pre-Commit-Hooks als Sicherheitsnetz für deinen Agentenworkflow.
HTML-Artefakte als sofort einsetzbare lokale Werkzeuge: Rechner, Checklisten, Generatoren — in einer Stunde gebaut, offline nutzbar, kein Server notwendig.
Phase 5 · Konnektoren, MCP und APIs
KI und externe Dienste verbinden — aber sicher. Konnektoren, MCPs und APIs unterscheiden, Risiken wie Prompt Injection und Drittlandtransfer kennen und das Prinzip minimaler Rechte anwenden.
Phase 6 · Praxisprojekte
Eine API anhand belastbarer Quellen systematisch untersuchen und dokumentieren. Du erstellst einen wiederverwendbaren Skill und einen vollständigen Forschungsbericht mit Limits-, Preis- und Risikotabelle.
Einen KI-Konnektor nach Funktion, Rechten und Risiken systematisch bewerten. Das Ergebnis: eine Bewertungsmatrix mit klarer Handlungsempfehlung die du bei jedem neuen Konnektor einsetzen kannst.
Ein vollständiges portables Projektgedächtnis aufbauen: alle sechs Kern-Markdown-Dateien, versioniert mit Git, getestet in einer neuen KI-Session — ohne dass du etwas erklären musstest.
Phase 7 · Das Website-System
Das Grundverständnis das dir niemand abnimmt: HTML, CSS und JavaScript, Frontend vs. Backend, TypeScript und SCSS grob einordnen — und das komplette Web-Vokabular vom Hero bis zum Burger-Menü.
Schlechte Projekte beginnen nicht beim Code — sie beginnen beim Gespräch. Du führst ein vollständiges Briefing durch, klärst Scope und Feedbackrunden — und überführst alles in context.md.
Vom leeren Ordner zur ersten fertigen Kundenseite. Copilot strukturiert einsetzen, Ask-, Edit- und Agent-Mode kombinieren — und den echten Build-Iterate-Deploy-Rhythmus verinnerlichen.
F12 ist dein wichtigstes Debugging-Werkzeug. Du lernst Elements, Console, Network und Mobile View — und wie du KI-generierten Code kritisch prüfst und die Debugging-Schleife mit git diff schließt.
Professionelle Designs entstehen nicht durch Zufall. Farbpaletten, Kontraste, Typografie, CSS-Variablen — und warum self-hosted Fonts und WebP-Bilder der Standard sind.
Mobile-First von innen verstehen, PHP-Kontaktformular mit Validierung und Honeypot bauen — und die WCAG-AA-Mindestanforderungen für Tastatur, Labels und Kontrast einhalten.
Phase 8 · Launch und Geschäft
Alles was vor dem Go-Live erledigt sein muss: Title, Description, Open Graph, sitemap.xml, robots.txt, Hosting, DNS, HTTPS, Datenschutz, Cookie-Entscheidung und sichere Übergabe an den Kunden.
Abschlussprojekt
Du zeigst was du gelernt hast. Baue ein vollständiges Projekt mit KI-Gedächtnis, Git und Website — mit context.md, instructions.md, Qualitätsprüfung und vollständiger Übergabedokumentation.
Bonus · Extras
Lokale KI-Modelle mit LM Studio einrichten und offline betreiben. Du lernst die Datenschutzvorteile einschätzen und weißt wann lokale Modelle sinnvoll sind — und wann Cloud besser passt.
TypeScript und SCSS werden dir in Projekten begegnen. Dieser Bonus gibt dir genug Orientierung um sie zu lesen, zu verstehen und einzuordnen — ohne tiefen Einstieg.
Du brauchst vielleicht keine neue Website — du brauchst erst einen klaren Blick auf die, die du hast. Dieser Check führt dich durch fünf Bereiche und gibt dir eine ehrliche Bewertung.
Texte, Bilder, Öffnungszeiten, neue Leistungen, Buttons — all das lernst du selbst anzupassen. Sicher, lokal getestet, dann hochgeladen. Kein Warten mehr auf Dritte.
Der Baukasten existiert bereits — kein Versprechen, sondern Beweis
Fertige Designs für verschiedene Branchen. Nicht Mockups — funktionierende HTML/CSS-Seiten, die ich aktiv in Kundenprojekten einsetze.
Über Markus Weber
Ich bin Markus Weber aus dem Rheinland. Ich baue Websites für echte Kunden — mit dem System, das du hier siehst. Kein aufgeblähtes CMS, keine Abo-Fallen, keine leeren Versprechen über Google-Rankings.
Das Designsystem, die Templates, der KI-Workflow — das ist kein Konzept, das ich fürs Programm entwickelt habe. Das ist mein tatsächlicher Arbeitsalltag. Ich gebe ihn als System weiter.
Das Ergebnis ist reines HTML, CSS und JavaScript — kein Page-Builder, kein Framework-Overhead. Seiten, die ich ausliefere, sind schnell, wartbar und direkt übergabefertig. Was du im Programm lernst, ist dieser Workflow: 99 % des Codes schreibt Copilot — du steuerst das Design, prüfst das Ergebnis und lieferst sauber ab.
Dein nächster Schritt
Handlungsfähig, nicht abhängig
Du verstehst deine Website, kannst Änderungen selbst umsetzen und weißt, was Dienstleister dir erzählen — ob du für Kunden baust oder deine eigene Seite steuerst.
KI-Workflow statt Raten
Kein Trial-and-Error, keine generischen Prompts. Du bekommst einen erprobten Ablauf mit KI — für Texte, Code, Design-Entscheidungen und technische Probleme.
Direkt anwendbar
Das System funktioniert für die eigene Firmenwebsite genauso wie für Kundenprojekte. Wer es umsetzt, ist nach dem Kurs handlungsfähig — nicht nur informiert.
Das Erstgespräch ist kein Verkaufsgespräch. Ich erläutere den Aufbau des Programms und wie ich es in meiner eigenen Arbeit einsetze. Du beschreibst deine Ausgangssituation und deine Ziele. Auf dieser Basis entscheiden wir gemeinsam, ob das Programm der richtige nächste Schritt für dich ist — klar, direkt und ohne Verpflichtung.
Ehrliche Antworten — ohne Agentur-Sprech.
Nein — aber es hilft. Wer schon jemanden im Kopf hat, den er als ersten Kunden ansprechen könnte, kann das Programm vom ersten Tag an direkt anwenden. Wir arbeiten dann mit diesem konkreten Fall. Wenn du noch bei null startest: kein Problem. Positionierung, Akquise-Ansätze und Erstgespräche sind fester Teil des Systems.
Nein. Das System arbeitet mit HTML, CSS und JavaScript — keine komplexen Frameworks. Ich zeige dir, wie das funktioniert, und die Templates sind so aufgebaut, dass du sie ohne Entwicklerhintergrund anpassen kannst. Grundlegendes technisches Interesse hilft.
Das klären wir im Vorgespräch. Es ist kein Selbstlernkurs zum Durchklicken — sondern persönlicher Austausch, echte Unterlagen aus meiner Praxis und konkrete Umsetzungsbegleitung. Genaueres besprechen wir nach dem ersten Gespräch.
Nein. Das Programm startet bei Null: Positionierung, Angebotspakete, Kaltakquise-Ansätze — alles ist Teil des Systems. Du brauchst keine bestehenden Projekte, nur die Bereitschaft, loszulegen.
Das hängt von dir ab. Wer das System konsequent umsetzt und aktiv Kunden anspricht, kann innerhalb weniger Wochen erste Projekte abschließen. Es gibt keine Garantie — aber ich zeige dir einen Weg, der in der Praxis funktioniert.
Ja, es gibt 49-€-Kurse. Die geben dir Informationen. Dieses Programm gibt dir ein funktionierendes System aus echter Praxis: strukturierter Workflow, fertiges Designsystem, Vorlagen, die du sofort einsetzen kannst. Der Unterschied liegt nicht im Preis — sondern in dem, was du danach kannst.
Kein Pflicht, aber sinnvoll. Die KI-Workflows im Programm funktionieren auch mit kostenlosen Zugängen. Ein Abo (z. B. Microsoft Copilot Pro, ~22 €/Monat) gibt dir schnellere Modelle und höhere Limits — ohne es kannst du trotzdem mitmachen, wirst aber an manchen Stellen langsamer vorankommen.
Noch eine offene Frage? Stell sie im Gespräch.
Kostenloses Gespräch anfragenSchritt 1 von 4
Was beschreibt deine aktuelle Situation?
Wähle alles was zutrifft.
Was wäre das Wichtigste für dich?
Wir melden uns innerhalb von 24 Stunden.
Bitte Name und E-Mail-Adresse ausfüllen.
Deine Angaben werden nur zur Bearbeitung deiner Anfrage verwendet. Kein Newsletter, keine Weitergabe an Dritte.
Dein E-Mail-Programm sollte sich gerade geöffnet haben — mit allem vorausgefüllt. Einfach auf Senden klicken.
E-Mail öffnen & senden →Der Button öffnet dein Standard-E-Mail-Programm (z.B. Outlook, Apple Mail). Bei webbasierten Clients (Gmail im Browser) direkt an contact@weberwebdesign.de schreiben.
