Apple-Design-Skill für Claude: Deine Website prüfen und verbessern
Deine Website funktioniert. Aber irgendwie wirkt sie noch nicht so hochwertig, wie dein Angebot eigentlich ist? Die Schrift fühlt sich beliebig an, beim Klicken passiert zu wenig, und die Animation lenkt eher ab, als zu helfen.
„Mach das schöner“ ist dafür ein ziemlich vager Auftrag. Der kostenlose Skill apple-design gibt Claude konkrete Designprinzipien an die Hand. Hier bekommst du den direkten Link, die Einrichtung und drei fertige Aufträge: installieren, prüfen, verbessern.
Der Skill und was er wirklich kann
Ein Skill ist eine feste Arbeitsanleitung für deine KI. Dieser hier stammt aus der kostenlosen Sammlung von Emil Kowalski. Er überträgt Prinzipien aus Apples Design-Vorträgen auf Webseiten: verständliche Rückmeldungen beim Klicken, flüssige Bewegungen, sinnvolle Tiefe und gut abgestimmte Schrift.
Das ist kein offizielles Apple-Produkt und auch keine vollständige Kopie aller Apple-Richtlinien. Du bekommst eine praktische Auswahl für Web-Oberflächen. Deine eigenen Farben, Texte und dein Angebot bleiben die Grundlage. Der Skill soll deine Seite klarer und angenehmer machen.
Am Ende hast du: einen eingerichteten Skill, eine priorisierte Liste konkreter Schwachstellen und eine überprüfbare Verbesserung deiner bestehenden Seite. Starte mit einer Seite und den drei wichtigsten Punkten.
Was du dafür brauchst
- ✅ Claude Code mit Zugriff auf den Projektordner deiner Website.
- ✅ Die Webadresse oder eine lokal laufende Vorschau deiner Seite.
- ✅ Für den Installationsbefehl: Node.js mit dem Werkzeug npx. Wenn das fehlt, kann Claude dich durch die Einrichtung führen.
- ✅ Eine gesicherte Version deiner Website, damit du Änderungen vergleichen und zurücknehmen kannst.
Du musst dafür nicht selbst programmieren. Du solltest aber wissen, welche Seite du verbessern möchtest und was Besucher dort tun sollen: einen Termin buchen, dein Angebot verstehen oder sich eintragen. Der Skill selbst ist kostenlos; für das verwendete KI-Tool können Kosten entstehen.
1. Den Apple-Design-Skill installieren
Öffne dein Website-Projekt in Claude Code und kopiere diesen Auftrag hinein. Er richtet nur den gewünschten Skill ein. Er verändert noch keine Website.
Bitte richte den Skill apple-design aus dieser offiziellen Sammlung für mein aktuelles Website-Projekt ein: https://github.com/emilkowalski/skills Lies zuerst die aktuelle Installationsanleitung und den Inhalt des Skills. Prüfe, ob Node.js und npx vorhanden sind. Falls etwas fehlt, erkläre mir den nächsten Schritt in einfachen Worten. Installiere ausschließlich apple-design für Claude Code in diesem Projekt. Verwende dafür nach Prüfung der offiziellen Anleitung: npx skills@latest add emilkowalski/skills --skill apple-design --agent claude-code Überschreibe keine vorhandenen Anpassungen ungefragt. Zeige mir anschließend, wo der Skill liegt und wie ich ihn aufrufe. Verändere noch keine Website.
Wenn du lieber selbst installierst: Die Befehlszeile im Auftrag ist der vollständige Befehl. Öffne dafür das Terminal, also das Textfenster für Computerbefehle, im Projektordner. Ohne zusätzliche globale Option gilt die Installation für dieses Projekt.
Die Sammlung empfiehlt die Installation über das Skills-Werkzeug. Die Auswahl --skill apple-design begrenzt sie auf diesen Skill; --agent claude-code wählt Claude Code aus.
2. Deine Website prüfen lassen
Ersetze die Stellen in eckigen Klammern durch deine Angaben. Je klarer Zielgruppe und Ziel der Seite sind, desto hilfreicher wird das Ergebnis. Eine schöne Animation bringt wenig, wenn niemand den Buchungsbutton findet.
Nutze den Skill apple-design und prüfe diese bestehende Website: [URL ODER LOKALE VORSCHAU] Meine Zielgruppe: [ZUM BEISPIEL SELBSTSTÄNDIGE BERATER] Mein Angebot: [DEIN ANGEBOT] Die wichtigste Aktion auf der Seite: [ZUM BEISPIEL ERSTGESPRÄCH BUCHEN] Schau dir die Seite im Browser auf dem Handy und am großen Bildschirm an. Wenn du sie nicht selbst öffnen kannst, sag das und fordere passende Screenshots an. Erfinde keine Beobachtungen. Prüfe mit dem Skill vor allem Schrift, Rückmeldungen beim Klicken, Bewegung und räumliche Klarheit. Prüfe ergänzend mit deiner allgemeinen Design-Kompetenz Abstände, Aufbau und Blickführung. Gib mir die fünf wichtigsten Verbesserungen, sortiert nach Nutzen für Besucher. Nenne zu jedem Punkt: - die konkrete Stelle auf meiner Seite, - was dort nicht gut funktioniert, - wie du es ändern würdest, - warum das meine Besucher unterstützt. Behalte meine Marke, Inhalte und Positionierung bei. Ändere noch keinen Code. Sprich verständlich und vermeide Fachwörter.
Lass dir konkrete Stellen zeigen. „Mehr Weißraum“ allein ist noch keine hilfreiche Diagnose. „Zwischen Überschrift und Erklärung ist so viel Platz, dass sie auf dem Handy nicht mehr zusammen sichtbar sind“ ist eine Beobachtung, mit der du arbeiten kannst.
3. Verbesserungen gezielt umsetzen
Wähle zunächst die drei sinnvollsten Punkte aus. Claude braucht zum Umsetzen Zugriff auf den Code deiner Website. Eine öffentlich erreichbare Webadresse allein reicht dafür nicht. Bei einem geschlossenen Baukastensystem lässt du dir stattdessen die Änderungen für dessen Editor erklären.
Setze jetzt die Punkte [NUMMERN DEINER AUSWAHL] aus der Prüfung um. Nutze dabei apple-design. Arbeite in einer nachvollziehbaren, gesicherten Version meines Website-Projekts. Erhalte meine Texte, Farben, Links, Formulare, Messung und bestehende Funktionen, soweit die gewählten Änderungen sie nicht betreffen. Wenn du keinen Zugriff auf den bearbeitbaren Code hast, stoppe und erkläre mir, was du benötigst. Behaupte keine Umsetzung, die du nicht ausführen kannst. Prüfe anschließend die geänderten Stellen auf Handy und großem Bildschirm. Teste die betroffenen Links, Buttons und Formulare. Berücksichtige Tastaturbedienung und Menschen, die reduzierte Bewegung eingestellt haben. Zeige mir vergleichbare Vorher-Nachher-Ansichten derselben Stellen. Erkläre mir kurz, was sich verbessert hat und ob noch etwas offen ist. Veröffentliche erst nach meiner Freigabe.
So arbeiten wir auch mit den fertigen Setups und Workflows, die ich mit meinen Kunden teile: ein klares Ziel, ein begrenzter Auftrag und anschließend ein Blick auf das echte Ergebnis.
Fünf Dinge, die du selbst kontrollierst
- Ist mein Angebot schneller verständlich? Schau fünf Sekunden auf die Seite. Erkennst du, wem du wobei hilfst?
- Ist die Schrift auf dem Handy lesbar? Prüfe mit deinem eigenen Telefon, ohne die Seite größer zu ziehen.
- Funktioniert die wichtigste Aktion? Klicke den Buchungs- oder Eintragungsweg vollständig durch.
- Hilft die Bewegung? Eine Animation sollte Orientierung oder Rückmeldung geben. Wenn sie nur Zeit kostet, lass sie weg.
- Ist es noch meine Marke? Deine Seite braucht keine Apple-Kopie. Sie braucht Regeln, die zu deinen Kunden und deinem Angebot passen.
Häufige Fragen
Ist der Apple-Design-Skill wirklich kostenlos?
Ja. Die verlinkte Sammlung wird unter MIT-Lizenz bereitgestellt. Das betrifft den Skill; dein Claude-Zugang und andere benötigte Dienste können kostenpflichtig sein.
Funktioniert das auch mit meiner Coaching- oder Berater-Website?
Die Prinzipien lassen sich auf solche Seiten anwenden. Wie viel Claude direkt verändern kann, hängt von deinem Website-System und dem verfügbaren Zugriff ab. Eine Prüfung anhand echter Screenshots funktioniert auch dann, wenn du keinen Code zur Verfügung hast.
Kann ich das einfach in einen normalen Claude-Chat einfügen?
Die Installationsanleitung hier richtet sich an Claude Code. In einem normalen Chat ist ein Terminal-Befehl noch keine Installation. Du kannst dort die öffentlich lesbaren Regeln und Screenshots als Grundlage für eine Besprechung verwenden; direkte Änderungen an deinem Website-Projekt brauchen einen passenden Zugriff.
Garantiert mir der Skill mehr Anfragen?
Nein. Eine verständliche und angenehm bedienbare Seite kann helfen. Ob mehr Anfragen kommen, hängt auch von Angebot, Zielgruppe, Vertrauen und Besuchern ab. Prüfe das Ergebnis an deinem tatsächlichen Buchungs- oder Eintragungsziel.
Keine Lust, alles selbst einzurichten?
In meiner kostenlosen Community kannst du jederzeit in einen bezahlten Plan, Premium oder VIP, upgraden. Dort bekommst du meine fertigen Setups und Workflows, die Claude an dein Business anpassen kann. Du beginnst also mit einer Vorlage statt mit einer leeren Seite.
Dein nächster Schritt
Nimm deine wichtigste Angebotsseite. Lass sie mit dem Prüfauftrag ansehen und wähle die drei Punkte mit dem größten Nutzen für deine Besucher. Dann kannst du selbst beurteilen, ob die neue Version wirklich besser ist.
PS: Falls du über „Kommentiere APPLE“ hierher gekommen bist: Die DM kam von meinem selbstgebauten System. Wie du dir das baust, zeige ich dir in meiner kostenlosen Community: Hier geht’s direkt zum Video. 😉