Huevon dominikmartn

Hue Skill.

Erstellen Sie die Regeln, die künftige Interface-Arbeit leiten, und nicht nur einen einzelnen fertigen Screen.

Designsysteme
Skill-Erstellung
Design-Tokens

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · HueSKILL.md

Aufgabe Designsysteme Ergebnis • Ein wiederverwendbarer Design-Skill mit design-model.yaml als zentraler Quelle der Wahrheit. • Referenzdateien für Tokens, Komponenten und Plattform-Mappings. • HTML-Vorschauen für Dashboard, Komponentenbibliothek, Landingpage und App-Screen. Vor dem Start Benötigt Dateizugriff, geeignete Tools zur Referenzprüfung, Node für validate.mjs und eine Browserprüfung für visuelle Sicherheit. Die Verfügbarkeit der Tools beeinflusst die Genauigkeit der Extraktion.

Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Eine Designsprache in einen wiederverwendbaren Skill verwandeln

Erzeugt aus einer Referenzanalyse, einem gemeinsamen YAML-Modell, Dokumentation und vier validierten Vorschauen einen wiederverwendbaren Design-Skill.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Hue ist ein Meta-Skill, der einen weiteren Designsprach-Skill erzeugt. Ausgangspunkt können eine Marke, eine URL, eine Codebasis, Screenshots, eine Beschreibung oder ein bestehender Skill zum Remixen sein. Er trennt beobachtete Designfakten von abgeleiteten Entscheidungen, hält die Entscheidungen in design-model.yaml fest und erzeugt daraus die nachgelagerte Dokumentation und die Vorschauen.

Das Ergebnis umfasst mehr als Farben und Schriften. Die Quelle behandelt Komponenteninventare, die Begründung von Icon-Fallbacks, die Komposition der Hero-Bühne, helle und dunkle Tokens, Plattform-Mappings und vier visuelle Demonstrationen. Außerdem verlangt sie Validierung und visuelle Prüfung. Die geprüfte Quelle enthält teils widersprüchliche Hinweise zu Schriftquellen; genaue Schriftlizenzen und Verfügbarkeit sollten daher geprüft werden, statt jede Empfehlung als kompatibel anzusehen.

Erwartete Ergebnisse

Ein wiederverwendbarer Design-Skill mit design-model.yaml als zentraler Quelle der Wahrheit.
Referenzdateien für Tokens, Komponenten und Plattform-Mappings.
HTML-Vorschauen für Dashboard, Komponentenbibliothek, Landingpage und App-Screen.

Beispiel-Brief ansehen

Vom Brief zur Prüfung

01
Eingabe analysieren
Erfassen Sie nach Möglichkeit echte Werte aus dem Quellcode oder den berechneten Styles und kennzeichnen Sie weniger sichere Beobachtungen aus Screenshots oder Textabrufen.
02
Richtung bestätigen
Prüfen Sie die ästhetische Interpretation und die zentralen Tokens, bevor ein größerer Dateisatz erzeugt wird.
03
Zuerst das Modell aufbauen
Halten Sie Primitive, semantische Rollen, Komponenten, Icon-Fallbacks und Hero-Bühnen-Entscheidungen in YAML fest.
04
Generieren und validieren
Erzeugen Sie Referenzen und Vorschauen aus dem Modell, führen Sie den mitgelieferten Validator aus und prüfen Sie die gerenderten Ergebnisse in beiden Modi.

02 Einsatzbereiche

Wann er sich eignet

Benötigt Dateizugriff, geeignete Tools zur Referenzprüfung, Node für validate.mjs und eine Browserprüfung für visuelle Sicherheit. Die Verfügbarkeit der Tools beeinflusst die Genauigkeit der Extraktion.

Gut geeignet

Wiederverwendbare MarkenrichtlinienNützlich, wenn wiederholte Assistenten-Sitzungen eine explizitere visuelle Sprache brauchen.
Remixe von Design-SkillsUnterstützt das Ändern ausgewählter Dimensionen bei Beibehaltung der bestehenden Philosophie und der nicht betroffenen Regeln.

Zu beachtende Grenzen

Kein Eigentum an AssetsBeobachtete proprietäre Schriften, Icons, Fotografien und Produkt-Renderings sind nicht automatisch für die Weiterverbreitung lizenziert.
Kein exaktes Klonen einer MarkeFallback-Kits und abgeleitete Komponenten müssen ehrlich als solche gekennzeichnet werden.
Umgebungsabhängige AnalyseDie Prüfung berechneter Styles, Browser-Screenshots und lokale Validierung erfordern verfügbare Tools; schwächere Eingaben verringern die Verlässlichkeit.

