danielmiessler/LifeOS

Sprachbenachrichtigung (ERSTER ERFORDERLICHER SCHRITT)

curl -s -X POST http://localhost:31337/notify \
  -H "Content-Type: application/json" \
  -d '{"message": "Running the Webdesign skill", "voice_enabled": true}' > /dev/null

Was es tut

Entwirft und integriert Web-Oberflächen über zwei Pfade. ClaudeDesign steuert das Produkt claude.ai/design von Anthropic über die Interceptor-Skill und integriert das Ergebnis in Ihre Codebasis. DirectDesign schreibt das Design inline unter Verwendung der Open-Source-Frontend-Design-Philosophie von Anthropic, die aus einer lokalen Referenz geladen wird. Standard-Routing: kurze, ad-hoc-Arbeiten in der Codebasis gehen an DirectDesign; mehrseitige oder teilbare Prototypen gehen an ClaudeDesign.

Das Problem

Gutes Web-UI zu produzieren bedeutet normalerweise entweder, mit einem visuellen Tool zu kämpfen, das Ihre echte Codebasis nicht berühren kann, oder von Grund auf von Hand zu codieren und jedes Mal auf die gleichen generischen Standardeinstellungen zu stoßen. Die beiden Fehlermodi ziehen in entgegengesetzte Richtungen: Visuell-orientierte Tools liefern Poliertheit, aber eine Übergabelücke, während direktes Schreiben von Code Integration, aber flache Ästhetik bietet. Diese Skill bietet beide Wege unter einem Dach – eine visuelle Rundreise durch claude.ai/design, wenn Review wichtig ist, oder inline-Design mit einer echten ästhetischen Doktrin, wenn Geschwindigkeit und Iteration in der Codebasis wichtig sind – und leitet basierend auf der Anfrage zum richtigen Pfad weiter.

Wie es funktioniert

Webdesign umfasst drei Pfade zur Erstellung von Web-UI. Wählen Sie den passenden Pfad; nennen Sie Optionen beim Namen, wenn die Absicht mehrdeutig ist. Wir steuern immer die jeweils aktuelle Version von Claude Design – es gibt keine feste Version.

Pfad 1 – DirectDesign (Standard-Arbeitspferd; {{DA_NAME}} schreibt das Design inline)

{{DA_NAME}} schreibt das Design direkt mit der Open-Source-frontend-design-ästhetischen Doktrin von Anthropic, die inline geladen wird. Der tragende Prompt-Inhalt wird von github.com/anthropics/skills/tree/main/skills/frontend-design (MIT-lizenziert) in References/FrontendDesignPhilosophy.md gespiegelt – Register-Liste, Anti-Standard-Regeln, Type-Pair-Rezepte, Bewegungsvokabular, Farbdisziplin. In sich geschlossen: keine Laufzeitabhängigkeit, kein Browser, keine Authentifizierung. Dies ist der Pfad, der tatsächlich jedes reale Design ausgeliefert hat, das diese Skill produziert hat. Workflow: DirectDesign.

Pfad 2 – Native Claude Design CLI (bevorzugt für Code-Integration + Design-System-Synchronisation)

Anthropic hat erstklassige /design- und /design-sync-Befehle in Claude Code ausgeliefert (Juni 2026, GA auf Pro/Max/Team/Enterprise – offiziell: support.claude.com/en/articles/14604416). /design-sync zieht das reale Designsystem einer Codebasis in Claude Design und schiebt Änderungen zurück; /design erstellt und bearbeitet Designs vom Terminal aus. Dies sind die deterministischen, erstklassigen Ersatz für die handgemachte Interceptor-Handoff-Bundle-Apparatur – bevorzugen Sie sie für alles Code-bezogene. Workflow: NativeDesignSync.

Pfad 3 – ClaudeDesign über Interceptor (EXPERIMENTELLER visueller Review-Fallback)

⚠️ Nicht verifiziert und derzeit nicht funktionsfähig. Dieser Pfad steuert die claude.ai/design-Web-Canvas über die Interceptor-Skill für visuell-orientierte Reviews. Er erfordert eine authentifizierte claude.ai-Sitzung im interceptor-test-Chrome-Profil, das derzeit nicht eingeloggt ist, und er wurde noch nie Ende-zu-Ende ausgeführt (jeder reale Durchlauf dieser Skill verwendete DirectDesign). Verwenden Sie diesen Pfad nur, wenn Sie speziell die visuelle Web-Canvas möchten UND die Anmeldung zuerst eingerichtet haben. Workflows: CreatePrototype, ExtractDesignSystem, RefinePrototype, WebsiteToRedesign, ExportToCode, IntegrateIntoApp, DeployDesign. Tool: DriveClaudeDesign.ts.

Routing-Regel

