viết chậm · hiểu sâu
HỆ THỐNG THIẾT KẾ

AIVO Design System

Mẫu sống toàn bộ token, diagram, component.

Token

  • --dg-paper
  • --dg-paper2
  • --dg-ink
  • --dg-muted
  • --dg-soft
  • --dg-rule
  • --dg-accent
  • --dg-accent-tint
  • --dg-link
  • --dg-tusgino
  • --dg-linhhq
  • --dg-s1
  • --dg-s2
  • --dg-s3
  • --dg-s4
  • --dg-ok
  • --dg-warn
  • --dg-err

Libre Bodoni — tiêu đề serif.

Public Sans — thân bài. Geist Mono — code.

Diagram — 10 type

Kiến trúc AIVOAstro SSG build ra dist rồi deploy Cloudflare Pagescontent/postsastro builddist/Cloudflare Pages
Hình 1 — Kiến trúc AIVO · tusgino
Xem dữ liệu diagram
type: architecture
title: Kiến trúc AIVO
desc: Astro SSG build ra dist rồi deploy Cloudflare Pages
nodes:
  - id: src
    label: content/posts
  - id: build
    label: astro build
    focal: true
  - id: dist
    label: dist/
    kind: store
  - id: cf
    label: Cloudflare Pages
    kind: external
edges:
  - [src, build]
  - [build, dist]
  - [dist, cf]
Spec YAML mẫu
type: architecture
title: Kiến trúc AIVO
desc: Astro SSG build ra dist rồi deploy Cloudflare Pages
nodes:
  - id: src
    label: content/posts
  - id: build
    label: astro build
    focal: true
  - id: dist
    label: dist/
    kind: store
  - id: cf
    label: Cloudflare Pages
    kind: external
edges:
  - [src, build]
  - [build, dist]
  - [dist, cf]
Luồng deploypush main rồi build rồi deploypush mainAction buildCloudflare Pages
Hình 2 — Luồng deploy · tusgino
Xem dữ liệu diagram
type: flowchart
title: Luồng deploy
desc: push main rồi build rồi deploy
nodes:
  - id: push
    label: push main
  - id: build
    label: Action build
    focal: true
  - id: cf
    label: Cloudflare Pages
edges:
  - [push, build]
  - [build, cf]
Spec YAML mẫu
type: flowchart
title: Luồng deploy
desc: push main rồi build rồi deploy
nodes:
  - id: push
    label: push main
  - id: build
    label: Action build
    focal: true
  - id: cf
    label: Cloudflare Pages
edges:
  - [push, build]
  - [build, cf]
Chuỗi reviewtác giả mở PR rồi reviewer duyệt rồi mergeTác giảReviewerCI build
Hình 3 — Chuỗi review · while-linhhq
Xem dữ liệu diagram
type: sequence
title: Chuỗi review
desc: tác giả mở PR rồi reviewer duyệt rồi merge
nodes:
  - id: author
    label: Tác giả
  - id: reviewer
    label: Reviewer
  - id: ci
    label: CI build
edges:
  - [author, reviewer]
  - [reviewer, ci]
Spec YAML mẫu
type: sequence
title: Chuỗi review
desc: tác giả mở PR rồi reviewer duyệt rồi merge
nodes:
  - id: author
    label: Tác giả
  - id: reviewer
    label: Reviewer
  - id: ci
    label: CI build
edges:
  - [author, reviewer]
  - [reviewer, ci]
Lịch launchba mốc từ nháp tới launchViết nhápReview PRLaunch
Hình 4 — Lịch launch · while-linhhq
Xem dữ liệu diagram
type: timeline
title: Lịch launch
desc: ba mốc từ nháp tới launch
nodes:
  - id: draft
    label: Viết nháp
  - id: review
    label: Review PR
  - id: launch
    label: Launch
    focal: true
edges:
  - [draft, review]
  - [review, launch]
Spec YAML mẫu
type: timeline
title: Lịch launch
desc: ba mốc từ nháp tới launch
nodes:
  - id: draft
    label: Viết nháp
  - id: review
    label: Review PR
  - id: launch
    label: Launch
    focal: true
