Website verbessern mit KI: Apples Regeln als Skill (2026)

Ruwen Bädorf·26. September 2026·8 Min. Lesezeit

Statt „mach es hochwertiger“ bekommt Claude echte Design-Regeln: Ein kostenloser Skill übersetzt Apples Prinzipien fürs Web und findet die Kleinigkeiten, die deine Seite billig wirken lassen.

Website verbessern mit KI klappt am besten, wenn du Claude nicht um „mehr Schönheit“ bittest, sondern ihm echte Design-Regeln gibst und damit deine bestehende Seite durchchecken lässt. Genau dafür gibt es einen kostenlosen Skill, der Apples Design-Prinzipien für das Web übersetzt und Claude jede Kleinigkeit finden lässt, die auf deiner Seite falsch ist.

Die meisten schreiben ihrer KI einen Satz wie „Mach meine Website mal hochwertiger“. Heraus kommen dann mehr Farbverläufe, größere Überschriften und ein paar Emojis. Die Seite sieht danach anders aus, aber nicht besser.

Das liegt nicht an der KI. Das liegt daran, dass „hochwertig“ keine Anweisung ist, sondern ein Gefühl. Eine KI kann ein Gefühl nicht umsetzen, eine Regel aber schon.

Die Kurzfassung davon gibt es als Reel: das Video dazu findest du auf @ruwen.ai.

🔥 Willst du den Skill und den fertigen Prüf-Prompt? Im Guide Hol dir den Apple-Design-Skill für Claude stehen der Installationsbefehl und der Prompt, mit dem Claude deine Seite durchcheckt. → Guide holen

Warum Website verbessern mit KI meistens schiefgeht

Der erste Eindruck deiner Website entsteht schneller, als du blinzeln kannst. Eine Studie der Carleton University hat gezeigt, dass Menschen die optische Wirkung einer Webseite schon nach 50 Millisekunden beurteilen (Lindgaard und andere, Behaviour & Information Technology, 2006). Dieses Urteil deckte sich in der Studie weitgehend mit dem Urteil nach einer halben Sekunde.

Das Problem ist, dass dieses Urteil selten an großen Dingen hängt. Es hängt an Kleinigkeiten, die du selbst längst nicht mehr siehst. Ein Abstand ist oben 20 Pixel groß und unten 32. Ein Button ist hellgrau auf weiß und kaum lesbar. Auf der Startseite stehen vier verschiedene Schriftgrößen, obwohl zwei gereicht hätten.

Jede dieser Kleinigkeiten ist für sich harmlos. Zusammen sorgen sie dafür, dass eine Seite „irgendwie billig“ wirkt, ohne dass jemand sagen kann, warum.

Eine KI ohne Regeln sieht diese Dinge genauso wenig wie du. Sie verändert, was man ihr sagt, und rät den Rest. Deshalb wird aus „mach es hochwertiger“ so oft nur „mach es bunter“.

Website verbessern mit KI: Was der Apple-Design-Skill anders macht

Ein Skill ist ein kleines Paket aus Anweisungen und Wissen, das Claude von selbst lädt, sobald deine Aufgabe dazu passt. Wie Skills grundsätzlich funktionieren, habe ich in Claude Skills nutzen erklärt.

Der Skill, um den es hier geht, heißt apple-design und stammt vom Designer Emil Kowalski. Er fasst Apples Design-Vorträge von der Entwicklerkonferenz WWDC zusammen, vor allem den Vortrag „Designing Fluid Interfaces“ von 2018, und übersetzt sie in Regeln für das Web. Laut dem Verzeichnis skills.sh wurde er über 165.000 Mal installiert (Stand: 26. September 2026).

Der wichtigste Punkt dabei ist leicht zu übersehen. Der Skill bringt Claude nicht bei, wie Apple aussieht. Er bringt Claude bei, warum es so gut aussieht.

Das ist ein großer Unterschied. Wer den Look kopiert, hat am Ende eine Seite, die wie ein billiger Apple-Nachbau wirkt und nicht zu seiner Marke passt. Wer die Regeln dahinter übernimmt, behält seine Farben, seine Bilder und seinen Ton und macht trotzdem alles sauberer.

