diff --git a/src/SUMMARY.md b/src/SUMMARY.md
index 761cd06..6457381 100644
--- a/src/SUMMARY.md
+++ b/src/SUMMARY.md
@@ -154,6 +154,17 @@
# GenUI
---
- [GenUI](./gen/introduction.md)
+ - [QuickStart](./gen/exmaple/quickstart.md)
+ - [Video](./gen/exmaple/video.md)
+ - [Tutorials]()
+ - [GenUI Logger](./gen/tutorials/logger.md)
+ - [GenUI Structure](./gen/tutorials/structure.md)
+ - [GenUI Ignore](./gen/tutorials/ignore.md)
+ - [GenUI Syntex](./gen/tutorials/syntex.md)
+ - [Color](./gen/tutorials/syntex/color.md)
+ - [Import](./gen/tutorials/syntex/import.md)
+ - [Static Page](./gen/tutorials/syntex/static.md)
+ - [Dyn Widget](./gen/tutorials/syntex/dyn_widget.md)
- [Makepad-Plugin](./gen/makepad/plugin.md)
- [BuiltIn-UI Lib](./gen/makepad/ui_lib.md)
- [Components](./gen/makepad/components.md)
diff --git a/src/gen/design/future.md b/src/gen/design/future.md
index d530320..ca95b62 100644
--- a/src/gen/design/future.md
+++ b/src/gen/design/future.md
@@ -1,19 +1,19 @@
# Incremental compilation
通过将代码分成模板、脚本、和样式三个部分，已经为实现增量编译奠定了基础。增量编译的关键在于能够快速识别出自上次编译以来哪些部分发生了变化，并仅重新编译这些变化的部分，从而节省时间和资源。将代码预处理成几个独立的部分，并使用策略模式来处理这些部分，为增量编译提供了一个很好的起点。以下是一些可以考虑的方向来进一步实现和优化增量编译的功能：
-## 1. 变更检测机制
+## 1. 变更检测机制 ✅
为了实现增量编译，你需要一种机制来比较当前代码与上一次编译版本之间的差异。这涉及到对每个部分（模板、脚本、样式）进行某种形式的哈希或签名，以便快速识别出哪些部分发生了变化。Git这样的版本控制系统就是利用哈希来追踪文件变化的一个例子。
-## 2. 独立部分的编译与缓存
+## 2. 独立部分的编译与缓存 ✅
在检测到特定部分（模板、脚本、样式）发生变化后，你的框架应该能够仅重新编译这些变化的部分，而不是整个应用。此外，对于没有变化的部分，如果能够缓存它们的编译结果，就可以在下一次编译时直接复用，进一步提高编译效率。
-## 3. 策略模式的应用
+## 3. 策略模式的应用 ✅
使用了策略模式进行处理，这是一个很好的选择，因为它允许你为不同类型的变化定义不同的处理策略。例如，对于模板部分的变化，可能涉及到DOM结构的更新；而脚本部分的变化可能涉及到逻辑处理的更新；样式部分的变化则涉及到视觉表现的更新。通过为这些不同的变化类型定义具体的策略，你的框架可以更加灵活地处理各种变化情况。
-## 4. 优化构建过程
+## 4. 优化构建过程 half ✅
除了增量编译之外，还可以探索其他优化构建过程的方法。比如，是否可以并行处理某些任务？是否可以更智能地安排任务的执行顺序以减少依赖等待时间？这些都是值得考虑的优化方向。
diff --git a/src/gen/exmaple/quickstart.md b/src/gen/exmaple/quickstart.md
new file mode 100644
index 0000000..f173f33
--- /dev/null
+++ b/src/gen/exmaple/quickstart.md
@@ -0,0 +1,119 @@
+# QuickStart
+
+这个示例将向你展示如何使用GenUI框架结合Makepad作为转换底层
+
+## Step1: Create a new WorkSpace Rust Project
+
+### Step1.1 创建项目
+
+使用`cargo new {{project_name}}`创建一个简单Rust项目
+
+```shell
+cargo new gen_makepad_simple
+```
+
+### Step1.2 清理项目并改为WorkSpace
+
+接下来删除项目中的`src`目录并修改`Cargo.toml`文件
+
+```toml
+[workspace]
+members = ["ui"] # ui表示GenUI的代码编写目录
+```
+### Step1.3 创建GenUI项目目录
+
+```shell
+cd ./gen_makepad_simple
+cargo new ui
+```
+
+### Step1.3 在ui目录中创建UI根文件
+
+在ui目录中创建`views`目录，在`views`中创建`root.gen`和`mod.gen`文件
+
+```bash
+--- ui
+|------ views
+|-------------- mod.gen
+|-------------- root.gen
+|------ src
+|-------------- main.rs
+```
+
+
+
+## Step2: 创建root.gen
+
+- template: widget结构部分(我称这三个widget为root铁三角)
+ - root: makepad UI root根
+ - window: 主窗口
+ - view: 主视图
+- style: 嵌套编写widget的props(你也可以称之为styles)
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+## Step3: 编写mod.rs导出root
+
+```rust
+
+```
+
+## Step4: main.rs
+
+是GenUI的编译入口，提供编译指向的能力
+
+- 在这个实例中，我们通过`app()`函数创建一个App编译器实例，指定编译底层目标为Makepad平台
+- 创建`makepad-widgets`依赖并指定使用本地Git库作为依赖地址
+- 设置目标入口文件的文件名字为`app`，这会让最终Makepad的入口为`app.rs`
+- 指定`E:/Rust/try/makepad/Gen-UI/examples/gen_makepad_simple/ui/views/root.gen`这个文件作为UI的根文件(通过这种方式，来切换多个UI根)
+- `add_dep()`方法将依赖添加到编译器中
+- 调用`compile()`方法进行编译
+- 调用`run()`方法启动编译器
+
+```rust
+use gen_compiler::{app, DepType, RustDependence, Target};
+
+fn main() {
+ // set app and specify target
+ let mut app = app(Target::Makepad);
+ // add makepad widget dependence
+ let mut makepad_widget = RustDependence::new("makepad-widgets");
+ makepad_widget.set_ty(DepType::local(
+ "E:/Rust/try/makepad/makepad/rik/makepad/widgets",
+ ));
+
+ // compile and run
+ let _ = app
+ .entry("app")
+ .root("E:/Rust/try/makepad/Gen-UI/examples/gen_makepad_simple/ui/views/root.gen")
+ .add_dep(makepad_widget)
+ .compile();
+
+ let _ = app.run();
+}
+```
\ No newline at end of file
diff --git a/src/gen/exmaple/video.md b/src/gen/exmaple/video.md
new file mode 100644
index 0000000..36bb5b1
--- /dev/null
+++ b/src/gen/exmaple/video.md
@@ -0,0 +1,9 @@
+# Video
+
+## GenUI With Makepad QuickStart
+
+GenUI With Makepad QuickStart
+
+Sheng (2024-06-28)
\ No newline at end of file
diff --git a/src/gen/introduction.md b/src/gen/introduction.md
index e10b99d..e344fff 100644
--- a/src/gen/introduction.md
+++ b/src/gen/introduction.md
@@ -1 +1,37 @@
+
+
+ _/_/_/ _/_/_/_/ _/ _/ _/ _/ _/_/_/
+ _/ _/ _/_/ _/ _/ _/ _/
+ _/ _/_/ _/_/_/ _/ _/ _/ _/ _/ _/
+_/ _/ _/ _/ _/_/ _/ _/ _/
+ _/_/_/ _/_/_/_/ _/ _/ _/_/ _/_/_/
+
+
+
# Introduction
+
+GenUI是一个创新的SFP前端框架，使用Rust语言开发，最初受到Vue3和Makepad的启发。旨在帮助用户更有效地使用Rust编写前端项目。
+
+## Why SFP
+
+GenUI的SFP功能是指其可插拔设计，可以根据开发者的需求调整和使用不同的底层技术或框架，如Makepad或Slint。这种设计允许GenUI通过专门为这些底层框架设计的插件来扩展和自定义其功能，从而更好地适应各种开发场景。
+
+1. 通过插件提供强大的能力
+2. 不受固有底层限制
+3. 同时也是一种挑战
+
+## Advantage
+
+- 多框架兼容性
+- 灵活
+- 可扩展
+- 社区助力
+- 尊重用户
+
+## Target Group
+
+- 前端开发人员和全栈开发人员
+- 创新和实验项目的开发人员
+- 开源社区
+- 独立开发人员
+- 中小型项目开发（现在）
diff --git a/src/gen/makepad/components.md b/src/gen/makepad/components.md
index 0eac4eb..eb6af17 100644
--- a/src/gen/makepad/components.md
+++ b/src/gen/makepad/components.md
@@ -1 +1,34 @@
# Components
+
+- [x] Label
+- [x] Link
+- [x] Button
+- [x] Card
+ - [x] VLayout
+ - [x] HLayout
+- [x] Radio
+- [x] CheckBox
+- [x] Icon
+- [x] Image
+- [x] Input
+- [ ] Popup
+- [ ] Badge
+- [ ] DropDown
+- [ ] Toggle
+- [ ] Avatar
+- [ ] ToolTip
+- [ ] Progress
+- [ ] Slider
+- [ ] Tab
+- [ ] Table
+- [ ] Dialog
+- [ ] Select
+- [ ] FileUpload
+- [ ] Divide
+- [ ] Loading
+- [ ] EmptyState
+- [ ] BreadCrumb
+- [ ] Pagination
+- [ ] Metric
+- [ ] Menu
+- [x] ScrollBar(s)
\ No newline at end of file
diff --git a/src/gen/makepad/ui_lib.md b/src/gen/makepad/ui_lib.md
index 9467d21..7780eab 100644
--- a/src/gen/makepad/ui_lib.md
+++ b/src/gen/makepad/ui_lib.md
@@ -1 +1,150 @@
# BuiltIn-UI Lib
+
+Github Address: [gen makepad component lib](https://github.com/palpus-rs/Gen-UI/tree/main/gen/components)
+
+---
+
+|Version|Date|
+|--|--|
+|v0.0.1|2024-06-28|
+
+
+## Feature
+
+1. More diverse props(styles)
+2. A simpler way of writing (more similar to CSS)
+3. With default style, can be switched through themes
+4. As a built-in component of GenUI, it can also be independently applied in Makepad projects
+5. Continuous high-speed updates (currently updated approximately once a week)
+
+## Import
+
+### Toml
+
+```toml
+gen_components ={ git="https://github.com/palpus-rs/Gen-UI/tree/main/gen/components" }
+```
+### lib.rs
+
+```rust
+pub use gen_components;
+```
+
+### Live Design
+
+```rust
+live_design! {
+ import gen_components::components::*;
+}
+```
+
+## GenUI Builtin Lib
+
+
+## Themes
+
+each theme color has [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
+
+| Color Category | 25 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
+|----------------|--------|--------|---------|---------|---------|---------|---------|---------|---------|---------|---------|
+| Dark | #FCFCFD| #F9FAFB| #F2F4F7 | #EAECF0 | #D0D5DD | #95A2D3 | #667085 | #475467 | #344054 | #1D2939 | #101828 |
+| Primary | #F5FEFF| #ECFDFF| #CFF9FE | #A5F0FC | #67E3F9 | #22CCEE | #06AED4 | #088AB2 | #0E6F90 | #155B75 | #164C63 |
+| Error | #FFFBFA| #FEF3F2| #FEE4E2 | #FECDCA | #FDA29B | #F97066 | #F04438 | #D92D2D | #B42318 | #912018 | #7A271A |
+| Warning | #FFFCF5| #FFFAEB| #FEF0C7 | #FEDF89 | #FEC84B | #FDB022 | #F79009 | #DC6803 | #B54708 | #93370D | #7A2E0E |
+| Success | #F6FEF9| #ECFDF3| #D1FADF | #A6F4C5 | #6CE9A6 | #32D583 | #12B76A | #039855 | #027A48 | #05603A | #054F31 |
+
+---
+
+
+
+
+
+
+ Color Category
+ 25
+ 50
+ 100
+ 200
+ 300
+ 400
+ 500
+ 600
+ 700
+ 800
+ 900
+
+
+
+
+ Dark
+ #FCFCFD
+ #F9FAFB
+ #F2F4F7
+ #EAECF0
+ #D0D5DD
+ #95A2D3
+ #667085
+ #475467
+ #344054
+ #1D2939
+ #101828
+
+
+ Primary
+ #F5FEFF
+ #ECFDFF
+ #CFF9FE
+ #A5F0FC
+ #67E3F9
+ #22CCEE
+ #06AED4
+ #088AB2
+ #0E6F90
+ #155B75
+ #164C63
+
+
+ Error
+ #FFFBFA
+ #FEF3F2
+ #FEE4E2
+ #FECDCA
+ #FDA29B
+ #F97066
+ #F04438
+ #D92D2D
+ #B42318
+ #912018
+ #7A271A
+
+
+ Warning
+ #FFFCF5
+ #FFFAEB
+ #FEF0C7
+ #FEDF89
+ #FEC84B
+ #FDB022
+ #F79009
+ #DC6803
+ #B54708
+ #93370D
+ #7A2E0E
+
+
+ Success
+ #F6FEF9
+ #ECFDF3
+ #D1FADF
+ #A6F4C5
+ #6CE9A6
+ #32D583
+ #12B76A
+ #039855
+ #027A48
+ #05603A
+ #054F31
+
+
+
+
`标签作为单根标签，使用`inherits`属性指定某个需要继承的widget，
+当前推荐继承view widget
+
+- `use gen_macros::{Event, Prop};`: 这行是可以忽略的，Event和Prop也是GenUI内置的宏
+ - Prop: 用于声明widget的属性
+ - Event: 用于声明widget的事件
+- widget的回调使用Rust闭包语法`let mut event_callback = ||{...}`
+- active!: 这也是一个内置宏用于调用widget事件
+```rust
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/src/gen/tutorials/syntex/import.md b/src/gen/tutorials/syntex/import.md
new file mode 100644
index 0000000..1372d15
--- /dev/null
+++ b/src/gen/tutorials/syntex/import.md
@@ -0,0 +1,46 @@
+# Import
+
+在`
+
+
+```
\ No newline at end of file
diff --git a/src/gen/tutorials/syntex/static.md b/src/gen/tutorials/syntex/static.md
new file mode 100644
index 0000000..a0d33d9
--- /dev/null
+++ b/src/gen/tutorials/syntex/static.md
@@ -0,0 +1,92 @@
+# Static Page
+
+## Example1
+
+```rust
+
+
+
+
+
+
+
+
+
+
+```
+
+## Example2
+```rust
+
+
+
+
+
+// 这是错误的，因为script只能在非static模板中使用(除了内置`import!`)
+// 非static模板: ` {
+draw_bg: {
+ fn pixel(self) -> vec4 {
+ let sdf = Sdf2d::viewport(self.pos * self.rect_size)
+ sdf.circle(5., 5., 4.);
+ // #FFFFFF40
+ sdf.fill(THEME_COLOR_TEXT_META);
+ let sz = 1.;
+ sdf.move_to(5., 5.);
+ sdf.line_to(5., 5.);
+ sdf.stroke(#a, 0.8);
+ return sdf.result
+ }
+ }
+}
+```
+1. **Sdf2d::viewport(self.pos * self.rect_size)**:
+ - 这行代码初始化了一个 `Sdf2d` 对象，设置了视口的大小。`self.pos * self.rect_size` 表示将当前坐标乘以矩形大小，以适应视口。
+2. **sdf.circle(5., 5., 4.)**:
+ - 这是在视口的 (5, 5) 位置绘制一个半径为 4 的圆。
+3. **sdf.fill(THEME_COLOR_TEXT_META)**:
+ - 使用 `THEME_COLOR_TEXT_META` 填充圆形。`THEME_COLOR_TEXT_META` 是一个预定义的颜色变量。
+4. **sdf.move_to(5., 5.)** 和 **sdf.line_to(5., 5.)**:
+ - 这些方法用来定义从 (5, 5) 到 (5, 5) 的线条。这里的代码看起来有点奇怪，因为它实际上定义了一条长度为零的线条。
+5. **sdf.stroke(#a, 0.8)**:
+ - 这行代码用 `#a` 颜色和 0.8 的线条宽度描边。`#a` 是一种特定的颜色表示法。
+6. **return sdf.result**:
+ - 返回生成的 SDF 结果。
+### Example vec4
+
+以下是一个完整的示例，展示如何在 Makepad 中使用不同的方法定义和使用颜色：
+
+```rust
+log = {
+ draw_bg: {
+ fn pixel(self) -> vec4 {
+ let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+ sdf.circle(5., 5., 4.);
+
+ // 使用预定义的颜色填充圆形
+ sdf.fill(THEME_COLOR_TEXT_META);
+
+ // 使用 vec4 定义颜色并描边
+ let custom_color = vec4(1.0, 0.0, 0.0, 1.0); // 红色
+ sdf.stroke(custom_color, 0.8);
+
+ return sdf.result;
+ }
+ }
+}
+```
\ No newline at end of file
diff --git a/src/static/gen/examples/quickstart/struct.png b/src/static/gen/examples/quickstart/struct.png
new file mode 100644
index 0000000..d3e512d
Binary files /dev/null and b/src/static/gen/examples/quickstart/struct.png differ
diff --git a/src/static/gen/gen_makepad.mp4 b/src/static/gen/gen_makepad.mp4
new file mode 100644
index 0000000..b8ea51a
Binary files /dev/null and b/src/static/gen/gen_makepad.mp4 differ
diff --git a/src/static/gen/tutorials/hex.png b/src/static/gen/tutorials/hex.png
new file mode 100644
index 0000000..07df2e7
Binary files /dev/null and b/src/static/gen/tutorials/hex.png differ
diff --git a/src/static/gen/tutorials/linear.png b/src/static/gen/tutorials/linear.png
new file mode 100644
index 0000000..dc52cb8
Binary files /dev/null and b/src/static/gen/tutorials/linear.png differ
diff --git a/src/static/gen/tutorials/logo.png b/src/static/gen/tutorials/logo.png
new file mode 100644
index 0000000..859e2f8
Binary files /dev/null and b/src/static/gen/tutorials/logo.png differ
diff --git a/src/static/gen/tutorials/radial.png b/src/static/gen/tutorials/radial.png
new file mode 100644
index 0000000..6d8da32
Binary files /dev/null and b/src/static/gen/tutorials/radial.png differ
diff --git a/src/static/gen/tutorials/rgb.png b/src/static/gen/tutorials/rgb.png
new file mode 100644
index 0000000..3e751af
Binary files /dev/null and b/src/static/gen/tutorials/rgb.png differ
diff --git a/src/static/gen/tutorials/rgba.png b/src/static/gen/tutorials/rgba.png
new file mode 100644
index 0000000..82a9f4d
Binary files /dev/null and b/src/static/gen/tutorials/rgba.png differ
diff --git a/src/static/gen/tutorials/shader.png b/src/static/gen/tutorials/shader.png
new file mode 100644
index 0000000..b2ebc46
Binary files /dev/null and b/src/static/gen/tutorials/shader.png differ
diff --git a/src/static/gen/tutorials/struct.png b/src/static/gen/tutorials/struct.png
new file mode 100644
index 0000000..ffad8a0
Binary files /dev/null and b/src/static/gen/tutorials/struct.png differ