diff --git a/.dumirc.ts b/.dumirc.ts
index 43af4e7..5040b7e 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -13,6 +13,7 @@ Powered by <a herf="https://antv.antgroup.com">AntV</a>`,
     socialLinks: {
       github: 'https://github.com/antvis/GPT-Vis',
     },
+    prefersColor: { default: 'light', switch: false },
   },
   // ssr:
   //   process.env.NODE_ENV === 'production'
@@ -31,6 +32,6 @@ Powered by <a herf="https://antv.antgroup.com">AntV</a>`,
     '@c-primary': '#691eff',
     '@s-content-width': '100%',
     '@s-content-padding': '48px',
-    '@s-sidebar-width': '300px',
+    '@s-sidebar-width': '280px',
   },
 });
diff --git a/docs/guide/custom-ui.md b/docs/guide/custom-ui.md
new file mode 100644
index 0000000..61d95d3
--- /dev/null
+++ b/docs/guide/custom-ui.md
@@ -0,0 +1,48 @@
+---
+title: 定制模型输出 UI
+nav: { title: '指南', order: 0 }
+toc: content
+order: 1
+---
+
+## 定制模型输出 UI
+
+为模型输出的结构化数据，通过代码块的方式定制 UI。
+
+```tsx | pure
+import { GPTVisLite, withChartCode } from '@antv/gpt-vis';
+
+const markdownContent = `
+\`\`\`weather
+{
+  "locationName": "Hangzhou",
+  "temperature": 11.4,
+  "humidity": 82,
+  "wind": 6.8,
+  "cloudiness": 75,
+  "uv": "0.2 of 11"
+}
+\`\`\`
+
+In Hangzhou, the current weather is as follows: 
+- The temperature is 11.4°C, humidity is 82%, and wind speed is 6.8 kph. 
+- There's 75% cloud cover, and the UV index is very low at 0.2 out of 11. 
+- This indicates cool, humid conditions with overcast skies and minimal UV exposure.
+`;
+
+const customRenderers = {
+  weather: (props) => 'WeatherCard',
+};
+const components = {
+  code: withChartCode({
+    // register custom block renderer
+    languageRenderers: customRenderers,
+  }),
+};
+
+export default () => {
+  return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
+};
+```
+
+<code src="./demos/custom-ui.tsx"></code>
diff --git a/docs/guide/customize-style.md b/docs/guide/customize-style.md
index c00d354..d0d637f 100644
--- a/docs/guide/customize-style.md
+++ b/docs/guide/customize-style.md
@@ -5,6 +5,8 @@ toc: content
 order: 3
 ---
 
+# 定制图表样式
+
 通过在 [ConfigProvider](/components/config-provider) 中传入样式属性，来配置图表组件的全局样式。
 
 ## 定制组件级样式
diff --git a/docs/guide/demos/WeatherCard/index.tsx b/docs/guide/demos/WeatherCard/index.tsx
index 4b9aaa1..872dbf2 100644
--- a/docs/guide/demos/WeatherCard/index.tsx
+++ b/docs/guide/demos/WeatherCard/index.tsx
@@ -28,15 +28,13 @@ const WeatherCard: CodeBlockComponent = (props) => {
             <span className="windSpeedLabel">Wind</span>
             <span className="windSpeedValue">{wind}kph</span>
           </div>
-          <div className="additionalInfo">
-            <div className="cloudinessSection">
-              <span className="cloudinessLabel">Cloudiness</span>
-              <span className="cloudinessValue">{cloudiness}%</span>
-            </div>
-            <div className="uvIndexSection">
-              <span className="uvIndexLabel">UV Index</span>
-              <span className="uvIndexValue">{uv}</span>
-            </div>
+          <div className="cloudinessSection">
+            <span className="cloudinessLabel">Cloudiness</span>
+            <span className="cloudinessValue">{cloudiness}%</span>
+          </div>
+          <div className="uvIndexSection">
+            <span className="uvIndexLabel">UV Index</span>
+            <span className="uvIndexValue">{uv}</span>
           </div>
         </div>
       </div>
diff --git a/docs/guide/demos/WeatherCard/style.ts b/docs/guide/demos/WeatherCard/style.ts
index c3d2cda..f5312ce 100644
--- a/docs/guide/demos/WeatherCard/style.ts
+++ b/docs/guide/demos/WeatherCard/style.ts
@@ -1,28 +1,26 @@
 import { styled } from 'styled-components';
 
 const StyledComponent = styled.div`
-  width: 424px;
-  padding: 2px;
+  width: 560px;
   background-color: #60a5fa;