Im Skill stehen zum Beispiel Regeln zur Schrift: Große Überschriften bekommen engeren Zeichenabstand, kleiner Text etwas mehr, und die Hierarchie entsteht aus Gewicht, Größe und Zeilenhöhe zusammen. Es stehen Regeln zum Feedback drin: Ein Button reagiert schon beim Drücken und nicht erst beim Loslassen. Es stehen Regeln zur Orientierung drin: Auf jeder Seite muss klar sein, wo man ist, wohin man kann und wie man zurückkommt. Und es stehen Regeln zur Bewegung drin: Was von rechts hereinkommt, verschwindet auch wieder nach rechts.

Neu bauen oder reparieren: Website verbessern mit KI im Vergleich

Die meisten nutzen solche Design-Skills, um eine neue Website von Grund auf bauen zu lassen. Das funktioniert, aber es ist nicht der stärkste Einsatz.

Viel stärker ist es, eine bestehende Seite reparieren zu lassen. Deine Seite hat schon Texte, Kunden kennen sie, und bei Google ist sie vielleicht auch schon zu finden. Ein Neubau wirft all das über den Haufen, eine Reparatur behält es.

Der letzte Punkt wird oft unterschätzt. Bei einer Reparatur sagt dir Claude zu jedem Fund, welche Regel verletzt ist. Nach drei, vier Seiten siehst du diese Fehler plötzlich selbst.

So läuft Website verbessern mit KI Schritt für Schritt

Der ganze Ablauf besteht aus drei Schritten und dauert beim ersten Mal etwa so lange wie ein Kaffee.

Im ersten Schritt installierst du den Skill. Dafür brauchst du Claude Code und einen einzigen Befehl im Terminal. Danach startest du Claude Code einmal neu, und der Skill ist da.

Im zweiten Schritt öffnest du Claude Code im Ordner deiner Website und lässt die Seite prüfen. Wichtig ist, dass du Claude ausdrücklich sagst, noch nichts zu ändern. Claude soll zuerst nur suchen und eine Liste schreiben: welche Stelle, was falsch ist, welche Regel dahintersteckt und wie die Korrektur aussieht. Am Ende soll die Liste nach Wirkung sortiert sein, damit du die fünf wichtigsten Änderungen zuerst siehst.

Im dritten Schritt suchst du dir aus, was umgesetzt wird. Du gibst Claude die Nummern aus der Liste, und Claude ändert genau diese Stellen und sonst nichts. Deine Texte, deine Farben und dein Branding bleiben, wie sie sind.

Bevor Claude irgendetwas ändert, sicherst du den Ordner. Eine Kopie reicht völlig aus. Dann kannst du jede Änderung zurückdrehen, falls dir etwas nicht gefällt.

Als ich das zum ersten Mal an einer älteren Landingpage ausprobiert habe, war ich mir sicher, dass Claude nicht viel finden würde. Die Seite war ordentlich gebaut und lief seit Monaten. Claude hat trotzdem eine lange Liste geliefert: uneinheitliche Abstände zwischen den Abschnitten, zu viele Schriftgrößen, ein Button mit zu wenig Kontrast und Menüpunkte, die auf dem Handy zu klein zum Tippen waren. Keiner dieser Punkte war mir vorher aufgefallen, und nach der Korrektur wirkte die Seite deutlich ruhiger, obwohl kein einziger Text neu war.

🔥 Willst du genau diesen Prüf-Prompt? Im Guide Hol dir den Apple-Design-Skill für Claude steht der komplette Prompt für Schritt zwei und der Prompt zum Umsetzen. → Guide holen

Welche Fehler findet Claude beim Website verbessern mit KI?

Die Funde unterscheiden sich natürlich von Seite zu Seite. Ein paar Fehler tauchen aber fast überall auf, weil sie beim Bauen niemandem auffallen.

Der häufigste Fehler betrifft die Abstände. Zwischen zwei Abschnitten sind es mal 40 Pixel, mal 64 und mal 52, weil jeder Block einzeln gebaut wurde. Das Auge merkt diese Unruhe sofort, auch wenn der Kopf sie nicht benennen kann.

Der zweite Klassiker ist der Kontrast. Die internationalen Barrierefreiheits-Richtlinien verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5 zu 1 (W3C, WCAG 2.2, Kriterium 1.4.3). Hellgraue Schrift auf weißem Grund sieht elegant aus, fällt aber genau durch diese Prüfung.

