diff --git a/tutorial-demo/README.md b/tutorial-demo/README.md
new file mode 100644
index 0000000..a5944e5
--- /dev/null
+++ b/tutorial-demo/README.md
@@ -0,0 +1,30 @@
+# Git 教程演示项目
+
+这个目录配合三集中文视频教程使用：
+
+1. 使用 Commit 保存和恢复代码版本。
+2. 使用不同 Branch 隔离不同功能。
+3. 使用 Pull Request 把稳定代码合并到 `main`。
+
+## 运行
+
+直接用浏览器打开 `index.html`。
+
+也可以在目录中启动一个本地服务器：
+
+```powershell
+python -m http.server 8000
+```
+
+然后访问 `http://localhost:8000`。
+
+## 安全工作流
+
+```text
+修改前看状态
+修改后看 Diff
+验证通过再 Commit
+功能分支先走 PR
+稳定代码才进 main
+```
+
diff --git a/tutorial-demo/index.html b/tutorial-demo/index.html
new file mode 100644
index 0000000..1c4b8e8
--- /dev/null
+++ b/tutorial-demo/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+ AI 项目控制台
+
+
+
+
+ LEARN GIT
+ AI 项目控制台
+ 先保存可用版本，再让 AI 继续修改。
+
+
+
+
+
当前状态：稳定
+
基础页面已经通过人工检查。
+
三个固定动作
+
+ - 修改前查看状态
+ - 修改后检查 Diff
+ - 验证通过再 Commit
+
+
+
+
+
+
diff --git a/tutorial-demo/styles.css b/tutorial-demo/styles.css
new file mode 100644
index 0000000..c1e9957
--- /dev/null
+++ b/tutorial-demo/styles.css
@@ -0,0 +1,80 @@
+:root {
+ color-scheme: light;
+ font-family:
+ Inter, "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont,
+ "Segoe UI", sans-serif;
+ background: #f6f2e9;
+ color: #171717;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ min-height: 100vh;
+ margin: 0;
+ display: grid;
+ place-items: center;
+ padding: 24px;
+}
+
+.dashboard {
+ width: min(680px, 100%);
+ padding: 48px;
+ border: 2px solid #171717;
+ border-radius: 28px;
+ background: #fffdf8;
+ box-shadow: 12px 12px 0 #ff5a5f;
+}
+
+.eyebrow {
+ margin: 0 0 12px;
+ color: #d83a40;
+ font-weight: 800;
+ letter-spacing: 0.16em;
+}
+
+h1 {
+ margin: 0;
+ font-size: clamp(36px, 8vw, 72px);
+ line-height: 1;
+}
+
+.summary {
+ margin: 20px 0 32px;
+ font-size: 20px;
+ line-height: 1.7;
+}
+
+.status-card {
+ display: flex;
+ gap: 14px;
+ align-items: flex-start;
+ padding: 20px;
+ border-radius: 18px;
+ background: #e7f6ee;
+}
+
+.status-card p {
+ margin: 6px 0 0;
+}
+
+.status-dot {
+ width: 14px;
+ height: 14px;
+ margin-top: 5px;
+ border-radius: 50%;
+ background: #198754;
+ box-shadow: 0 0 0 6px rgb(25 135 84 / 14%);
+}
+
+.rules {
+ margin-top: 32px;
+}
+
+.rules li {
+ margin: 10px 0;
+ padding-left: 6px;
+}
+