Baoyu Designvon JimLiu

Baoyu Design Skill.

Ein dateibasierter Design-Workflow für Prototypen, Präsentationskonzepte und wiederverwendbare visuelle Systeme.

Prototyping
Designsysteme
Präsentationen

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · Baoyu DesignSKILL.md

Aufgabe Prototyping Ergebnis • Eigenständige HTML-Designartefakte mit kopierten Assets • Ein Projekt mit dokumentierten Designsystem-Bindungen und Asset-Metadaten • Unterstützte Deck- oder Animationsexporte, wenn die jeweiligen Workflows zutreffen Vor dem Start Ein dateifähiger Agent sowie die Methodik, die integrierten Leitfäden, Referenzdokumente und Skripte des Repositorys. Export- und Importpfade haben eigene Voraussetzungen.

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

01 Funktionen

Baoyu Design: Eigenständige HTML-Artefakte

Ein HTML-Design-Orchestrator mit artefaktspezifischen Rezepten, Import- und Authoring-Pfaden für Designsysteme, lokaler Vorschau und sorgfältig abgegrenzten Export-Workflows.

Workflow auf QuellenbasisKein Ausführungs-Benchmark

Die Arbeitsweise

Baoyu Design ist ein breit angelegter Orchestrierungs-Skill zur Erstellung von HTML-Designartefakten. Der Einstieg leitet verschiedene Ergebnisse – etwa Wireframes, App-Screens, Diagramme, Dokumente und Folien – an spezialisierte integrierte Leitfäden weiter, während eine gemeinsame Methodik den Designprozess liefert.

Das Besondere ist der explizite Designkontext. Lokale Figma-Dateien, Repository-Referenzen und bestehendes HTML/CSS lassen sich in Import-Workflows leiten, oder ein Projekt wird an ein kopiertes Designsystem gebunden. Ergebnisse bleiben mit ihren Assets und Projekt-Metadaten gebündelt, statt zu losgelösten HTML-Dateien zu werden. Der Exportumfang ist klar begrenzt: Der PowerPoint-Export gilt für Decks in der unterstützten Folienstruktur, nicht für beliebiges HTML.

Erwartete Ergebnisse

Eigenständige HTML-Designartefakte mit kopierten Assets
Ein Projekt mit dokumentierten Designsystem-Bindungen und Asset-Metadaten
Unterstützte Deck- oder Animationsexporte, wenn die jeweiligen Workflows zutreffen

Beispiel-Briefing ansehen

Vom Briefing zum Review

01
Kontext klären
Bestimmen Sie Artefakttyp, Detailgrad, Markenreferenzen und ein vorhandenes Designsystem, bevor Sie ein Rezept wählen.
02
Den richtigen Pfad laden
Folgen Sie dem passenden integrierten Leitfaden und der Tool-Referenz für die jeweilige Agentenumgebung, statt anzunehmen, dass alle Umgebungen identische Vorschau-Tools bieten.
03
Designsystem binden
Bei einem bestehenden System importieren Sie eine projektlokale Kopie und dokumentieren die Bindung. Beim Erstellen eines Systems nutzen Sie den Workflow aus Kompilieren, Prüfen und Vorschau.
04
Bauen und Vorschau
Halten Sie HTML und referenzierte Assets zusammen, stellen Sie das Ergebnis lokal bereit und prüfen Sie es in einer echten Vorschau, bevor Sie es als geliefert betrachten.

02 Einsatzbereiche

Wann es passt

Ein dateifähiger Agent sowie die Methodik, die integrierten Leitfäden, Referenzdokumente und Skripte des Repositorys. Export- und Importpfade haben eigene Voraussetzungen.

Gut geeignet

Erkundbare DesignkonzepteGeeignet für einen dateibasierten Prototyp oder ein visuelles Artefakt, das Stakeholder öffnen und prüfen können.
Wiederverwendbare SystemarbeitDer Einstieg bietet explizite Wege zum Erstellen, Importieren, Validieren und Vorschauen von Designsystem-Material.

Zu prüfende Grenzen

Export ist eingegrenztDer PowerPoint-Pfad gilt für unterstützte, mit diesem Skill erstellte Decks; er verspricht nicht, jede Webseite in eine bearbeitbare Präsentation umzuwandeln.
Der Einstieg ist ein OrchestratorDer Gestaltungsprozess und umgebungsspezifische Tools liegen in weiteren Dateien. Eine allein kopierte SKILL.md lässt wesentliche Anweisungen aus.

