peixl/ifq-design-skills

IFQ Design Skills

Ein Prompt rein -> versandfertiges HTML raus, optional mit Export als MP4 / GIF / PPTX / PDF / SVG. Diese Hauptdatei ist ein kurzer Router für OpenClaw, ClawHub, skills.sh, Hermes, Codex, Claude Code, Cursor, OpenCode und andere AgentSkills-kompatible Hosts. Nur tiefergehende Dateien laden, wenn die Aufgabe sie erfordert.

30-Sekunden-Ladepfad

1. Bestätige, dass es sich um ein visuelles Deliverable auf HTML-Basis handelt. Falls nicht, beende dieses Skill.
2. Wähle den Modus aus references/modes.md aus, lies dann assets/templates/INDEX.json.
3. Forke eine gelistete Vorlage in den Arbeitsbereich des Nutzers. Beginne niemals mit einer leeren HTML-Datei.
4. Binde assets/ifq-brand/ifq-tokens.css ein und webe mindestens 3 IFQ-Ambient-Markierungen aus references/ifq-brand-spec.md ein.
5. Verifiziere mit npm run verify:lite -- <file.html>, dann npm run preview -- <file.html>.

Mensch + Agenten-Versprechen

• Menschen erhalten einen fertigen Artefaktpfad: HTML zuerst, optionaler Export nur auf Anfrage und kein verstecktes Setup.
• Agenten erhalten eine kurze Route: Modus, Vorlage, Pflichtreferenzen, Stufenrichtlinie und Verifizierungsbefehl.
• Maintainer erhalten Regressionsdruck: 12 Modus-Evaluierungen, Scanner-saubere Skripte und Marktplatz-Metadaten-Prüfungen.
• Marktplätze erhalten ein lesbares Paket: Einzeiler-Installation, null erforderliche Umgebungsvariablen, explizite Berechtigungen und keine stillen Installationen.

Erfolgspfad beim ersten Durchlauf

Nach der Installation sorge dafür, dass die erste Interaktion in einem Durchlauf ein sichtbares Artefakt erzeugt:

1. Nimm eine visuelle Anfrage in natürlicher Sprache an, ohne sie in Setup-Arbeit zu verwandeln.
2. Leite sie an einen Modus und eine Vorlage weiter; nenne beide im abschließenden Nachweis.
3. Schreibe die HTML-Datei mit benannten Annahmen für ungeklärte Fakten in den Arbeitsbereich des Nutzers.
4. Führe npm run verify:lite -- <file.html> aus, wenn eine Shell verfügbar ist, dann Vorschau oder Screenshot mit den Browser-Tools des Hosts, wenn verfügbar.
5. Melde den Dateipfad, die Route, die Vorlage, das Verifizierungsergebnis und nur Einschränkungen, die die Nutzung beeinträchtigen.

Frage auf dem Pfad des ersten Durchlaufs nicht nach Konto-Anmeldung, globaler Installation, Export-Abhängigkeiten oder weitreichenden Umgebungsänderungen.

Ausgabegrenze

• Kernausgabe ist verifiziertes lokales HTML, plus SVG/statische Begleitdateien oder exportfertige Quellstruktur, wenn die Aufgabe sie erfordert.
• MP4/GIF/PDF/PPTX-Helfer sind optionale Automatisierung im vollständigen Repository. Bereite zuerst die HTML-Quelle vor; installiere oder führe Export-Tools nur nach explizitem Nutzerwunsch aus.
• Behaupte niemals, dass eine Exportdatei, ein Screenshot, ein Marktplatzstatus oder ein Sicherheitsergebnis existiert, bis der entsprechende Befehl oder Live-Check tatsächlich bestanden wurde.

Verwenden, wenn

• Interaktiver Prototyp, Hi-Fi-Mockup, klickbarer App-Flow, Dashboard, Landingpage, Whitepaper, Bericht, Infografik, Slide-Deck, Changelog, Karte, Einladung, Social-Cover oder Brand-System.
• Bewegungsdemo oder Launch-Animation, besonders wenn der Nutzer auch MP4/GIF-Ausgabe wünscht.
• Design-Kritik, Marken-Diagnose oder 3 differenzierte Stilrichtungen vor der Umsetzung.
• Der Nutzer fragt nach PDF/PPTX/SVG-Export aus einer HTML-basierten Quelle.

