Baoyu Designdi JimLiu

Baoyu Design Skill.

Usa un flusso di design basato su file per prototipi, concept di presentazioni e sistemi visivi riutilizzabili.

Prototipazione
Design system
Presentazioni

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · Baoyu DesignSKILL.md

Attività Prototipazione Produce • Artefatti di design HTML autonomi con asset copiati • Un progetto con associazioni design-system registrate e metadati degli asset • Esportazioni supportate di presentazioni o animazioni quando si applicano i relativi flussi dedicati Prima di iniziare Un agente in grado di lavorare con i file e la metodologia, le guide integrate, i documenti di riferimento e gli script del repository. I percorsi di esportazione e importazione hanno prerequisiti propri.

Sintesi editoriale · fonte esaminata il 2026-10-07 · non è un esempio generato

01 Funzionalità

Baoyu Design: artefatti HTML autonomi

Un orchestratore di design HTML con ricette specifiche per artefatto, percorsi di importazione e creazione design-system, anteprima locale e flussi di esportazione con ambito ben definito.

Flusso basato sulla fonteNon è un benchmark di esecuzione

Il metodo di lavoro

Baoyu Design è una skill di orchestrazione ampia per produrre artefatti di design HTML. Il suo punto di ingresso indirizza i diversi deliverable, come wireframe, schermate di app, diagrammi, documenti e slide, verso guide integrate specializzate, mentre una metodologia condivisa fornisce il processo di design.

La caratteristica distintiva è il contesto di design esplicito. Può indirizzare file Figma locali, riferimenti di repository e HTML/CSS esistenti verso flussi di importazione, oppure associare un progetto a un design system copiato. I deliverable restano raggruppati con i loro asset e i metadati di progetto invece di diventare file HTML scollegati. L'ambito di esportazione è preciso: l'esportazione PowerPoint vale per le presentazioni create nella struttura di slide supportata, non per HTML arbitrario.

Deliverable previsti

Artefatti di design HTML autonomi con asset copiati
Un progetto con associazioni design-system registrate e metadati degli asset
Esportazioni supportate di presentazioni o animazioni quando si applicano i relativi flussi dedicati

Vedi il brief di esempio

Dal brief alla revisione

01
Definire il contesto
Identifica il tipo di artefatto, la fedeltà, i riferimenti di brand e l'eventuale design system esistente prima di scegliere una ricetta.
02
Caricare il percorso giusto
Segui la guida integrata appropriata e il riferimento agli strumenti per l'ambiente dell'agente, senza presumere che tutti gli ambienti abbiano gli stessi strumenti di anteprima.
03
Associare il design system
Se usi un sistema esistente, importane una copia locale al progetto e registra l'associazione. Se ne crei uno, usa il flusso di compilazione, verifica e anteprima.
04
Costruire e visualizzare l'anteprima
Tieni insieme HTML e asset referenziati, servi il risultato in locale e verificalo in un'anteprima reale prima di considerarlo consegnato.

02 Quando usarlo

Quando usarla

Un agente in grado di lavorare con i file e la metodologia, le guide integrate, i documenti di riferimento e gli script del repository. I percorsi di esportazione e importazione hanno prerequisiti propri.

Adatta a

Concept di design esplorabiliAdatta a un prototipo basato su file o a un artefatto visivo che gli stakeholder possono aprire e ispezionare.
Lavoro su sistemi riutilizzabiliIl punto di ingresso prevede percorsi espliciti per creare, importare, convalidare e visualizzare in anteprima materiale design-system.

Limiti da verificare

L'esportazione ha un ambito definitoIl percorso PowerPoint è pensato per presentazioni supportate create con questa skill, non promette di convertire qualsiasi pagina web in una presentazione modificabile.
Il punto di ingresso è un orchestratoreIl processo di lavoro e gli strumenti specifici per ambiente si trovano in file aggiuntivi. Copiare solo SKILL.md omette istruzioni essenziali.

Input da fornire

Tipo di artefattoSpecifica se il risultato è un wireframe, una schermata ad alta fedeltà, una presentazione, un documento, un diagramma o un'altra forma supportata.
Riferimenti di designFornisci il brand, il kit UI, il file Figma locale, l'HTML/CSS o il riferimento di repository a ambito ristretto pertinenti.
Vincoli di outputIndica dove deve stare il progetto e se servono un'anteprima nel browser o una particolare esportazione supportata.

03 Decisioni importanti

Decisioni che contano

Il contesto di design viaggia con il progetto
Le copie del sistema locali al progetto e i metadati rendono esplicito il vincolo visivo quando il lavoro riprende.
Regole specifiche per artefatto
Email, documenti simili alla stampa, slide e schermate interattive seguono ricette distinte, non un'unica formula da pagina web.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Controlla la configurazione

Ottieni l'intera directory baoyu-design, non solo il file di ingresso; conserva built-in-skills, agents, references e i componenti iniziali.

File sorgente originale

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

Parti da un solo deliverable

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio

Usa Baoyu Design per creare un prototipo HTML autonomo di un'app di lettura editoriale a partire dal riferimento HTML/CSS fornito. Conserva tipografia e token di colore, registra l'associazione design-system e realizza due stati di lettura realistici. Mantieni gli asset in locale, visualizza l'anteprima via HTTP e non tentare un'esportazione PowerPoint.

Ispeziona il risultato

Confronta l'output effettivo con questi criteri osservabili.

L'artefatto segue il contesto di design fornito.
Gli asset referenziati si trovano all'interno del progetto consegnato.
L'anteprima si carica e l'ambito di esportazione scelto è dichiarato in modo veritiero.

OpenDesign offre uno spazio di lavoro di design locale per agenti di programmazione. Questa scheda non significa che la skill sia inclusa nel pacchetto né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesign Leggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte bloccata collegata qui sotto. Il comportamento e i requisiti upstream possono cambiare.

Titolare della fonte: JimLiu
Repository: JimLiu/baoyu-design
File della skill: skills/baoyu-design/SKILL.md
Licenza: MIT
Snapshot esaminato: 2026-10-07 · 6530033592bf

Sintesi editoriale della fonte

Un orchestratore di design HTML con ricette specifiche per artefatto, percorsi di importazione e creazione design-system, anteprima locale e flussi di esportazione con ambito ben definito.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore datato di popolarità, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Dipende da un solo agente di programmazione?

Non è legata a un solo agente di programmazione. La fonte descrive un flusso basato su file con riferimenti separati agli strumenti per gli ambienti supportati.

Può leggere un file Figma locale?

Il punto di ingresso include un percorso di importazione .fig offline. Per questo flusso servono la relativa guida di importazione dettagliata e gli script.

Può esportare qualsiasi HTML in PowerPoint?

No. La fonte limita esplicitamente l'esportazione delle presentazioni al suo HTML supportato con struttura a slide.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni brief, materiale di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesign Sfoglia le skill di design