Wenn der Benutzer nach „einem schönen Design“ / „Design etwas“ fragt, ohne einen Pfad zu nennen:

• Standardmäßig zu DirectDesign für kurze, ad-hoc-Arbeiten in der Codebasis – Geschwindigkeit und Iteration im Kontext.
• Verwenden Sie das native CLI (/design-sync) , wenn die Aufgabe darin besteht, ein reales Codebasis-Designsystem zu synchronisieren oder code-gebundene Designarbeit zu leisten und die Befehle verfügbar sind.
• Greifen Sie nur zu ClaudeDesign (Pfad 3) , wenn visueller Web-Canvas-Review explizit gewünscht wird, und denken Sie daran, dass es die einmalige Anmeldung benötigt und nicht erprobt ist.

Integrationsbewusster Betrieb (KRITISCH)

Diese Skill wird häufig als Unter-Schritt von größeren Seitenarbeiten aufgerufen – Blogbeitrag schreiben, Admin-Dashboard bauen, Marketing-Seite ausliefern. Wenn sie aus einem übergeordneten Kontext aufgerufen wird, tut die Skill:

• Akzeptiert bestehenden Projektkontext als Eingabe: Framework, Token-Datei, Komponentenverzeichnis, Bereitstellungsziel.
• Produziert Ausgabe als Diffs / Patches gegen die bestehende App, nicht als isolierte HTML-Dateien.
• Respektiert vorhandene Design-Token und Komponentenmuster – überschreibt sie NICHT, es sei denn, der Benutzer fordert ein vollständiges Redesign an.
• Leitet Integrationsarbeit durch Workflows/IntegrateIntoApp.md.

Wenn sie eigenständig für ein Greenfield-Design aufgerufen wird, produziert die Skill einen in sich geschlossenen Prototypen und baut optional eine neue App auf.

Anpassung

Benutzerspezifische Design-Präferenzen (Farbpalette, Typografie, Spacing-Raster, Animations-Timing, Framework-Standards) leben unter:

~/.claude/LIFEOS/USER/CUSTOMIZATIONS/SKILLS/Webdesign/
├── PREFERENCES.md     # Design-Token, bevorzugte Frameworks
├── README.md
└── EXTEND.yaml

Die Skill liest PREFERENCES.md, falls vorhanden, und übergibt diese Token in Claude Designs Brief und jedes nachgelagerte Handoff-Bundle. Ohne Anpassungsschicht verwendet die Skill standardmäßig Claude Designs eigene System-Extraktionsausgabe.

Workflow-Routing

Wenn Sie einen Workflow ausführen, geben Sie diese Benachrichtigung aus:

Running **WorkflowName** in **Webdesign**...

Workflow	Auslöser	Datei
DirectDesign (Pfad 1 – Standard, {{DA_NAME}} schreibt inline)	„mach ein schönes Design", „design das direkt", „mach das Design selbst", „design etwas Cooles", „Frontend-Ästhetik", „brutalistisches/editoriales/retro/maximalistisches UI", jede kurze ad-hoc-Design-Anfrage ohne „Prototyp" / „Mockup" / „Claude Design"	Workflows/DirectDesign.md
NativeDesignSync (Pfad 2 – bevorzugt für Code-Arbeiten)	„/design", „/design-sync", „Design Sync", „Designsystem synchronisieren", „Designsystem in Claude Design ziehen", „Code zurück zu Claude Design schieben", „nativer Design-Befehl"	Workflows/NativeDesignSync.md
CreatePrototype (Pfad 3 – experimentell, steuert claude.ai/design)	„einen Prototypen entwerfen", „Prototyp erstellen", „Mockup", „ein Design bauen", „Claude Design", „claude.ai/design verwenden"	Workflows/CreatePrototype.md
ExtractDesignSystem (Pfad 3)	„Designsystem extrahieren", „Token ziehen von", „Marke extrahieren"	Workflows/ExtractDesignSystem.md
RefinePrototype (Pfad 3)	„iterieren auf", „verfeinern", „Abstand anpassen", „Farbe ändern"	Workflows/RefinePrototype.md
WebsiteToRedesign (Pfad 3)	„diese Seite neu designen", „diese URL neu bauen", „modernisieren"	Workflows/WebsiteToRedesign.md
ExportToCode (Pfad 3-Fallback – /design-sync bevorzugen)	„in Code exportieren", „an Code versenden", „an Claude Code senden", „Handoff verarbeiten"	Workflows/ExportToCode.md
IntegrateIntoApp (Pfad 3-Fallback – /design-sync bevorzugen)	„dies integrieren in", „in die App patchen", „in bestehender Codebasis landen"	Workflows/IntegrateIntoApp.md
DeployDesign (Pfad 3)	„Design bereitstellen", „in Produktion versenden"	Workflows/DeployDesign.md