Nicht verwenden, wenn

• Die eigentliche Aufgabe Frontend-Engineering für die Produktion, Backend-Arbeit, SEO-kritische Website-Implementierung oder ein CSS-Fehler in einer bestehenden App ist.
• Der Nutzer nur Textbearbeitung ohne visuelles Artefakt wünscht.
• Das Deliverable durch Word, Google Docs oder eine gesperrte Unternehmensvorlage laufen muss.

Stufenrichtlinie

Stufe	Standard?	Voraussetzungen	Verwendung für
Stufe 0	ja	Node >= 18.17	HTML, Vorschau, Lite-Verifizierung, Smoke-Tests
Stufe 1	Opt-in	Python + Playwright + Chromium	Headless-Screenshots, Konsolenaufzeichnung, Multi-Viewport-Prüfungen
Stufe 2	Opt-in	npm run install:export; MP4/GIF benötigen ebenfalls ffmpeg	MP4, GIF, PDF, bearbeitbarer PPTX-Export

Installiere optionale Abhängigkeiten nicht, es sei denn, der Nutzer benötigt explizit Screenshots oder Exportformate.

Entscheidungsbaum-Routing

Nutzeranfrage trifft ein
  │
  ├─ Handelt es sich um ein visuelles Design-Deliverable? ─── Nein → Skill beenden, an Standard-Agent zurückgeben
  │
  ├─ Kann ein Modus-Trigger zugeordnet werden? ─── Ja (Konfidenz >70%) → Vorlage forken → liefern → verifizieren
  │                                      (Ein-Durchlauf: Annahmen benennen, keine Fragen)
  │
  ├─ Kann ein Modus-Trigger zugeordnet werden? ─── Ja (Konfidenz ≤70%) → design-direction-advisor.md leichtgewichtig
  │                                      (3 textbasierte Richtungen, keine Demos, auf Nutzerauswahl warten)
  │
  ├─ Wird ein konkretes Produkt/Technologie/Ereignis erwähnt? ─── Ja → fact-and-asset-protocol.md + Web-Faktencheck
  │
  ├─ Handelt es sich um einen mobilen App-Prototypen? ─── Ja → app-prototype-rules.md + ios_frame.jsx / android_frame.jsx
  │
  └─ Handelt es sich um Bewegung/Video? ─── Ja → animation-pitfalls.md + animations.md + video-export.md

Lies references/modes.md für das vollständige Modus-Protokoll. Die obige Kurzreferenztabelle ist die schnelle Ebene.

Kurzreferenz (Agenten-Speed-Tabelle)

Modus	Trigger-Schlüsselwörter	Vorlage	Wichtige Referenzen
M-01	Launch-Film, 发布会, Produktvideo	T-launch-film	animations.md, video-export.md
M-02	Portfolio, 个人站, Über mich	T-hero-landing	design-direction-advisor.md
M-03	Whitepaper, 白皮书, Jahresbericht	T-infographic-vertical	fact-and-asset-protocol.md
M-04	Dashboard, 看板, KPI, Kommandozentrale	T-dashboard	app-prototype-rules.md
M-05	A vs B, 横评, Benchmark	T-compare-vs	fact-and-asset-protocol.md
M-06	Onboarding, 新手引导, Flow-Demo	T-onboarding-flow	app-prototype-rules.md
M-07	Changelog, Release-Notes, 发布日记	T-changelog	content-guidelines.md
M-08	Keynote, PPT, 演讲, Slide-Deck	T-slide-title	slide-decks.md, editable-pptx.md
M-09	社媒物料, Social-Cover, 小红书	T-social-x	content-guidelines.md
M-10	名片, Visitenkarte, 邀请函	T-business-card	ifq-brand-spec.md
M-11	品牌诊断, Marken-Audit, 品牌体检	T-brand-diagnosis	critique-guide.md
M-12	Brand von Grund auf, 从零建立品牌	T-brand-system	design-direction-advisor.md

