Four-Layer Paradigm · Anchor → Flow → Depth → Capacity
Anchor · Flow · Depth · Capacity
A high information density Design System for technical blogs and technical portals. We use graph knowledge networks to reduce users' cognitive load while dramatically increasing information density — this four-layer web matrix design paradigm is a structural mapping of our experience managing our own knowledge space and workspace when deploying tool systems and building capability systems, and is planned to be abstracted into skills + MCP + design system for open-source release.
Serving protein and genetic engineering, and all knowledge and technology domains to be expanded
This is also the reverse engineering by George, technical lead of the DiVo AI team, who has been hand-writing HTML pages since 2002 — twenty-plus years of website builder's experience facing the second explosion of generative AI information:From "how to present information to humans" to "how to make information flow efficiently between humans and AI".
divo-web-design-system
Open-source Design System + Skill + Component Library — GitHub →
Why These Four Layers
Each layer answers one core question; the four layers stacked form a complete knowledge-acquisition loop
Start from human needs. Popular science, three-reader navigation, patient cards — any browser of any background can find their entry point.
→ Reduce cognitive load: don't assume readers have a professional background, answer "why" first in plain language
c-users service page Hero → reader navigation → patient letter → what is X
Technical pipeline flow. DiVo's role, N-step pipeline, differentiating advantages — along the pipeline from input to output, every step is verifiable.
→ Increase information density: pipeline steps as knowledge nodes, each step annotated with tool, output, status, link
CAR-T 5-step pipeline CT1→CT2→CT3→CT4→CT5, each step links to underlying validation
Verifiable evidence. benchmark tables, sample reports, honest boundaries, market references, glossary — no exaggeration, no hiding shortcomings.
→ graph node expansion: each validation metric is a traceable knowledge anchor
pLDDT 95.4 · ipTM 0.977 · TESLA AUROC 0.698 · 400+ complexes
Capability architecture traceback. L1 engine → L2 model → L3 Agent → L4 pipeline — from C-end scenario all the way back to silicon.
→ Knowledge graph weaving: each terminal page carries its own graph anchor, bidirectionally connecting the capability architecture matrix
CAR-T capacity layer: RVDon(L1) → DiVoFold5(L2) → protein prediction Agent(L3) → car-t-therapy pipeline(L4)
Anchor (human need) → Flow (pipeline path) → Depth (validation evidence) → Capacity (capability traceback)
From "why do I need this" to "what supports this service" — the four layers form a complete cognitive chain, each layer is a depth level in the graph
KNOWLEDGE GRAPH
Three Values of the Graph Knowledge Network
Not linear documents, but a traversable knowledge graph
Reduce Cognitive Load
Users don't need to build a knowledge system from scratch. The four-layer paradigm comes with cognitive scaffolding — the Anchor layer locates needs, the Flow layer shows the path, the Depth layer provides evidence, the Capacity layer connects the big picture. Readers enter by layer, never getting lost.
Increase Information Density
Each page is not an isolated information silo, but a node in the graph. Pipeline steps link to validation, validation links to underlying services, the Capacity layer links to the capability architecture — the information gained in one browse is multiples of linear reading.
Human-AI Co-reading
The page structure is meant for humans to read, and for AI engineers to read too. Structured CAPACITY_TRACE, HonestBadge, pipeline links let AI parse pages to build a complete knowledge graph, enabling automated knowledge retrieval and reasoning.
EXPERIENCE MAPPING
From Our Workspace to Your Knowledge Space
The four-layer paradigm is not designed from thin air — it is a structural mapping of our experience managing our own knowledge space
| Our Practice | Paradigm Layer | Mapping Relationship |
|---|---|---|
| Layering by L1-L4 when deploying tool systems | Capacity | The capability architecture matrix itself is our knowledge-space taxonomy |
| Recording each step's tool+output+status when building pipelines | Flow | Pipeline steps as knowledge nodes, status labels enable honest self-check |
| Managing sample reports and benchmarks | Depth | Validation metrics are the trusted anchors of the knowledge graph |
| Preparing different entry points for different partners | Anchor | Three-reader navigation = access control of the knowledge space |
| Maintaining glossaries and popular-science copy | Anchor | Reduce cognitive friction in cross-domain collaboration |
| Cross-page links traceback to the capability base | Capacity | graph weaving = topological connection of the knowledge space |
We layer capabilities by L1-L4 when deploying tool systems, record each step's status when building pipelines, and prepare different entry points for different partners — these practices sediment into the four-layer paradigm, now offered to you as an educational service.
See What the Four-Layer Paradigm Looks Like
The following pages fully implement the Anchor→Flow→Depth→Capacity four-layer paradigm; experience the cognitive chain traversal yourself
CAR-T Cell Therapy
Complete four layers: patient letter (Anchor) → 5-step pipeline (Flow) → benchmark+sample report (Depth) → L1-L4 capability traceback (Capacity)
Genome Interpretation Report
6-step pipeline + FM three-model cross + bilingual report + capability traceback to DiVoGenome/Investigate Lens
Four-in-One Digital Twin
c-users main page: philosophical origin → four-in-one → technology base blueprint → verified service matrix
Four-Layer Paradigm Full Specification
SERVICE_PAGE_PARADIGM.md: block templates, data structures, rendering specs, CAPACITY_TRACE definition
OPEN SOURCE PLAN
Open Source Plan · Skills + MCP + Design System
The four-layer paradigm is more than documentation — we plan to abstract it into a reusable AI development toolchain for open-source release
Skills
Encode the four-layer paradigm as an AI Agent skill — generative AI auto-generates high-density technical pages by Anchor→Flow→Depth→Capacity, instead of flat narration.
MCP
Structure CAPACITY_TRACE as an MCP tool — AI auto-parses the capability graph when reading pages, enabling cross-page knowledge reasoning and link completion.
Design System
Component library + color system + block templates packaged as a Design System, importable into v0 and other generative UI tools — anyone can build a technical portal with this paradigm.
v0 already supports users importing custom Design Systems — this means our four-layer paradigm can be standardized as v0 design system tokens + components, letting generative AI output pages directly by the paradigm. Skills define "how to write", MCP defines "how to connect", Design System defines "what it looks like" — a three-in-one open source release.
Build Your Knowledge Space with the Four-Layer Paradigm
Whether you're a doctor looking to understand protein engineering, an investor evaluating gene therapy, or an educator planning a bioinformatics course — the four-layer paradigm helps you quickly traverse the complete cognitive chain from need to capability.
Understanding is All You Need