Diese Eingaben mitbringen

DesignreferenzGeben Sie eine Marken-URL, Codebasis, Screenshots, eine schriftliche Richtung oder einen bestehenden Skill an.
Umfang und PlattformNennen Sie den Produktbereich und ob Mappings für CSS, Tailwind oder SwiftUI nützlich sind.
Asset- und MarkenvorgabenBenennen Sie proprietäres Material, genehmigte Fallbacks und Entscheidungen, die unverändert bleiben müssen.

03 Wichtige Entscheidungen

Entscheidende Punkte

Beobachtet versus abgeleitet
Ein in der Quelle gefundener Button und ein neu abgeleiteter Toggle sollten nicht als gleichermaßen verifiziert dargestellt werden.
Ein Modell begrenzt Abweichungen
Wenn Dokumente und Vorschauen aus demselben YAML erzeugt werden, sinken Widersprüche zwischen genannten Tokens und gerenderten Werten.
An Anwendungs-Screens testen
Eine Designsprache, die nur auf einem Hero funktioniert, kann auf einem dichten Anwendungs-Screen scheitern; die vierte Vorschau testet genau diesen Unterschied.

04 Beispielbriefing

Einen fokussierten Brief ausprobieren

Der folgende Beispiel-Brief wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn verwenden.

Einrichtung prüfen

Verwenden Sie das vollständige Generator-Repository mit Vorlagen und Validierungsskript. Generierte Skill-Ordner haben eigene Namenskonventionen für die Erkennung und eigene Installationsorte, die sich je nach Agent unterscheiden.

Upstream-Quelldatei

https://github.com/dominikmartn/hue/blob/a910e31cd24b45b9455c0c3502150413aa5a3b32/SKILL.md

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Vorgaben in diesem Brief an, bevor Sie den Skill ausführen.

Beispiel-Brief

Nutze hue, um aus dem bereitgestellten lokalen UI-Code und den Screenshots einen wiederverwendbaren Designsprach-Skill zu erstellen. Unterscheide beobachtete von abgeleiteten Komponenten, bewahre unseren tatsächlichen Akzent und die Eckenbehandlung und schlage lizenzierte Schrift- und Icon-Fallbacks vor. Bestätige die Richtung und die zentralen Tokens und erzeuge dann das Modell, die Referenzen und vier Vorschauen mit Validierungsnachweisen.

Ergebnis prüfen

Prüfen Sie die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

Jeder gerenderte Token lässt sich auf design-model.yaml zurückführen.
Beobachtete proprietäre Assets und Fallback-Entscheidungen sind klar unterschieden.
Alle generierten HTML-Dateien bestehen die strukturelle Validierung und die tatsächliche visuelle Prüfung.

OpenDesign bietet einen lokalen Design-Workspace für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladen Schnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellinhaber: dominikmartn
Repository: dominikmartn/hue
Skill-Datei: SKILL.md
Lizenz: MIT
Geprüfter Stand: 2026-10-07 · a910e31cd24b

Redaktionelle Quellenzusammenfassung

Erzeugt aus einer Referenzanalyse, einem gemeinsamen YAML-Modell, Dokumentation und vier validierten Vorschauen einen wiederverwendbaren Design-Skill.

Eigene Zusammenfassung von OpenDesign auf Basis der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, weder Skill-Nutzung noch Qualitätsurteil.

06 Fragen vor dem Start

Fragen vor dem Start

Erstellt Hue nur eine Landingpage?

Nein. Die Landing-Vorschau ist nur eine von mehreren Demonstrationen eines generierten Design-Skills, neben Dashboard, Komponentenbibliothek und App-Screen.

Kann er einen bestehenden Design-Skill überarbeiten?

Ja. Der Remix-Pfad der Quelle ändert zuerst das Modell und erzeugt nur die betroffenen Dateien neu, statt das gesamte System zu ersetzen.

Behauptet er, dass die Quellmarke das Fallback-Icon-Kit verwendet?

Das sollte er nicht. Die Quelle trennt ausdrücklich den beobachteten Icon-Stil von dem frei lizenzierten Kit, das für die Vorschauen gewählt wurde.

OpenDesign

Schaffen Sie Raum für die nächste Design-Iteration.

Halten Sie Brief, Quellmaterial und Designarbeit in einem lokalen Workspace zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladen Design-Skills durchsuchen