Für code-gebundene Arbeiten (Export, Integration, Designsystem-Extraktion/-Sync) bevorzugen Sie Pfad 2 (NativeDesignSync → /design-sync) . Die oben genannten Pfad-3-Bundle-Workflows bleiben als dokumentierter Fallback für den Fall, dass Sie von der Web-Canvas aus arbeiten, aber sie sind nicht erprobt und benötigen die Test-Profil-Anmeldung.

Voraussetzungen (PREFLIGHT)

Pfad 1 (DirectDesign) benötigt nichts – kein Browser, keine Authentifizierung. Pfad 2 (nativer CLI) benötigt nur ein Claude-Abonnement, das Claude Design enthält, und ein aktuelles Claude Code (/update, wenn die Befehle nicht angezeigt werden). Die folgenden Prüfungen gelten NUR für Pfad 3 (ClaudeDesign über Interceptor):

1. Interceptor-Skill verfügbar – which interceptor gibt einen Pfad zurück. Wenn nicht, weisen Sie den Benutzer an, zuerst Skill("Interceptor")-Setup aufzurufen.
2. Authentifizierte claude.ai-Sitzung – das Chrome-Profil interceptor-test muss bei claude.ai angemeldet sein. Zur Laufzeit prüfen (ein nicht authentifiziertes Profil erreicht die Marketing-Wand, nicht die App); wenn nicht, ist eine einmalige beobachtete Anmeldung erforderlich, bevor ein Pfad-3-Workflow ausgeführt werden kann.
3. Claude Design-Zugriff – das Claude-Abonnement muss Claude Design enthalten (Pro, Max, Team oder Enterprise mit Admin-Opt-in).
4. Für IntegrateIntoApp : Übergeordneter Projektpfad + Framework-ID (next, astro, vitepress, vite-react, vue, vanilla) müssen im Kontext übergeben werden.

Fehlende Voraussetzungen → mit einer klaren Korrekturmaßnahme anhalten. Niemals stillschweigend zurückfallen.

Fallstricke

Sammeln Sie hier Lektionen. Die Informationsdichte ist in Fallstricken am höchsten.