+  border-radius: 10px;
 
   .locationSection {
     display: flex;
     flex-direction: column;
-    padding: 18px 18px 14px 10px;
-    border-radius: 10px;
+    padding: 18px 25px;
   }
 
   .temperatureWrapper {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-left: 12px;
   }
 
   .temperatureDetails {
     display: flex;
     align-items: center;
-    gap: 22px;
+    gap: 40px;
   }
 
   .imageIcon {
@@ -34,13 +32,13 @@ const StyledComponent = styled.div`
 
   .currentTemperature {
     color: #feffff;
-    font-size: 28px;
+    font-size: 25px;
     font-weight: bold;
   }
 
   .locationName {
-    color: #60a5fa;
-    font-size: 14px;
+    color: #feffff;
+    font-size: 24px;
     font-weight: bold;
   }
 
@@ -48,8 +46,8 @@ const StyledComponent = styled.div`
     display: flex;
     align-items: center;
     margin-top: 16px;
-    padding-right: 2px;
-    padding-left: 2px;
+    justify-content: space-between;
+    font-size: 14px;
   }
 
   .humiditySection {
@@ -57,17 +55,13 @@ const StyledComponent = styled.div`
     flex-direction: column;
     align-items: flex-start;
     min-width: 82px;
-    padding-right: 8px;
-    padding-left: 2px;
   }
 
   .attributeLabel {
     min-width: 56px;
     margin-right: 2px;
     margin-left: 2px;
-    background-color: #7fb6fb;
     color: #dbeafe;
-    font-size: 12px;
   }
 
   .uvIndexValue {
@@ -80,59 +74,42 @@ const StyledComponent = styled.div`
     flex-direction: column;
     align-items: flex-start;
     margin-left: 20px;
-    padding-right: 10px;
-    padding-left: 4px;
   }
 
   .windSpeedLabel {
     color: #dbeafe;
-    font-size: 14px;
   }
 
   .windSpeedValue {
     color: #feffff;
-    font-size: 14px;
-  }
-
-  .additionalInfo {
-    display: flex;
-    margin-left: 2px;
-    gap: 26px;
   }
 
   .cloudinessSection {
     display: flex;
     flex-direction: column;
-    padding-right: 2px;
-    padding-left: 2px;
   }
 
   .cloudinessLabel {
     color: #dbeafe;
-    font-size: 12px;
   }
 
   .cloudinessValue {
     align-self: flex-start;
     color: #fff;
-    font-size: 12px;
   }
 
   .uvIndexSection {
     display: flex;
     flex-direction: column;
-    padding-right: 2px;
   }
 
   .uvIndexLabel {
     margin-left: 2px;
     color: #dbeafe;
-    font-size: 12px;
   }
 
   .uvIndexValue {
     color: #fff;
-    font-size: 12px;
   }
 `;
 
diff --git a/docs/guide/demos/custom-ui.tsx b/docs/guide/demos/custom-ui.tsx
index 79071ab..4a61277 100644
--- a/docs/guide/demos/custom-ui.tsx
+++ b/docs/guide/demos/custom-ui.tsx
@@ -1,11 +1,12 @@
-import { ChartType, GPTVisLite, Pie, withChartCode } from '@antv/gpt-vis';
+import { Bubble } from '@ant-design/x';
+import { GPTVisLite, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 import WeatherCard from './WeatherCard';
 
 const markdownContent = `
 \`\`\`weather
 {
-  "locationName": "Hngzhou",
+  "locationName": "Hangzhou",
   "temperature": 11.4,
   "humidity": 82,
   "wind": 6.8,
@@ -14,17 +15,10 @@ const markdownContent = `
 }
 \`\`\`
 
-\`\`\`vis-chart
-{
-  "type": "pie",
-  "data": [
-    { "category": "分类一", "value": 27 },
-    { "category": "分类二", "value": 25 },
-    { "category": "分类三", "value": 18 },
-    { "category": "其他", "value": 5 }
-  ]
-}
-\`\`\`
+In Hangzhou, the current weather is as follows:
+- The temperature is 11.4°C, humidity is 82%, and wind speed is 6.8 kph.
+- There's 75% cloud cover, and the UV index is very low at 0.2 out of 11.
+- This indicates cool, humid conditions with overcast skies and minimal UV exposure.
 `;
 
 const customRenderers = {
@@ -34,11 +28,21 @@ const components = {
   code: withChartCode({
     // register custom block renderer
     languageRenderers: customRenderers,
-    // register a pie chart
-    components: { [ChartType.Pie]: Pie },
   }),
 };
 
+const bgStyle = {
+  display: 'grid',
+  gridGap: '20px 0',
+  padding: 20,
+  borderRadius: 8,
+};
+
 export default () => {
-  return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
+  return (
+    <div style={bgStyle}>
+      <Bubble placement="end" content="How is the weather today?" />
+      <Bubble content={<GPTVisLite components={components}>{markdownContent}</GPTVisLite>} />
+    </div>
+  );
 };
diff --git a/docs/guide/quick-start.md b/docs/guide/quick-start.md
index f68b6ff..f2be67f 100644
--- a/docs/guide/quick-start.md
+++ b/docs/guide/quick-start.md
@@ -87,5 +87,3 @@ export default () => {
   return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
 };
 ```
-
-<code src="./demos/custom-ui.tsx"></code>
diff --git a/src/Area/index.md b/src/Area/index.md
index 1dc975e..9cfe2fc 100644
--- a/src/Area/index.md
+++ b/src/Area/index.md
@@ -4,6 +4,7 @@ group:
   order: 1
   title: 统计图
 demo: { cols: 2 }
+toc: content
 nav: { title: '组件', order: 1 }
 ---
 
diff --git a/src/Bar/index.md b/src/Bar/index.md
index 49a65e4..20c2cd0 100644
--- a/src/Bar/index.md
+++ b/src/Bar/index.md
@@ -3,6 +3,7 @@ order: 4
 group:
   order: 1
   title: 统计图
+toc: content
 demo: { cols: 2 }
 ---
 
diff --git a/src/ChartCodeRender/index.md b/src/ChartCodeRender/index.md
index 1929c59..545a8f8 100644
--- a/src/ChartCodeRender/index.md
+++ b/src/ChartCodeRender/index.md
@@ -1,5 +1,6 @@
 ---
 order: 2
+toc: content
 group:
   order: 10
   title: 其他
diff --git a/src/Column/index.md b/src/Column/index.md
index 5c6cfb8..bb3ffa2 100644
--- a/src/Column/index.md
+++ b/src/Column/index.md
@@ -1,5 +1,6 @@
 ---
 order: 2
+toc: content
 group:
   order: 1
   title: 统计图
diff --git a/src/ConfigProvider/index.md b/src/ConfigProvider/index.md
index 7a4e59c..e77b2c7 100644
--- a/src/ConfigProvider/index.md
+++ b/src/ConfigProvider/index.md
@@ -1,5 +1,6 @@
 ---
 order: 3
+toc: content
 group:
   order: 10
   title: 其他
diff --git a/src/DualAxes/index.md b/src/DualAxes/index.md
index 81a311f..f962643 100644
--- a/src/DualAxes/index.md
+++ b/src/DualAxes/index.md
@@ -4,6 +4,7 @@ group:
   order: 1
   title: 统计图
 demo: { cols: 2 }
+toc: content
 ---
 
 # DualAxes 双轴图
diff --git a/src/FishboneDiagram/index.md b/src/FishboneDiagram/index.md
index f49b8b4..0b768b0 100644
--- a/src/FishboneDiagram/index.md
+++ b/src/FishboneDiagram/index.md
@@ -3,6 +3,7 @@ order: 6
 group:
   order: 4
   title: 关系图
+toc: content
 ---
 
 # FishboneDiagram 鱼骨图
diff --git a/src/FlowDiagram/index.md b/src/FlowDiagram/index.md
index 816f8ea..d557c9d 100644
--- a/src/FlowDiagram/index.md
+++ b/src/FlowDiagram/index.md
@@ -3,6 +3,7 @@ order: 2
 group:
   order: 3
   title: 关系图
+toc: content
 ---
 
 # FlowDiagram 流程图
diff --git a/src/GPTVis/index.md b/src/GPTVis/index.md
index 291dc62..40e5c81 100644
--- a/src/GPTVis/index.md
+++ b/src/GPTVis/index.md
@@ -3,6 +3,7 @@ order: 1
 group:
   order: 10
   title: 其他
+toc: content
 ---
 
 # GPTVis 协议渲染器
diff --git a/src/HeatMap/index.md b/src/HeatMap/index.md
index 1984622..983dec5 100644
--- a/src/HeatMap/index.md
+++ b/src/HeatMap/index.md
@@ -3,6 +3,7 @@ order: 3
 group:
   order: 2
   title: 地图
+toc: content
 ---
 
 # HeatMap 热力地图
diff --git a/src/Histogram/index.md b/src/Histogram/index.md
index 838f19f..ef3d94a 100644
--- a/src/Histogram/index.md
+++ b/src/Histogram/index.md
@@ -4,6 +4,7 @@ group:
   order: 1
   title: 统计图
 demo: { cols: 2 }
+toc: content
 ---
 
 # Histogram 直方图
diff --git a/src/IndentedTree/index.md b/src/IndentedTree/index.md
index 84e6ef1..711b394 100644
--- a/src/IndentedTree/index.md
+++ b/src/IndentedTree/index.md
@@ -4,6 +4,7 @@ group:
   order: 3
   title: 关系图
 demo: { cols: 2 }
+toc: content
 ---
 
 # IndentedTree 缩进树
diff --git a/src/Line/index.md b/src/Line/index.md
index 99f9929..5b109e8 100644
--- a/src/Line/index.md
+++ b/src/Line/index.md
@@ -3,6 +3,7 @@ order: 1
 group:
   order: 1
   title: 统计图
+toc: content
 demo: { cols: 2 }
 ---
 
diff --git a/src/Map/index.md b/src/Map/index.md
index 2e99e71..1d92476 100644
--- a/src/Map/index.md
+++ b/src/Map/index.md
@@ -3,6 +3,7 @@ order: 1
 group:
   order: 2
   title: 地图
+toc: content
 debug: true
 ---
 
diff --git a/src/MindMap/index.md b/src/MindMap/index.md
index 6707ed0..4f5f307 100644
--- a/src/MindMap/index.md
+++ b/src/MindMap/index.md
@@ -3,6 +3,7 @@ order: 1
 group:
   order: 3
   title: 关系图
+toc: content
 ---
 
 # MindMap 思维导图
diff --git a/src/NetworkGraph/index.md b/src/NetworkGraph/index.md
index df22035..8c8bee4 100644
--- a/src/NetworkGraph/index.md
+++ b/src/NetworkGraph/index.md
@@ -3,6 +3,7 @@ order: 1
 group:
   order: 3
   title: 关系图
+toc: content
 ---
 
 # NetworkGraph 网络图
diff --git a/src/OrganizationChart/index.md b/src/OrganizationChart/index.md
index 4aef93e..b184f52 100644
--- a/src/OrganizationChart/index.md
+++ b/src/OrganizationChart/index.md
@@ -3,6 +3,7 @@ order: 4
 group:
   order: 3
   title: 关系图
+toc: content
 ---
 
 # OrganizationChart 组织架构图
diff --git a/src/PathMap/index.md b/src/PathMap/index.md
index 85f461b..b9c41ac 100644
--- a/src/PathMap/index.md
+++ b/src/PathMap/index.md
@@ -4,6 +4,7 @@ group:
   order: 2
   title: 地图
 demo: { cols: 2 }
+toc: content
 ---
 
 # PathMap 路径地图
diff --git a/src/Pie/index.md b/src/Pie/index.md
index 968fd79..03360b6 100644
--- a/src/Pie/index.md
+++ b/src/Pie/index.md
@@ -3,6 +3,7 @@ order: 3
 group:
   order: 1
   title: 统计图
+toc: content
 ---
 
 # Pie 饼图
diff --git a/src/PinMap/index.md b/src/PinMap/index.md
index ff6dbd7..06a93a8 100644
--- a/src/PinMap/index.md
+++ b/src/PinMap/index.md
@@ -4,6 +4,7 @@ group:
   order: 2
   title: 地图
 demo: { cols: 2 }
+toc: content
 ---
 
 # PinMap 点标注地图
diff --git a/src/Radar/index.md b/src/Radar/index.md
index 9b573be..7b463ec 100644
--- a/src/Radar/index.md
+++ b/src/Radar/index.md
@@ -4,6 +4,7 @@ group:
   order: 1
   title: 统计图
 demo: { cols: 2 }
+toc: content
 ---
 
 # Radar 雷达图
diff --git a/src/Scatter/index.md b/src/Scatter/index.md
index e7c57a2..fd3dd25 100644
--- a/src/Scatter/index.md
+++ b/src/Scatter/index.md
@@ -4,6 +4,7 @@ group:
   order: 1
   title: 统计图
 demo: { cols: 2 }
+toc: content
 ---
 
 # Scatter 散点图
diff --git a/src/Text/index.md b/src/Text/index.md
index 3c1d3cb..93e7b17 100644
--- a/src/Text/index.md
+++ b/src/Text/index.md
@@ -3,6 +3,7 @@ order: 1
 group:
   order: 3
   title: 文本
+toc: content
 ---
 
 # VisText 文本
diff --git a/src/Treemap/index.md b/src/Treemap/index.md
index 436e042..ab98460 100644
--- a/src/Treemap/index.md
+++ b/src/Treemap/index.md
@@ -4,6 +4,7 @@ group:
   order: 1
   title: 统计图
 demo: { cols: 2 }
+toc: content
 ---
 
 # Treemap 矩阵树图
diff --git a/src/WordCloud/index.md b/src/WordCloud/index.md
index a9ba2b3..969f9b1 100644
--- a/src/WordCloud/index.md
+++ b/src/WordCloud/index.md
@@ -3,6 +3,7 @@ order: 7
 group:
   order: 1
   title: 统计图
+toc: content
 ---
 
 # WordCloud 词云图