diff --git a/README.md b/README.md
index 244ffe6..95ca658 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,14 @@ npm run deploy:github
 npm run deploy:gitee
 ```
 
+### 新增工具流程
+
+1. 更新运行截图 `public/assets/screenshots_raw/xxx_{light,dark}.png`
+2. 更新二维码资源 `public/assets/screenshots_raw/xxx_qrcode.png`
+  2.1 [小程序码生成](https://mp.weixin.qq.com/wxamp/wxaqrcode/weappcode) 官方工具，页面路径格式为 `page/home/index?share=xxx`，具体参考 `project.private.config.json`
+3. 更新 pages.ts 
+4. 更新 VerticalFeatures.tsx
+
 ### 更新图片资源
 
 创建`.env.local`环境变量文件，并保存 tinypng 站点申请的秘钥
@@ -40,12 +48,13 @@ TINYPNG_API_KEY=<YOUR_API_KEY>
 # 2.执行下面脚本，全量压缩图片
 npm run update-assets
 
-# 增量压缩图片，仅 --since 日期之后新增的图片会被压缩
+# 增量压缩图片，仅 --since 日期之后新增的图片会被压缩（日期是本地时区，无需换算）
 npm run update-assets -- --since='2024-04-29T10:00:00'
 ```
 
 > 脚本依赖 zx 工具，请先确保全局安装`npm install -g zx`
 
+
 ### Gitee
 
 为了方便国内用户访问，仓库也同步一份到 Gitee 上 [xiaohui_hubei/ucalc-website](https://gitee.com/xiaohui_hubei/ucalc-website)
diff --git a/public/assets/screenshots/qrcode_dark.png b/public/assets/screenshots/qrcode_dark.png
new file mode 100644
index 0000000..525f70b
Binary files /dev/null and b/public/assets/screenshots/qrcode_dark.png differ
diff --git a/public/assets/screenshots/qrcode_light.png b/public/assets/screenshots/qrcode_light.png
new file mode 100644
index 0000000..204846b
Binary files /dev/null and b/public/assets/screenshots/qrcode_light.png differ
diff --git a/public/assets/screenshots/qrcode_qrcode.png b/public/assets/screenshots/qrcode_qrcode.png
new file mode 100644
index 0000000..fdd0979
Binary files /dev/null and b/public/assets/screenshots/qrcode_qrcode.png differ
diff --git a/public/assets/screenshots_raw/qrcode_dark.PNG b/public/assets/screenshots_raw/qrcode_dark.PNG
new file mode 100644
index 0000000..3b0fb8c
Binary files /dev/null and b/public/assets/screenshots_raw/qrcode_dark.PNG differ
diff --git a/public/assets/screenshots_raw/qrcode_light.PNG b/public/assets/screenshots_raw/qrcode_light.PNG
new file mode 100644
index 0000000..be5ea99
Binary files /dev/null and b/public/assets/screenshots_raw/qrcode_light.PNG differ
diff --git a/public/assets/screenshots_raw/qrcode_qrcode.png b/public/assets/screenshots_raw/qrcode_qrcode.png
new file mode 100644
index 0000000..f182de7
Binary files /dev/null and b/public/assets/screenshots_raw/qrcode_qrcode.png differ
diff --git a/src/templates/VerticalFeatures.tsx b/src/templates/VerticalFeatures.tsx
index 8cc5a7a..1cb26d1 100644
--- a/src/templates/VerticalFeatures.tsx
+++ b/src/templates/VerticalFeatures.tsx
@@ -44,6 +44,10 @@ const VerticalFeatures = () => (
       description="输入身高和体重后，自动计算 BMI 指数，估算肥胖程度和疾病风险，迈向健康生活！"
       reverse
     />
+    <VerticalFeatureRow
+      pageId="qrcode"
+      description="制作生成二维码，一键美化，满足个性化需求，包括 Logo（形状、图片、磁村、位置等）、码点（形状和颜色）、码眼（形状和颜色）、背景（颜色、图片、透明度等）、容错率、尺寸、版本"
+    />
     <VerticalFeatureRow
       pageId="relationship"
       description="按键输入或文字输入亲戚关系，自动计算亲戚的称呼，也可以反查对方对我的称呼，堪称走亲访友神器！"
diff --git a/src/templates/pages.ts b/src/templates/pages.ts
index 3f23d77..de63eba 100644
--- a/src/templates/pages.ts
+++ b/src/templates/pages.ts
@@ -149,7 +149,7 @@ export const pages = {
     shareTitle: commonShareTitle,
   } satisfies TPage,
   dnf: {
-    title: '官网信息',
+    title: 'DNF小助手',
     path: '/subpkg3/pages/dnf/index',
     icon: 'dnf',
     shareTitle: ['地下城与勇士·起源'],
@@ -173,6 +173,20 @@ export const pages = {
     ],
     enableIndependentTheme: true,
   } satisfies TPage,
+  qrcode: {
+    title: '二维码制作',
+    path: '/subpkg2/pages/qrcode/index',
+    icon: 'qrcode',
+    shareTitle: ['轻松生成美化二维码，创意无限，快来试试吧！'],
+    enableIndependentTheme: false,
+    enableRecommend: true,
+  } satisfies TPage,
+  qrcode_beautify: {
+    title: '二维码美化',
+    path: '/subpkg2/pages/qrcode_beautify/index',
+    enableIndependentTheme: false,
+    enableRecommend: false,
+  } satisfies TPage,
   blank: {
     title: '空白页',
     path: '/subpkg2/pages/blank/index',
diff --git a/tailwind.config.js b/tailwind.config.js
index dcf2653..21b21bc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -39,12 +39,12 @@ module.exports = {
         },
       },
       animation: {
-        toggle: 'toggle 6s infinite',
+        toggle: 'toggle 20s infinite',
       },
       keyframes: {
         toggle: {
           '0%, 20%, 80%, 100%': { opacity: 100 },
-          '30%, 60%': { opacity: 0 },
+          '40%, 60%': { opacity: 0 },
         },
       },
       lineHeight: {