Diese Eingaben mitbringen

ArtefakttypGeben Sie an, ob das Ergebnis ein Wireframe, ein Screen mit hohem Detailgrad, ein Deck, ein Dokument, ein Diagramm oder eine andere unterstützte Form sein soll.
Design-ReferenzenLiefern Sie die passende Marke, ein UI-Kit, eine lokale Figma-Datei, HTML/CSS oder eine eng eingegrenzte Repository-Referenz.
Vorgaben für das ErgebnisGeben Sie an, wohin das Projekt gehört und ob eine Browser-Vorschau oder ein bestimmter unterstützter Export erforderlich ist.

03 Wichtige Entscheidungen

Entscheidende Punkte

Designkontext bleibt erhalten
Projektlokale Systemkopien und Metadaten machen die visuellen Vorgaben explizit, wenn die Arbeit wieder aufgenommen wird.
Artefaktspezifische Regeln
E-Mails, druckähnliche Dokumente, Folien und interaktive Screens folgen eigenen Rezepten statt einer generischen Webseiten-Formel.

04 Beispielbriefing

Ein fokussiertes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Einrichtung prüfen

Beziehen Sie das vollständige baoyu-design-Verzeichnis statt nur der Einstiegsdatei; erhalten Sie built-in-skills, agents, references und Starter-Komponenten.

Upstream-Quelldatei

https://github.com/JimLiu/baoyu-design/blob/6530033592bf7fa58bc1a5a2a2ad278da45213a9/skills/baoyu-design/SKILL.md

Ein dateifähiger Agent sowie die Methodik, die integrierten Leitfäden, Referenzdokumente und Skripte des Repositorys. Export- und Importpfade haben eigene Voraussetzungen.

Mit einem Ergebnis beginnen

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

Beispiel-Briefing

Nutze Baoyu Design, um aus der bereitgestellten HTML/CSS-Referenz einen eigenständigen HTML-Prototyp einer redaktionellen Lese-App zu erstellen. Behalte Typografie und Farb-Tokens bei, dokumentiere die Designsystem-Bindung und erstelle zwei realistische Lesezustände. Halte die Assets lokal, zeige die Vorschau über HTTP und versuche keinen PowerPoint-Export.

Ergebnis prüfen

Prüfen Sie das tatsächliche Ergebnis anhand dieser beobachtbaren Kriterien.

Das Artefakt folgt dem bereitgestellten Designkontext.
Referenzierte Assets befinden sich im Ergebnisprojekt.
Die Vorschau lädt, und der gewählte Exportumfang wird wahrheitsgemäß angegeben.

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

OpenDesign herunterladen Quickstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt den unten verlinkten, fixierten Quellstand. Verhalten und Anforderungen im Upstream können sich ändern.

Quellbetreiber: JimLiu
Repository: JimLiu/baoyu-design
Skill-Datei: skills/baoyu-design/SKILL.md
Lizenz: MIT
Geprüfter Stand: 2026-10-07 · 6530033592bf

Redaktionelle Quellenzusammenfassung

Ein HTML-Design-Orchestrator mit artefaktspezifischen Rezepten, Import- und Authoring-Pfaden für Designsysteme, lokaler Vorschau und sorgfältig abgegrenzten Export-Workflows.

Originalzusammenfassung von OpenDesign auf Basis der verlinkten Quelle. Repository-Sterne sind ein datiertes Beliebtheitssignal, keine Skill-Nutzung und keine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Hängt er von einem einzelnen Coding-Agenten ab?

Er ist nicht an einen einzelnen Coding-Agenten gebunden. Die Quelle beschreibt einen dateibasierten Workflow mit separaten Tool-Referenzen für unterstützte Umgebungen.

Kann er eine lokale Figma-Datei lesen?

Der Einstieg enthält einen Offline-Importpfad für .fig. Für diesen Workflow sind der ausführliche Importleitfaden und die Skripte erforderlich.

Kann er beliebiges HTML nach PowerPoint exportieren?

Nein. Die Quelle beschränkt den Deck-Export ausdrücklich auf das unterstützte, in Folienstruktur aufgebaute HTML.

OpenDesign

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

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

OpenDesign herunterladen Design-Skills durchsuchen