edges:
  - [draft, review]
  - [review, launch]
Ma trận ưu tiênbốn ô effort và impactQuick winBig betFill-inBỏ qua
Hình 5 — Ma trận ưu tiên · tusgino
Xem dữ liệu diagram
type: quadrant
title: Ma trận ưu tiên
desc: bốn ô effort và impact
nodes:
  - id: q1
    label: Quick win
  - id: q2
    label: Big bet
    focal: true
  - id: q3
    label: Fill-in
  - id: q4
    label: Bỏ qua
edges: []
Spec YAML mẫu
type: quadrant
title: Ma trận ưu tiên
desc: bốn ô effort và impact
nodes:
  - id: q1
    label: Quick win
  - id: q2
    label: Big bet
    focal: true
  - id: q3
    label: Fill-in
  - id: q4
    label: Bỏ qua
edges: []
Stack AIVObốn lớp từ content tới deployContent MDXAstro renderdist/ tĩnhCloudflare CDN
Hình 6 — Stack AIVO · tusgino
Xem dữ liệu diagram
type: layers
title: Stack AIVO
desc: bốn lớp từ content tới deploy
nodes:
  - id: content
    label: Content MDX
  - id: render
    label: Astro render
  - id: dist
    label: dist/ tĩnh
  - id: cdn
    label: Cloudflare CDN
edges:
  - [content, render]
  - [render, dist]
  - [dist, cdn]
Spec YAML mẫu
type: layers
title: Stack AIVO
desc: bốn lớp từ content tới deploy
nodes:
  - id: content
    label: Content MDX
  - id: render
    label: Astro render
  - id: dist
    label: dist/ tĩnh
  - id: cdn
    label: Cloudflare CDN
edges:
  - [content, render]
  - [render, dist]
  - [dist, cdn]
Phễu đọctừ lượt xem tới subscriberLượt xemĐọc hếtSubscribe
Hình 7 — Phễu đọc · while-linhhq
Xem dữ liệu diagram
type: funnel
title: Phễu đọc
desc: từ lượt xem tới subscriber
nodes:
  - id: view
    label: Lượt xem
  - id: read
    label: Đọc hết
  - id: sub
    label: Subscribe
    focal: true
edges:
  - [view, read]
  - [read, sub]
Spec YAML mẫu
type: funnel
title: Phễu đọc
desc: từ lượt xem tới subscriber
nodes:
  - id: view
    label: Lượt xem
  - id: read
    label: Đọc hết
  - id: sub
    label: Subscribe
    focal: true
edges:
  - [view, read]
  - [read, sub]
Bảng bài viếtba cột nháp review xongNhápReviewXong
Hình 8 — Bảng bài viết · while-linhhq
Xem dữ liệu diagram
type: kanban
title: Bảng bài viết
desc: ba cột nháp review xong
nodes:
  - id: draft
    label: Nháp
  - id: review
    label: Review
  - id: done
    label: Xong
edges:
  - [draft, review]
  - [review, done]
Spec YAML mẫu
type: kanban
title: Bảng bài viết
desc: ba cột nháp review xong
nodes:
  - id: draft
    label: Nháp
  - id: review
    label: Review
  - id: done
    label: Xong
edges:
  - [draft, review]
  - [review, done]
Hành trình độc giảtừ landing tới shareVào trangĐọc bàiChia sẻ
Hình 9 — Hành trình độc giả · tusgino
Xem dữ liệu diagram
type: journey
title: Hành trình độc giả
desc: từ landing tới share
nodes:
  - id: land
    label: Vào trang
  - id: read
    label: Đọc bài
  - id: share
    label: Chia sẻ
    focal: true
edges:
  - [land, read]
  - [read, share]
Spec YAML mẫu
type: journey
title: Hành trình độc giả
desc: từ landing tới share
nodes:
  - id: land
    label: Vào trang
  - id: read
    label: Đọc bài
  - id: share
    label: Chia sẻ
    focal: true