• Zwei Pfade, eine Skill. ClaudeDesign (CreatePrototype et al.) steuert claude.ai/design; DirectDesign lässt {{DA_NAME}} das Design inline unter Verwendung von References/FrontendDesignPhilosophy.md schreiben. Nicht verwechseln. Wenn die Absicht des Benutzers mehrdeutig ist, beide als benannte Optionen präsentieren und den Benutzer wählen lassen – niemals stillschweigend routen.
• Native-first – Code und Token sind die Quelle der Wahrheit, Figma ist keine Abhängigkeit. Importieren Sie ein Designsystem durch Verknüpfung des Repos (Claude Design liest echte Komponenten und Token aus Code) oder Hochladen von Token-/Komponentendateien, niemals einen .fig-Export. Fügen Sie KEINE Figma-Rundreise in eine der beiden Richtungen hinzu (Design → .fig oder Code → bearbeitbare Figma-Frames). Die Wette ist, dass Design in der Codebasis lebt, nicht in einer externen Austauschdatei. Sollte jemals ein Bedarf an einem visuellen Review ohne Repo auftreten, lösen Sie ihn mit einer URL-/Screenshot-Freigabe, nicht durch Kopplung der Skill an Figma.
• DirectDesign ist in sich geschlossen. Die ästhetische Doktrin lebt in References/FrontendDesignPhilosophy.md (gespiegelt von anthropics/skills MIT-Quelle). Keine Laufzeitabhängigkeit vom installierten frontend-design-Claude-Code-Plugin – DirectDesign funktioniert in jeder LifeOS-Umgebung.
• Native /design + /design-sync sind jetzt der code-gebundene Pfad (BESTÄTIGT). Die offiziellen Dokumente von Anthropic (support.claude.com/en/articles/14604416) dokumentieren beide Befehle, GA auf Pro/Max/Team/Enterprise ab Juni 2026. /design-sync macht bidirektionale Codebasis↔Designsystem-Synchronisation – verwenden Sie es anstelle der Interceptor-Handoff-Bundle-Apparatur für alles Code-gebundene. Es gibt immer noch keine öffentliche REST-API oder MCP-Server; die CLI-Befehle sind die programmatische Oberfläche. Wenn sie nicht angezeigt werden, führen Sie /update aus.
• Der ClaudeDesign/Interceptor-Pfad (Pfad 3) ist nicht erprobt und derzeit blockiert. Er wurde noch nie Ende-zu-Ende ausgeführt – jeder reale Durchlauf dieser Skill verwendete DirectDesign. Das Profil interceptor-test ist nicht bei claude.ai angemeldet, so dass DriveClaudeDesign.ts die Marketing-Wand erreicht, nicht die App. Das Tool zielt auf Steuerelemente über Accessibility-Tree-Heuristiken (Composer durch role=textbox/contenteditable, Senden durch /send|submit/, Export durch /export/), so dass ein verschobener Button NICHT der Blockierer ist – die fehlende Authentifizierung und die Ablösung durch das native CLI sind es. Bevor Sie Pfad 3 vertrauen: Melden Sie das Test-Profil einmal bei claude.ai an und führen Sie dann einen einzigen beaufsichtigten Durchlauf durch.
• Echter Chrome erforderlich. Verwenden Sie die Interceptor-Skill – sie ist die einzige sanktionierte Browser-Automatisierung in LifeOS. Die Benutzeroberfläche von Claude Design hängt vom vollständigen Sitzungszustand von claude.ai ab; CDP-basierte Automatisierung löst Bot-Erkennung aus und verwirft Sitzungscookies.
• Handoff-Bundles sind Verzeichnisse, keine einzelnen Dateien. Ein Bundle enthält PROMPT.md, optional tokens.json, components/, assets/ und framework-spezifisches Gerüst. Behandeln Sie das gesamte Verzeichnis als Einheit.
• Das frontend-design-Plugin aktiviert sich automatisch. Wenn das Handoff-Bundle in Claude Code eingespeist wird, erkennt das Plugin (bereits im offiziellen Marktplatz installiert) die Frontend-Arbeit automatisch – rufen Sie es NICHT manuell auf.
• Claude Designs Designsystem-Extraktion läuft während des Onboardings. Für eine neue Codebasis, die Claude Design verstehen soll, führen Sie zuerst ExtractDesignSystem vor CreatePrototype aus – sonst verwendet Claude Design generische Standardeinstellungen und überschreibt Ihre Token.
• Integration ≠ Überschreiben. IntegrateIntoApp produziert Diffs auf bestehendem Code. Wenn der Benutzer ein vollständiges Redesign möchte, das vorhandene UI ersetzt, kennzeichnen Sie dies explizit und holen Sie eine Bestätigung ein.
• Canva-Exporte sind bearbeitbar. Wenn der Benutzer möchte, dass ein Nicht-Entwickler (Vermarkter, Gründer) das Design verfeinert, routen Sie durch Workflows/ExportToCode.md mit --format canva.
• Keine Echtzeit-Zusammenarbeit. Claude Design unterstützt keine Multiplayer-Bearbeitung wie Figma. Teilen Sie per URL-Export für asynchronen Review.
• Enterprise-Gate. Enterprise-Konten benötigen einen Admin, der Claude Design in den Organisations-Einstellungen aktiviert, bevor das Palette-Symbol in claude.ai erscheint.
• Sitzungskontingente. Die Claude Design-Generierung ist token-intensiv. Seit dem Update vom Juni 2026 teilt sich ihre Nutzung einen Pool mit claude.ai-Chat, Claude Code und Cowork – kein separates Kontingent mehr. Pro ist dünn für nachhaltige Designarbeit; Max wird empfohlen.
• Designsystem-zuerst ist die Token-Lösung. Der größte Token-Fresser ist das wiederholte Neu-Inferieren Ihrer Marke bei jedem Durchlauf und dann das Korrigieren. Führen Sie ExtractDesignSystem einmal aus, damit das System ein fester, wiederverwendbarer Referenzpunkt ist; jede spätere Generation verwendet es wieder, anstatt zu raten. Weniger Korrekturzyklen = weitaus weniger Token über die Lebensdauer eines Projekts. Dies ist der einzige Hebel mit der höchsten Wirkung gegen Kontingentverbrennung.
• Ausgabefidelity ≠ produktionsbereit. Claude Design produziert polierte Visuals, aber der Handoff-Code benötigt oft einen Verifizierungs- + A11y-Durchlauf. Führen Sie Tools/VerifyDesign.ts nach der Integration aus.
• Vision rät nicht. Wenn der Prompt keine responsiven Breakpoints, Kontrastanforderungen oder Dark-Mode-Verhalten angibt, wählt Claude Design Standardeinstellungen, die möglicherweise nicht zur Ziel-App passen. Seien Sie im Brief explizit.

Beispiele

Beispiel 1: Erstellen eines Prototyps aus einem Brief

Benutzer: „Entwirf eine Preisseite für ein KI-Sicherheits-Startup – editorialer Stil, nur dunkel"
→ Ruft CreatePrototype-Workflow auf
→ Preflight: Interceptor + authentifizierte claude.ai-Sitzung
→ Erstellt Brief mit expliziter Ästhetik, Einschränkungen, Differenzierung
→ Steuert claude.ai/design über Tools

…

[gekürzt für Übersetzung]