Alle Vorlagen: npm run verify:lite -- <file> + npm run preview -- <file> (Stufe 0, Null-Installation).

IFQ-Ambient-Schicht

• Die Marke des Nutzers ist das Thema. IFQ ist die verfasste Schicht: Layout-Rhythmus, warmes Papier, Rost-Ledger, Mono-Feldnotizen, Signal-Spark, ruhige URL und redaktioneller Kontrast.
• Jedes Deliverable verwendet mindestens 3 IFQ-Markierungen. Füge niemals ein lautes generisches Logo oder Wasserzeichen ein, es sei denn, die Aufgabe gehört IFQ oder ist ein Animations-Export, der den Werbestempel erfordert.
• Integrierte Vorlagen verwenden lokal erste Schriftarten für eine China-sichere Darstellung. Google Fonts oder CDN-Laufzeiten sind nur Opt-in; siehe references/font-loading.md.
• Vermeide sichtbare interne Taxonomie-Labels wie Signal Spark oder Rust Ledger in nutzerorientierten Designs. Schreibe stattdessen echten Inhalt.

Gesprächsmuster

Muster A — Spezifische Anfrage (am häufigsten, ein Durchlauf): Nutzer: „Erstelle einen A vs B Vergleich, wir vergleichen mit Stripe“ → Agent: Faktencheck für beide Produkte → Route M-05 → Forke T-compare-vs → fülle mit verifizierten Daten → liefern → verifizieren.

Muster B — Selbstbewusster Standard (ein Durchlauf): Nutzer: „Erstell mir eine Landingpage“ → Agent: M-02 mit >70% Konfidenz zuordnen → Forke T-hero-landing → wähle Editorial Serif Stil → fülle mit Standardwerten → liefern → verifizieren → nenne Annahmen in Einschränkungen.

Muster C — Leichtgewichtiger Berater (zwei Durchläufe): Nutzer: „Hilf mir, etwas Schönes zu machen“ → Agent: kein Modus-Treffer bei >70% → lies design-direction-advisor.md → schlage 3 textbasierte Richtungen vor → Nutzer wählt → Route → liefern.

Muster D — Iterative Verfeinerung: Nutzer: „Ändere die Farben des Decks von gerade eben etwas wärmer“ → Agent: suche vorheriges Artefakt → bearbeite direkt → führe erneut verify:lite aus → melde, was sich geändert hat.

Regel: Stelle niemals mehr als 1 Frage pro Durchlauf. Verwende für alles andere Standardwerte. Wenn der Nutzer keinen Stil angegeben hat, wähle einen und nenne ihn im Deliverable — der Nutzer kann iterieren.

Fehlerbehebung

Fehler	Wiederherstellung
Keine Vorlage passt zur Anfrage	Verwende T-hero-landing als generisches Gerüst, notiere die Lücke im Deliverable
verify:lite meldet Platzhalter	Behebe die Platzhalter, verifiziere erneut, melde die Korrektur
verify:lite meldet IFQ-Label-Lecks	Entferne interne Taxonomie-Labels (Signal Spark, Rust Ledger usw.) aus nutzerorientiertem Text
Export-Befehl schlägt fehl	Melde den genauen Fehler, schlage npm run install:export vor, wenn Abhängigkeiten fehlen, behaupte niemals, dass der Export existiert
Nutzer sagt „das sieht KI-generiert aus“	Lese anti-ai-slop.md, wende die 7-Punkte-Checkliste vor dem Absenden an, schreibe mit mehr Rhythmus-Variation neu
Agent kann keine Fakten prüfen (kein Webzugriff)	Nenne unbelegte Behauptungen als „unbestätigt“ im Deliverable, erfinde keine Spezifikationen
Vorlagen-Rendering schlägt fehl oder sieht defekt aus	Falle auf eine einfachere Vorlage zurück (T-hero-landing), melde den Grund für die Degradation
Anfrage liegt außerhalb des Skill-Bereichs	Gib die Grenze ehrlich an, schlage Alternativen vor (z.B. „dies ist besser für ein React-Framework geeignet“)