edges:
  - [land, read]
  - [read, share]
Quan hệ Post Authormột tác giả viết nhiều bàiauthorsposts
Hình 10 — Quan hệ Post Author · tusgino
Xem dữ liệu diagram
type: erd-lite
title: Quan hệ Post Author
desc: một tác giả viết nhiều bài
nodes:
  - id: author
    label: authors
    kind: store
  - id: post
    label: posts
    kind: store
edges:
  - [author, post]
Spec YAML mẫu
type: erd-lite
title: Quan hệ Post Author
desc: một tác giả viết nhiều bài
nodes:
  - id: author
    label: authors
    kind: store
  - id: post
    label: posts
    kind: store
edges:
  - [author, post]

Chart — 3 type

Traffic 7 ngày
Traffic 7 ngàyBiểu đồ bar: views theo T2, T3, T40100200views / T2: 120120views / T3: 200200views / T4: 160160T2T3T4
views
Traffic 7 ngày
views
T2120
T3200
T4160
Xem dữ liệu chart
{"labels": ["T2","T3","T4"], "series": [{"name": "views", "values": [120, 200, 160]}]}
Bài theo tuần
Bài theo tuầnBiểu đồ line: posts theo T1, T2, T3024posts / T1: 22posts / T2: 44posts / T3: 33T1T2T3
posts
Bài theo tuần
posts
T12
T24
T33
Xem dữ liệu chart
{"labels": ["T1","T2","T3"], "series": [{"name": "posts", "values": [2, 4, 3]}]}
Tỉ lệ tag
Tỉ lệ tagBiểu đồ donut: posts theo deploy, content, astrodeploy: 5content: 3astro: 210TỔNG
deploy5 (50%)content3 (30%)astro2 (20%)
Tỉ lệ tag
posts
deploy5
content3
astro2
Xem dữ liệu chart
{"labels": ["deploy","content","astro"], "series": [{"name": "posts", "values": [5, 3, 2]}]}

Components — 16 Tier 1

Diagram (fence trong MDX)

Luồng deploymẫu trong gallerypush mainAction build
Hình 1 — Luồng deploy · tusgino
Xem dữ liệu diagram
type: flowchart
title: Luồng deploy
desc: mẫu trong gallery
nodes:
  - id: a
    label: push main
  - id: b
    label: Action build
    focal: true
edges:
  - [a, b]

Chart (fence trong MDX)

Traffic 7 ngày
Traffic 7 ngàyBiểu đồ bar: views theo T2, T3, T40100200views / T2: 120120views / T3: 200200views / T4: 160160T2T3T4
views
Traffic 7 ngày
views
T2120
T3200
T4160
Xem dữ liệu chart
{"labels": ["T2","T3","T4"], "series": [{"name": "views", "values": [120, 200, 160]}]}

CodeBlock

pnpm build

Terminal

Deploy
pnpm build

InstallTabs

npm i aivo
pnpm add aivo
yarn add aivo
bun add aivo

FileTree

content/
posts/hello-aivo-tusgino.mdx

Callout

Steps

  1. Viết bàiTạo file `.mdx`.
  2. MergeDeploy production.

Tabs + Accordion

npm i
pnpm i
Deploy mất bao lâu?
Khoảng 90 giây từ push main tới production.

TLDR + KeyTakeaways

TL;DR — Mẫu sống toàn bộ token, diagram, component.
  • Gallery là source-of-truth visual.

Image + Gallery

Hình tròn mù tạt trên nền giấy
Gallery 1

Table + StatRow

BướcThời gian
Build12s
90+
Lighthouse
+2

Quote + Versus/ProsCons

Deploy tĩnh là deploy ít bất ngờ nhất.— tusgino
SSGRẻ, nhanh
SSRĐộng, đắt

Endpoint

GET/api/posts
ParamTypeMô tả
tagstringLọc theo tag
{"posts": []}

LinkCard + GitHubCard

Chào AIVO — pipeline deploy

Bài mẫu của tusgino

withastro/astro ★ 62446

The web framework for content-driven websites.

Video