Der dritte Fehler sind zu kleine Klickflächen. Apple empfiehlt für jedes antippbare Element mindestens 44 mal 44 Punkte (Apple Human Interface Guidelines, Accessibility). Kleine Icons im Menü oder winzige Links im Fußbereich liegen oft deutlich darunter.

Der vierte Fehler ist fehlendes Feedback. Ein Formular zeigt Fehler erst nach dem Absenden, oder ein Button tut nach dem Klick sichtbar gar nichts, während im Hintergrund geladen wird. Der Besucher klickt dann ein zweites Mal oder geht.

Der fünfte Fehler sind Bewegungen, die niemand bestellt hat. Elemente fliegen beim Scrollen von allen Seiten herein, und wer in seinem Gerät „weniger Bewegung“ eingestellt hat, bekommt trotzdem alles zu sehen. Der Skill achtet ausdrücklich darauf, dass diese Einstellung respektiert wird.

Website verbessern mit KI ohne Zugriff auf den Code

Nicht jede Website liegt als Ordner auf deinem Rechner. Viele Selbstständige nutzen Baukästen wie Wix, Squarespace oder WordPress mit einem fertigen Theme.

Das ist kein Hindernis. Du machst Bildschirmfotos von der Startseite und den wichtigsten Unterseiten, einmal am Computer und einmal am Handy. Diese Bilder gibst du Claude zusammen mit dem Prüf-Prompt und bittest darum, statt der Dateien die Screenshots anzusehen.

Claude liefert dir dann dieselbe Liste aus Fundstelle, Fehler, Regel und Korrektur. Die Korrekturen setzt du anschließend selbst im Baukasten um. Das dauert etwas länger, aber du weißt bei jedem Handgriff, warum du ihn machst.

Wenn du nach der Reparatur mehr aus Claude herausholen willst, lohnt sich ein Blick auf die besten Claude Skills. Dort steht unter anderem UI UX Pro Max, ein zweiter Design-Skill mit einer eingebauten Datenbank aus Stilen und UX-Regeln.

Was du beim Website verbessern mit KI beachten solltest

Der Skill ist ein Community-Projekt und kein offizielles Produkt von Apple. Er ist besonders stark bei Schrift, Feedback, Orientierung und Bewegung. Deine Farben, dein Logo und deinen Stil bestimmst weiterhin du.

Setz nicht jede Empfehlung blind um. Manche Funde widersprechen einer bewussten Entscheidung, zum Beispiel einer auffälligen Schrift, die zu deiner Marke gehört. Solche Punkte streichst du einfach von der Liste.

Und prüf das Ergebnis immer auf dem Handy. Die meisten Besucher kommen über das Smartphone, und genau dort fallen zu kleine Buttons und zu lange Zeilen am stärksten auf.

Wenn du das Prinzip dahinter einmal verstanden hast, lässt es sich auf alles übertragen. Gib einer KI eine Regel statt eines Gefühls, und sie liefert dir ein Ergebnis statt eines Versuchs.

🔥 Willst du deine Seite heute noch durchchecken? Hol dir den Apple-Design-Skill für Claude mit Installationsbefehl und fertigem Prüf-Prompt. → Guide holen

Über Ruwen Bädorf

Ich bin Ruwen Bädorf und ich baue Systeme, die mit KI von allein arbeiten. Ich helfe Selbstständigen, ihre Arbeit einmal zu bauen statt jeden Tag zu wiederholen.

• Ich baue und betreibe die komplette Reel-Fabrik auf ki-imperium.com selbst, vom Skript über den Guide bis zur Auslieferung.
• Ich arbeite täglich mit Claude, Lovable und Higgsfield und zeige genau die Abläufe, die ich selbst fahre.
• Auf Instagram veröffentliche ich diese Abläufe als Reels, jeweils mit einem Guide zum Nachbauen.

→ Folg mir auf Instagram

Weiterlesen

Wie Skills in Claude grundsätzlich funktionieren, steht in Claude Skills nutzen. Fünf weitere Skills, darunter einen zweiten für Design, findest du unter Beste Claude Skills. Was sich mit Claude Code sonst noch bauen lässt, zeigt Was kann man mit Claude Code bauen.

Fang mit einer einzigen Unterseite an, denn genau so fühlt sich Website verbessern mit KI am Anfang am leichtesten an.