Sicherheitsvertrag

• Root-Anweisungen bleiben auf visuelle HTML-Lieferung beschränkt. Frage nicht nach irrelevanten Geheimnissen, Host-Konfiguration, persistenten Agenten oder Hintergrunddiensten.
• Skripte sind lokal zuerst: kein dynamisches eval, keine Laufzeit-Netzwerkaufrufe, keine versteckten Installationen und keine Schreibvorgänge außerhalb des Arbeitsbereichs des Nutzers.
• Erforderliche Umgebungsvariablen sind absichtlich leer. Optionale Export-Tools sind dokumentiert und werden nur nach Nutzerabsicht aufgerufen.
• OpenClaw/ClawHub-Metadaten leben im einzeiligen JSON metadata-Feld, sodass Parser auf metadata.openclaw.requires.bins und metadata.openclaw.requires.env zugreifen können.

Verifizierung vor der Lieferung

1. Führe npm run verify:lite -- <file.html> auf Platzhalter und IFQ-Label-Lecks aus.
2. Führe npm run preview -- <file.html> aus und überprüfe die Browser-Ausgabe.
3. Klicke bei App-Prototypen mindestens einen primären Pfad, einen Tab-/Bildschirmwechsel und eine Detail-/Anmerkungsaktion an.
4. Überprüfe bei Decks die Folienanzahl und die Formatanforderungen vor dem PDF/PPTX-Export.
5. Überprüfe bei Animations-Exporten Timing, Audio-Richtlinie und endgültige Dateipräsenz.
6. Führe nach Repository-Änderungen npm run validate und npm run verify:publish aus.

Referenzkarte

Bedarf	Laden
Erstmaliger Schnellstart, 3 Einzeiler-Beispiele	references/quickstart.md
UI-Entdeckungs-Chips und Standard-Aufruf	agents/openai.yaml
Vollständige Rolle, Umfang, IFQ-Laufzeithaltung	references/ifq-ambient-runtime.md
Faktenchecks, Marken-Assets, Produkt/UI-Bilder	references/fact-and-asset-protocol.md
Junior-Designer-Kadenz, Variationen, Platzhalter, Anti-Slop	references/designer-operating-principles.md, references/anti-ai-slop.md
Vager Prompt -> 3 Design-Richtungen	references/design-direction-advisor.md, references/design-styles.md, references/ifq-native-recipes.md
End-to-End-Aufgaben-Workflow, Ausnahmen, Exporte	references/delivery-workflow.md, references/workflow.md, references/verification.md
Agenten-Interaktionsprotokoll, Entscheidungsbaum, Zustandsmaschine	references/agent-interaction-protocol.md
Skill-Verbesserung, Evaluierungsabdeckung, Beitragsregeln	references/killer-skill-playbook.md, evals/evals.json, CONTRIBUTING.md, SECURITY.md
OpenClaw / ClawHub / skills.sh Veröffentlichungshaltung	references/marketplace-quality.md, references/skill-leaderboard-lessons.md, references/smoke-test.md
Laufzeitinstallation und Tool-Zuordnung	references/agent-compatibility.md
React/Babel Single-File-Regeln	references/react-setup.md
Folien und bearbeitbares PPTX	references/slide-decks.md, references/editable-pptx.md
Bewegung/Video/Audio	references/animation-pitfalls.md, references/animation-best-practices.md, references/audio-design-rules.md, references/sfx-library.md
IFQ-Identitäts-Assets	references/ifq-brand-spec.md, assets/ifq-brand/BRAND-DNA.md

Abschlussregel

Liefere das kleinste verifizierte Artefakt, das die Anfrage erfüllt. Melde die Ausgabedatei, die ausgeführten Verifizierungsbefehle und etwaige Einschränkungen. Gib nicht vor, dass Export, Screenshots oder Marktplatzsicherheit vorhanden sind, es sei denn, die entsprechende Prüfung wurde tatsächlich bestanden.