# xiaopu-ai/web-design architecture

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

- Interactive diagram: https://gitdiagram.com/xiaopu-ai/web-design
- Repository: https://github.com/xiaopu-ai/web-design

## Overview

web-design is a Claude Code skill that turns design inputs into an editable DESIGN.md spec, then generates web code from that approved spec. Its documented workflow is distinct from its supporting reference library and utility scripts. The README describes the scripts’ roles, but the excerpts do not establish that the skill invokes them, so those connections are left out.

Main entry points: [`SKILL.md`](https://github.com/xiaopu-ai/web-design/blob/main/SKILL.md) (Design skill)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workflow["Design workflow"]
  node_design_skill["Design skill<br/>[SKILL.md]"]
  node_design_inputs["PRD, URL, screenshot, keywords"]
  node_design_spec["DESIGN.md spec"]
  node_web_code["Generated web code"]
end

subgraph group_knowledge["Design knowledge"]
  node_reference_library["Design references"]
  node_design_systems["Design systems"]
  node_design_patterns["Patterns and guidance"]
end

subgraph group_utilities["Supporting utilities"]
  node_website_crawler["Website crawler<br/>[crawl_website.py]"]
  node_token_extractor["Token extractor"]
  node_image_candidates["Image candidates"]
end

node_designer(("Designer"))

node_designer -->|"provides"| node_design_inputs
node_design_inputs -->|"informs"| node_design_skill
node_design_skill -->|"produces first"| node_design_spec
node_designer -->|"approves"| node_design_spec
node_design_spec -->|"guides generation"| node_design_skill
node_design_skill -->|"generates"| node_web_code

click node_design_skill "https://github.com/xiaopu-ai/web-design/blob/main/SKILL.md"
click node_reference_library "https://github.com/xiaopu-ai/web-design/tree/main/references"
click node_design_systems "https://github.com/xiaopu-ai/web-design/tree/main/references/design-systems"
click node_design_patterns "https://github.com/xiaopu-ai/web-design/tree/main/references"
click node_website_crawler "https://github.com/xiaopu-ai/web-design/blob/main/scripts/crawl_website.py"
click node_token_extractor "https://github.com/xiaopu-ai/web-design/blob/main/scripts/extract_design_tokens.py"
click node_image_candidates "https://github.com/xiaopu-ai/web-design/blob/main/scripts/fetch_unsplash_images.py"

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_design_skill,node_design_inputs,node_design_spec,node_web_code toneBlue
class node_reference_library,node_design_systems,node_design_patterns toneAmber
class node_website_crawler,node_token_extractor,node_image_candidates toneMint
class node_designer toneIndigo
```

## Components

### Design workflow

- [Design skill](https://github.com/xiaopu-ai/web-design/blob/main/SKILL.md): `SKILL.md`
- **PRD, URL, screenshot, keywords**
- **DESIGN.md spec**
- **Generated web code**

### Design knowledge

- [Design references](https://github.com/xiaopu-ai/web-design/tree/main/references): `references`
- [Design systems](https://github.com/xiaopu-ai/web-design/tree/main/references/design-systems): `references/design-systems`
- [Patterns and guidance](https://github.com/xiaopu-ai/web-design/tree/main/references): `references`

### Supporting utilities

- [Website crawler](https://github.com/xiaopu-ai/web-design/blob/main/scripts/crawl_website.py): `scripts/crawl_website.py`
- [Token extractor](https://github.com/xiaopu-ai/web-design/blob/main/scripts/extract_design_tokens.py): `scripts/extract_design_tokens.py`
- [Image candidates](https://github.com/xiaopu-ai/web-design/blob/main/scripts/fetch_unsplash_images.py): `scripts/fetch_unsplash_images.py`

### Other components

- **Designer**

## Connections

- Designer → PRD, URL, screenshot, keywords: provides (evidence: `README.md`)
- PRD, URL, screenshot, keywords → Design skill: informs (evidence: `README.md`)
- Design skill → DESIGN.md spec: produces first (evidence: `README.md`)
- Designer → DESIGN.md spec: approves (evidence: `README.md`)
- DESIGN.md spec → Design skill: guides generation (evidence: `README.md`)
- Design skill → Generated web code: generates (evidence: `README.md`)