diff --git a/.gitignore b/.gitignore
index f14da90..07830ab 100644
--- a/.gitignore
+++ b/.gitignore
@@ -147,6 +147,7 @@ yunzai
 /entrypoint.sh
 
 # mkdir
-dist
-docs
-public
\ No newline at end of file
+dist/
+docs/
+public/
+html/
\ No newline at end of file
diff --git a/README.md b/README.md
index 0ce444e..26ae14b 100644
--- a/README.md
+++ b/README.md
@@ -92,6 +92,13 @@ tailwindcss将识别plugins目录下的tsx和jsx文件
 
 [查看 开发示例](./example/index.tsx)
 
+> 执行尝试生产html
+
+```sh
+npm run css
+npx ts-node ./example/index.ts
+```
+
 ## 生成开发文档
 
 ```sh
@@ -164,9 +171,9 @@ const Obj = {}
 // 不推荐new
 ```
 
-## 关于lib目录
+## 关于lib
 
-lib目录将在未来逐渐放弃，在版本发布后，开发者需要有意识的对此变化做出调整.
+将在未来逐渐放弃，在版本发布后，开发者需要有意识的对此变化做出调整.
 
 ```ts
 // 已废弃
@@ -181,15 +188,3 @@ lib目录将在未来逐渐放弃，在版本发布后，开发者需要有意
 
 // 其他内容逐步优化。。。
 ```
-
-## 新版目录
-
-- 核心源码 src/core
-
-- 配置管理 src/config
-
-- 数据管理 src/db
-
-- 接口板块 src/mys
-
-- 工具类 src/utils
diff --git a/example/hello.tsx b/example/hello.tsx
index 5ad2907..7dd4fdc 100644
--- a/example/hello.tsx
+++ b/example/hello.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
-type PropsType = {
-  data: {
-    name: string
-  }
+export type DataType = {
+  name: string
+}
+export type PropsType = {
+  data: DataType
 }
 export default function App({ data }: PropsType) {
-  return <div className="text-red-500 p-2 text-xl">Hello, ${data.name}!</div>
+  return <div className="text-red-500 p-2 text-xl">Hello, {data.name}!</div>
 }
diff --git a/example/index.tsx b/example/index.tsx
index af1d4d0..5e2ef34 100644
--- a/example/index.tsx
+++ b/example/index.tsx
@@ -1,25 +1,36 @@
 import React from 'react'
 import { Component, Puppeteer } from '../src/utils/index.js'
-import Hello from './hello.tsx'
-const Com = new Component()
-const Pup = new Puppeteer()
+import Hello, { type DataType } from './hello.tsx'
+export const Com = new Component()
+export const Pup = new Puppeteer()
 export class Image {
   constructor() {
     // 启动
     Pup.start()
   }
   /**
-   *
+   * 为指定用户生成html 生成指定数据下的html文件
    * @returns
    */
-  async getHelloComponent() {
+  getHelloComponent(uid: number, data: DataType) {
     // 生成 html 地址
-    const Address = Com.create(<Hello data={{ name: 'word' }} />, {
-      html_head: `<link rel="stylesheet" href="../public/output.css"></link>`,
-      html_name: 'hello.html'
+    const Address = Com.create(<Hello data={data} />, {
+      /**
+       * 注意，不设置json_dir时，
+       * html_head路径应该是../public/output.css
+       * 且html_head默认值路径也是../public/output.css
+       * 因此，不增加其他head的话，html_head和join_dir都可以胜利
+       * { html_name: `${uid}.html`}
+       */
+      html_head: `<link rel="stylesheet" href="../../public/output.css"></link>`,
+      // html/hello/uid.html
+      join_dir: 'hello',
+      html_name: `${uid}.html`
     })
-    //
-    const img = await Pup.render(Address)
-    return img
+    return Pup.render(Address)
   }
 }
+export const imgae = new Image()
+// render 是异步的，因此  此处也是异步的
+const img = await imgae.getHelloComponent(1715713638, { name: 'word' })
+// e.reply(segment.buffer(img))
diff --git a/package.json b/package.json
index db8f378..2b30416 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "monit": "pm2 monit",
     "pm2": "pm2",
     "docs": "typedoc --options typedoc.json",
+    "css": "tailwindcss -i ./src/input.css -o ./public/output.css",
     "format": "prettier --write .",
     "prepare": "husky"
   },