# jimliu/baoyu-design architecture

> Architecture diagram of the GitHub repository jimliu/baoyu-design, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jimliu/baoyu-design
- Repository: https://github.com/jimliu/baoyu-design
- Video tour (about a minute): https://gitdiagram.com/jimliu/baoyu-design/video

## Overview

baoyu-design is a portable agent skill for producing self-contained HTML design artifacts, with starter UI scaffolds and companion import, design-system, and export tools. Its primary workflow is prompt → design clarification/context → artifact creation → preview and verification. The README documents capabilities beyond the sampled source; the graph preserves those branches but omits uncertain internal wiring. The file tree does not include the skill’s Markdown entry points, so their nodes use the existing skill directory as the supported path.

Main entry points: [`skills/baoyu-design`](https://github.com/jimliu/baoyu-design/tree/main/skills/baoyu-design) (Design skill), [`skills/baoyu-design/starter-components`](https://github.com/jimliu/baoyu-design/tree/main/skills/baoyu-design/starter-components) (Starter components), [`skills/baoyu-design/agents/build-preview.mjs`](https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/agents/build-preview.mjs) (Preview and verify), [`skills/baoyu-design/starter-components/deck-stage.js`](https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/starter-components/deck-stage.js) (Deck stage)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workflow["Design workflow"]
  node_skill["Design skill"]
  node_method["Design methodology"]
  node_specialists["Specialized skills"]
  node_preview["Preview and verify<br/>[build-preview.mjs]"]
end

subgraph group_scaffolds["UI scaffolds"]
  node_starter["Starter components"]
  node_deck["Deck stage<br/>[deck-stage.js]"]
  node_overlay["Data overlay<br/>[data-overlay.js]"]
end

subgraph group_integrations["Import and systems"]
  node_figma["Figma importer<br/>[import-figma.mjs]"]
  node_dsimport["Design-system import"]
  node_dscompile["System compiler"]
  node_dscheck["System checker"]
  node_asset["Asset recording<br/>[record-asset.mjs]"]
end

subgraph group_exports["Export tools"]
  node_pptx["PPTX exporter"]
  node_video["Video exporter"]
end

node_designer(("Designer"))

node_designer -->|"requests design"| node_skill
node_skill -->|"loads methodology"| node_method
node_skill -->|"selects task skills"| node_specialists
node_skill -->|"uses scaffolds"| node_starter
node_skill -->|"previews and verifies"| node_preview
node_designer -.->|"imports Figma"| node_figma
node_designer -.->|"imports system"| node_dsimport
node_designer -.->|"compiles system"| node_dscompile
node_designer -.->|"checks system"| node_dscheck
node_designer -.->|"records asset"| node_asset
node_designer -.->|"exports slides"| node_pptx
node_designer -.->|"exports video"| node_video
node_starter -->|"includes component"| node_deck
node_starter -->|"includes component"| node_overlay

click node_skill "https://github.com/jimliu/baoyu-design/tree/main/skills/baoyu-design"
click node_method "https://github.com/jimliu/baoyu-design/tree/main/skills/baoyu-design"
click node_specialists "https://github.com/jimliu/baoyu-design/tree/main/skills/baoyu-design"
click node_preview "https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/agents/build-preview.mjs"
click node_starter "https://github.com/jimliu/baoyu-design/tree/main/skills/baoyu-design/starter-components"
click node_deck "https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/starter-components/deck-stage.js"
click node_overlay "https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/starter-components/data-overlay.js"
click node_figma "https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/agents/import-figma.mjs"
click node_dsimport "https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/agents/import-design-system.mjs"
click node_dscompile "https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/agents/compile-design-system.mjs"
click node_dscheck "https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/agents/check-design-system.mjs"
click node_asset "https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/agents/record-asset.mjs"
click node_pptx "https://github.com/jimliu/baoyu-design/tree/main/skills/baoyu-design/agents/gen-pptx/src"
click node_video "https://github.com/jimliu/baoyu-design/tree/main/skills/baoyu-design/agents/gen-video/src"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_skill,node_method,node_specialists,node_preview toneBlue
class node_starter,node_deck,node_overlay toneAmber
class node_figma,node_dsimport,node_dscompile,node_dscheck,node_asset toneMint
class node_pptx,node_video toneRose
class node_designer toneIndigo
```

## Components

### Design workflow

- [Design skill](https://github.com/jimliu/baoyu-design/tree/main/skills/baoyu-design): `skills/baoyu-design`
- [Design methodology](https://github.com/jimliu/baoyu-design/tree/main/skills/baoyu-design): `skills/baoyu-design`
- [Specialized skills](https://github.com/jimliu/baoyu-design/tree/main/skills/baoyu-design): `skills/baoyu-design`
- [Preview and verify](https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/agents/build-preview.mjs): `skills/baoyu-design/agents/build-preview.mjs`

### UI scaffolds

- [Starter components](https://github.com/jimliu/baoyu-design/tree/main/skills/baoyu-design/starter-components): `skills/baoyu-design/starter-components`
- [Deck stage](https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/starter-components/deck-stage.js): `skills/baoyu-design/starter-components/deck-stage.js`
- [Data overlay](https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/starter-components/data-overlay.js): `skills/baoyu-design/starter-components/data-overlay.js`

### Import and systems

- [Figma importer](https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/agents/import-figma.mjs): `skills/baoyu-design/agents/import-figma.mjs`
- [Design-system import](https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/agents/import-design-system.mjs): `skills/baoyu-design/agents/import-design-system.mjs`
- [System compiler](https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/agents/compile-design-system.mjs): `skills/baoyu-design/agents/compile-design-system.mjs`
- [System checker](https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/agents/check-design-system.mjs): `skills/baoyu-design/agents/check-design-system.mjs`
- [Asset recording](https://github.com/jimliu/baoyu-design/blob/main/skills/baoyu-design/agents/record-asset.mjs): `skills/baoyu-design/agents/record-asset.mjs`

### Export tools

- [PPTX exporter](https://github.com/jimliu/baoyu-design/tree/main/skills/baoyu-design/agents/gen-pptx/src): `skills/baoyu-design/agents/gen-pptx/src`
- [Video exporter](https://github.com/jimliu/baoyu-design/tree/main/skills/baoyu-design/agents/gen-video/src): `skills/baoyu-design/agents/gen-video/src`

### Other components

- **Designer**

## Connections

- Designer → Design skill: requests design
- Design skill → Design methodology: loads methodology
- Design skill → Specialized skills: selects task skills
- Design skill → Starter components: uses scaffolds
- Design skill → Preview and verify: previews and verifies
- Designer → Figma importer: imports Figma
- Designer → Design-system import: imports system
- Designer → System compiler: compiles system
- Designer → System checker: checks system
- Designer → Asset recording: records asset
- Designer → PPTX exporter: exports slides
- Designer → Video exporter: exports video
- Starter components → Deck stage: includes component
- Starter components → Data overlay: includes component