diff --git a/.npmrc b/.npmrc
index e2ad808..e4a0f0b 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,3 +1,4 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
 shell-emulator=true
+ignore-workspace-root-check=true
diff --git a/components/AiPrompt.vue b/components/AiPrompt.vue
new file mode 100644
index 0000000..a1da9b0
--- /dev/null
+++ b/components/AiPrompt.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+const app = useAppStore()
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <textarea
+      v-model="app.prompt"
+      placeholder="想要什么样的春联？"
+      class="w-full rounded-lg p-4 shadow dark:bg-dark-800 outline-none!"
+      border="~ gray focus:(blue-500)"
+      maxlength="200"
+    />
+
+    <button class="font-zmx w-full btn" text="black 2xl">
+      生成！
+    </button>
+  </div>
+</template>
diff --git a/components/Footer.vue b/components/Footer.vue
index 9b0ddca..25b9309 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -2,6 +2,5 @@
   <div text="xl gray4" m-5 flex="~ gap3" justify-center>
     <NuxtLink i-carbon-campsite to="/" />
     <a i-carbon-logo-github href="https://github.com/YunYouJun/ai-couplets" target="_blank" />
-    <DarkToggle />
   </div>
 </template>
diff --git a/components/Logos.vue b/components/Logos.vue
index 3fd3c68..2b8bfab 100644
--- a/components/Logos.vue
+++ b/components/Logos.vue
@@ -1,17 +1,10 @@
 <template>
   <div inline-flex cursor-default text-2xl font-300>
-    <div flex flex-col children:mx-auto>
-      <img inline-block h-18 w-18 src="/nuxt.svg">
-      <span mt--2 text-green5>Nuxt 3</span>
-    </div>
     <div
       text="3xl gray4"
       m="x-4 y-auto"
-      i-carbon-add transform transition-all-500 hover:rotate-135
+      i-ri-layout-column-line
+      transform transition-all-500 hover:rotate-135
     />
-    <div flex flex-col children:mx-auto>
-      <img inline-block h-18 w-18 src="/vite.png">
-      <span mt--2 text-purple5>Vitesse</span>
-    </div>
   </div>
 </template>
diff --git a/components/SpringFestivalCouplets.vue b/components/SpringFestivalCouplets.vue
new file mode 100644
index 0000000..450408a
--- /dev/null
+++ b/components/SpringFestivalCouplets.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { toPng } from 'html-to-image'
+import { downloadDataUrlAsImage } from '@yunlefun/utils'
+import { suggestedCoupletsFilename } from '~/config'
+
+async function download() {
+  const container = document.getElementById('spring-festival-container')
+  if (!container)
+    return
+  // const url = await screenShotToBase64(container)
+
+  const url = await toPng(container, {
+    includeQueryParams: true,
+  })
+
+  if (url)
+    downloadDataUrlAsImage(url, suggestedCoupletsFilename)
+}
+</script>
+
+<template>
+  <div id="spring-festival-container" flex="col" class="font-zmx spring-festival-container">
+    <div class="font-zmx m-auto bg-#ff0000 p-2" w="50" text="4xl black">
+      早上好
+    </div>
+    <div flex class="mt-4 items-center justify-between">
+      <div class="spring-festival-couplet">
+        春眠不觉晓
+      </div>
+
+      <div relative class="spring-festival-fu-container">
+        <div class="spring-festival-fu" />
+        <!-- not inset-0 for compatibility -->
+        <span class="fu-char absolute bottom-0 left-0 right-0 top-0">
+          福
+        </span>
+      </div>
+
+      <div class="spring-festival-couplet">
+        处处闻啼鸟
+      </div>
+    </div>
+  </div>
+
+  <div class="font-zmx mt-4 flex" text="black" gap="2">
+    <button class="w-full btn" text="black" @click="download">
+      下载图片
+    </button>
+    <button class="w-full btn" text="black" @click="download">
+      拷贝图片
+    </button>
+  </div>
+</template>
+
+<style lang="scss">
+:root {
+  --ac-fu-font-size: 5rem;
+}
+
+.spring-festival-fu {
+  // square
+  width: var(--ac-fu-font-size);
+  height: var(--ac-fu-font-size);
+
+  transform: rotate(45deg);
+
+  color: black;
+  background-color: red;
+
+  &-container {
+    font-size: calc(var(--ac-fu-font-size) - 0.5rem);
+    color: black;
+
+    transform: rotate(180deg);
+
+    .fu-char {
+      margin-top: -0.8rem;
+    }
+  }
+}
+
+.spring-festival-couplet {
+  font-size: 2.5rem;
+
+  color: black;
+  background-color: red;
+
+  writing-mode: vertical-lr;
+
+  padding: 1.5rem 0.4rem 1.4rem 0.4rem;
+  // 文字 gap
+  letter-spacing: 1rem;
+}
+</style>
diff --git a/composables/app.ts b/composables/app.ts
new file mode 100644
index 0000000..169970b
--- /dev/null
+++ b/composables/app.ts
@@ -0,0 +1,12 @@
+import { acceptHMRUpdate, defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', () => {
+  const prompt = ref('')
+
+  return {
+    prompt,
+  }
+})
+
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useAppStore, import.meta.hot))
diff --git a/config/index.ts b/config/index.ts
new file mode 100644
index 0000000..c1f09df
--- /dev/null
+++ b/config/index.ts
@@ -0,0 +1 @@
+export const suggestedCoupletsFilename = 'AI 春联.png'
diff --git a/constants/index.ts b/constants/index.ts
index 082eae4..6650dcc 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -1,2 +1,2 @@
-export const appName = 'Vitesse for Nuxt 3'
-export const appDescription = 'Vitesse for Nuxt 3'
+export const appName = 'AI 春联'
+export const appDescription = 'AI 春联生成'
diff --git a/layouts/default.vue b/layouts/default.vue
index 48d7b58..671062b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,9 +1,7 @@
 <template>
-  <main class="px-10 py-20 text-center">
+  <main class="p-6 text-center">
+    <DarkToggle class="absolute right-4 top-4" />
+
     <slot />
-    <Footer />
-    <div class="mx-auto mt-5 text-center text-sm opacity-25">
-      [Default Layout]
-    </div>
   </main>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e960f20..7fa77e4 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -21,6 +21,7 @@ export default defineNuxtConfig({
 
   css: [
     '@unocss/reset/tailwind.css',
+    '~/styles/index.scss',
   ],
 
   colorMode: {
@@ -43,10 +44,18 @@ export default defineNuxtConfig({
   app: {
     head: {
       viewport: 'width=device-width,initial-scale=1',
+      // <link rel="preconnect" href="https://fonts.googleapis.com">
+      // <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+      // <link href="https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
       link: [
-        { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
-        { rel: 'icon', type: 'image/svg+xml', href: '/nuxt.svg' },
-        { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
+        // { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
+        { rel: 'icon', type: 'image/svg+xml', href: '/layout-column-line.svg' },
+        { rel: 'apple-touch-icon', href: '/layout-column-line.svg' },
+
+        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: 'anonymous' },
+        // use local font for load
+        // { href: 'https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap', rel: 'stylesheet' },
       ],
       meta: [
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },
diff --git a/package.json b/package.json
index 6708c47..f8428e7 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^2.6.3",
     "@iconify-json/carbon": "^1.1.27",
+    "@iconify-json/ri": "^1.1.19",
     "@iconify-json/twemoji": "^1.1.15",
     "@nuxtjs/color-mode": "^3.3.2",
     "@pinia/nuxt": "^0.5.1",
@@ -23,13 +24,17 @@
     "@unocss/nuxt": "^0.58.3",
     "@vite-pwa/nuxt": "^0.4.0",
     "@vueuse/nuxt": "^10.7.2",
+    "@yunlefun/utils": "0.1.2-beta.4",
     "consola": "^3.2.3",
+    "copy-image-clipboard": "^2.1.2",
     "eslint": "npm:eslint-ts-patch@^8.56.0-0",
     "eslint-plugin-format": "^0.1.0",
     "eslint-ts-patch": "^8.56.0-0",
+    "html-to-image": "^1.11.11",
     "nuxt": "^3.9.3",
     "nuxt-module-eslint-config": "^0.0.2",
     "pinia": "^2.1.7",
+    "sass": "^1.70.0",
     "tsx": "^4.7.0",
     "typescript": "^5.3.3",
     "vue-tsc": "^1.8.27"
diff --git a/packages/ai/src/api.ts b/packages/ai/src/api.ts
index 0985e59..cb5378c 100644
--- a/packages/ai/src/api.ts
+++ b/packages/ai/src/api.ts
@@ -1,3 +1,4 @@
+import consola from 'consola'
 import { baseChatCompletionCreateParams, baseModel, openai } from './config'
 
 export async function getCompletion(msg: string) {
@@ -10,17 +11,40 @@ export async function getCompletion(msg: string) {
   return chatCompletion.choices
 }
 
+export interface SprintFestivalCouplets {
+  上联: string
+  下联: string
+  横批: string
+  总结: string
+}
+
 export async function getCouplets(couplet: string) {
+  const tooltip = [
+    '请为我生成一组春联，包含上联、下联各一句，每句字数在五到十三字之间，并附上一个恰当的横批。',
+    '并给出一个字总结。',
+    '尽量不要使用生僻字。',
+    '以下述 JSON 给出：',
+    `export interface SprintFestivalCouplets {
+  上联: string
+  下联: string
+  横批: string
+  总结: string
+}`,
+  ]
+
   const chatCompletion = await openai.chat.completions.create({
     messages: [
-      { role: 'system', content: '你是一个诗人，擅长写对联，我将给你一个上联，你回答一个下联。' },
-      { role: 'user', content: couplet },
+      {
+        role: 'system',
+        content: tooltip.join('\n'),
+      },
+      // { role: 'user', content: couplet },
     ],
     model: 'deepseek-chat',
     max_tokens: 300,
     // stream: true
   })
 
-  console.log(chatCompletion)
+  consola.debug(chatCompletion)
   return chatCompletion.choices[0].message
 }
diff --git a/pages/hi/[id].vue b/pages/hi/[id].vue
deleted file mode 100644
index 1b25267..0000000
--- a/pages/hi/[id].vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup lang="ts">
-const route = useRoute<'hi-id'>()
-const user = useUserStore()
-const name = route.params.id
-
-watchEffect(() => {
-  user.setNewName(route.params.id as string)
-})
-
-definePageMeta({
-  layout: 'home',
-})
-</script>
-
-<template>
-  <div>
-    <div i-twemoji:waving-hand inline-block animate-shake-x animate-duration-5000 text-4xl />
-    <h3 text-2xl font-500>
-      Hi,
-    </h3>
-    <div text-xl>
-      {{ name }}!
-    </div>
-
-    <template v-if="user.otherNames.length">
-      <p my-4 text-sm>
-        <span op-50>Also as known as:</span>
-        <ul>
-          <li v-for="otherName in user.otherNames" :key="otherName">
-            <router-link :to="`/hi/${otherName}`" replace>
-              {{ otherName }}
-            </router-link>
-          </li>
-        </ul>
-      </p>
-    </template>
-
-    <Counter />
-
-    <div>
-      <NuxtLink
-        class="m-3 text-sm btn"
-        to="/"
-      >
-        Back
-      </NuxtLink>
-    </div>
-  </div>
-</template>
diff --git a/pages/index.vue b/pages/index.vue
index eb8b266..53eb8d8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,16 +1,24 @@
 <script setup lang="ts">
-const online = useOnline()
+// const online = useOnline()
 </script>
 
 <template>
   <div>
-    <Logos mb-6 />
+    <!-- <Logos mb-6 /> -->
+
+    <h2 class="font-zmx my-4" text="4xl">
+      AI 春联
+    </h2>
+
+    <AiPrompt class="mb-4" />
+
     <Suspense>
       <ClientOnly>
-        <PageView v-if="online" />
-        <div v-else text-gray:80>
+        <SpringFestivalCouplets />
+        <!-- <PageView v-if="online" /> -->
+        <!-- <div v-else text-gray:80>
           You're offline
-        </div>
+        </div> -->
       </ClientOnly>
       <template #fallback>
         <div italic op50>
@@ -18,6 +26,5 @@ const online = useOnline()
         </div>
       </template>
     </Suspense>
-    <InputEntry />
   </div>
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3363d8c..5e2d344 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@iconify-json/carbon':
         specifier: ^1.1.27
         version: 1.1.27
+      '@iconify-json/ri':
+        specifier: ^1.1.19
+        version: 1.1.19
       '@iconify-json/twemoji':
         specifier: ^1.1.15
         version: 1.1.15
@@ -35,9 +38,15 @@ importers:
       '@vueuse/nuxt':
         specifier: ^10.7.2
         version: 10.7.2(nuxt@3.9.3)(rollup@2.79.1)(vue@3.4.15)
+      '@yunlefun/utils':
+        specifier: 0.1.2-beta.4
+        version: 0.1.2-beta.4
       consola:
         specifier: ^3.2.3
         version: 3.2.3
+      copy-image-clipboard:
+        specifier: ^2.1.2
+        version: 2.1.2
       eslint:
         specifier: npm:eslint-ts-patch@^8.56.0-0
         version: /eslint-ts-patch@8.56.0-0
@@ -47,15 +56,21 @@ importers:
       eslint-ts-patch:
         specifier: ^8.56.0-0
         version: 8.56.0-0
+      html-to-image:
+        specifier: ^1.11.11
+        version: 1.11.11
       nuxt:
         specifier: ^3.9.3
-        version: 3.9.3(eslint-ts-patch@8.56.0-0)(rollup@2.79.1)(typescript@5.3.3)(vite@5.0.11)(vue-tsc@1.8.27)
+        version: 3.9.3(eslint-ts-patch@8.56.0-0)(rollup@2.79.1)(sass@1.70.0)(typescript@5.3.3)(vite@5.0.11)(vue-tsc@1.8.27)
       nuxt-module-eslint-config:
         specifier: ^0.0.2
         version: 0.0.2(@types/eslint@8.44.1)(eslint-ts-patch@8.56.0-0)(nuxt@3.9.3)(rollup@2.79.1)(typescript@5.3.3)(vite@5.0.11)
       pinia:
         specifier: ^2.1.7
         version: 2.1.7(typescript@5.3.3)(vue@3.4.15)
+      sass:
+        specifier: ^1.70.0
+        version: 1.70.0
       tsx:
         specifier: ^4.7.0
         version: 4.7.0
@@ -1778,6 +1793,12 @@ packages:
       '@iconify/types': 2.0.0
     dev: true
 
+  /@iconify-json/ri@1.1.19:
+    resolution: {integrity: sha512-S9usTucQOY//J3LGIGZ+A6i8AYGCStDcLKjmWzI2UPnWJo+Xd5dESMQGkhOI5BlG3W4AtH6RmiXcpbPy3krmjQ==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify-json/twemoji@1.1.15:
     resolution: {integrity: sha512-ze2CAOwIWBKIP6ih6qMDItasVjRicktl2Qr3/ohZSMToAHm9z3Q6HCwE48eT0+D+uFpGBlNRQ22HHyE5izyhDg==}
     dependencies:
@@ -2015,8 +2036,8 @@ packages:
       '@nuxt/kit': 3.9.3(rollup@2.79.1)
       '@nuxt/schema': 3.9.3(rollup@2.79.1)
       execa: 7.2.0
-      nuxt: 3.9.3(eslint-ts-patch@8.56.0-0)(rollup@2.79.1)(typescript@5.3.3)(vite@5.0.11)(vue-tsc@1.8.27)
-      vite: 5.0.11
+      nuxt: 3.9.3(eslint-ts-patch@8.56.0-0)(rollup@2.79.1)(sass@1.70.0)(typescript@5.3.3)(vite@5.0.11)(vue-tsc@1.8.27)
+      vite: 5.0.11(sass@1.70.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -2063,7 +2084,7 @@ packages:
       launch-editor: 2.6.1
       local-pkg: 0.5.0
       magicast: 0.3.2
-      nuxt: 3.9.3(eslint-ts-patch@8.56.0-0)(rollup@2.79.1)(typescript@5.3.3)(vite@5.0.11)(vue-tsc@1.8.27)
+      nuxt: 3.9.3(eslint-ts-patch@8.56.0-0)(rollup@2.79.1)(sass@1.70.0)(typescript@5.3.3)(vite@5.0.11)(vue-tsc@1.8.27)
       nypm: 0.3.4
       ohash: 1.1.3
       pacote: 17.0.6
@@ -2076,7 +2097,7 @@ packages:
       simple-git: 3.22.0
       sirv: 2.0.4
       unimport: 3.7.1(rollup@2.79.1)
-      vite: 5.0.11
+      vite: 5.0.11(sass@1.70.0)
       vite-plugin-inspect: 0.8.1(@nuxt/kit@3.9.3)(rollup@2.79.1)(vite@5.0.11)
       vite-plugin-vue-inspector: 4.0.2(vite@5.0.11)
       which: 3.0.1
@@ -2166,7 +2187,7 @@ packages:
     resolution: {integrity: sha512-5gc02Pu1HycOVUWJ8aYsWeeXcSTPe8iX8+KIrhyEtEoOSkY0eMBuo0ssljB8wALuEmepv31DlYe5gpiRwkjESA==}
     dev: true
 
-  /@nuxt/vite-builder@3.9.3(eslint-ts-patch@8.56.0-0)(rollup@2.79.1)(typescript@5.3.3)(vue-tsc@1.8.27)(vue@3.4.15):
+  /@nuxt/vite-builder@3.9.3(eslint-ts-patch@8.56.0-0)(rollup@2.79.1)(sass@1.70.0)(typescript@5.3.3)(vue-tsc@1.8.27)(vue@3.4.15):
     resolution: {integrity: sha512-HruOrxn0g6TS31j3jycJvGZ7pt3JNEbcXNByVh7YJwQx6ToFX8kPWRu4LPeMhrLYvZzeUr2w3iELBECFxbDmvw==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
@@ -2201,8 +2222,8 @@ packages:
       strip-literal: 2.0.0
       ufo: 1.3.2
       unplugin: 1.6.0
-      vite: 5.0.11
-      vite-node: 1.2.1
+      vite: 5.0.11(sass@1.70.0)
+      vite-node: 1.2.1(sass@1.70.0)
       vite-plugin-checker: 0.6.2(eslint-ts-patch@8.56.0-0)(typescript@5.3.3)(vite@5.0.11)(vue-tsc@1.8.27)
       vue: 3.4.15(typescript@5.3.3)
       vue-bundle-renderer: 2.0.0
@@ -3155,7 +3176,7 @@ packages:
       '@unocss/core': 0.58.3
       '@unocss/reset': 0.58.3
       '@unocss/vite': 0.58.3(rollup@2.79.1)(vite@5.0.11)
-      vite: 5.0.11
+      vite: 5.0.11(sass@1.70.0)
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -3404,7 +3425,7 @@ packages:
       chokidar: 3.5.3
       fast-glob: 3.3.2
       magic-string: 0.30.5
-      vite: 5.0.11
+      vite: 5.0.11(sass@1.70.0)
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -3474,7 +3495,7 @@ packages:
       '@babel/core': 7.23.7
       '@babel/plugin-transform-typescript': 7.23.4(@babel/core@7.23.7)
       '@vue/babel-plugin-jsx': 1.1.5(@babel/core@7.23.7)
-      vite: 5.0.11
+      vite: 5.0.11(sass@1.70.0)
       vue: 3.4.15(typescript@5.3.3)
     transitivePeerDependencies:
       - supports-color
@@ -3487,7 +3508,7 @@ packages:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.0.11
+      vite: 5.0.11(sass@1.70.0)
       vue: 3.4.15(typescript@5.3.3)
     dev: true
 
@@ -3675,7 +3696,7 @@ packages:
       '@vueuse/core': 10.7.2(vue@3.4.15)
       '@vueuse/metadata': 10.7.2
       local-pkg: 0.5.0
-      nuxt: 3.9.3(eslint-ts-patch@8.56.0-0)(rollup@2.79.1)(typescript@5.3.3)(vite@5.0.11)(vue-tsc@1.8.27)
+      nuxt: 3.9.3(eslint-ts-patch@8.56.0-0)(rollup@2.79.1)(sass@1.70.0)(typescript@5.3.3)(vite@5.0.11)(vue-tsc@1.8.27)
       vue-demi: 0.14.6(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -3807,6 +3828,10 @@ packages:
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
     dev: true
 
+  /@yunlefun/utils@0.1.2-beta.4:
+    resolution: {integrity: sha512-883xjtw1j6HT4rZBvQwcpMvNFIIo4bv9wuoC3S2q97Sr2CgXFBwszBJLwE76XPNu9p7EZXdFIwggQ6A53skopQ==}
+    dev: true
+
   /abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
     dev: true
@@ -4540,6 +4565,10 @@ packages:
     resolution: {integrity: sha512-mWYvfOLrfEc996hlKcdABeIiPHUPC6DM2QYZdGGOvhOTbA3tjm2eBwqlJpoFdjC89NI4Qt6h0Pu06Mp+1Pj5OQ==}
     dev: true
 
+  /copy-image-clipboard@2.1.2:
+    resolution: {integrity: sha512-3VCXVl2IpFfOyD8drv9DozcNlwmqBqxOlsgkEGyVAzadjlPk1go8YNZyy8QmTnwHPxSFpeCR9OdsStEdVK7qDA==}
+    dev: true
+
   /core-js-compat@3.35.0:
     resolution: {integrity: sha512-5blwFAddknKeNgsjBzilkdQ0+YK8L1PfqPYq40NOYMYFSS38qj+hpTcLLWwpIwA2A5bje/x5jmVn2tzUMg9IVw==}
     dependencies:
@@ -6293,6 +6322,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /html-to-image@1.11.11:
+    resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==}
+    dev: true
+
   /http-cache-semantics@4.1.1:
     resolution: {integrity: sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==}
     dev: true
@@ -6387,6 +6420,10 @@ packages:
     resolution: {integrity: sha512-ZBGjl0ZMEMeOC3Ns0wUF/5UdUmr3qQhBSCniT0LxOgGGIRHiNFOkMtIHB7EOznRU47V2AxPgiVP+s+0/UCU0Hg==}
     dev: true
 
+  /immutable@4.3.5:
+    resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==}
+    dev: true
+
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -7723,7 +7760,7 @@ packages:
       - vite
     dev: true
 
-  /nuxt@3.9.3(eslint-ts-patch@8.56.0-0)(rollup@2.79.1)(typescript@5.3.3)(vite@5.0.11)(vue-tsc@1.8.27):
+  /nuxt@3.9.3(eslint-ts-patch@8.56.0-0)(rollup@2.79.1)(sass@1.70.0)(typescript@5.3.3)(vite@5.0.11)(vue-tsc@1.8.27):
     resolution: {integrity: sha512-IzBJAJImqCGfspVZzvznrALnFIJ5rPe+VJvY8OiccwRzWT8sEygVRjh3Mc64yWV6P59rz497wp9RBBBhuV2MVA==}
     engines: {node: ^14.18.0 || >=16.10.0}
     hasBin: true
@@ -7742,7 +7779,7 @@ packages:
       '@nuxt/schema': 3.9.3(rollup@2.79.1)
       '@nuxt/telemetry': 2.5.3(rollup@2.79.1)
       '@nuxt/ui-templates': 1.3.1
-      '@nuxt/vite-builder': 3.9.3(eslint-ts-patch@8.56.0-0)(rollup@2.79.1)(typescript@5.3.3)(vue-tsc@1.8.27)(vue@3.4.15)
+      '@nuxt/vite-builder': 3.9.3(eslint-ts-patch@8.56.0-0)(rollup@2.79.1)(sass@1.70.0)(typescript@5.3.3)(vue-tsc@1.8.27)(vue@3.4.15)
       '@unhead/dom': 1.8.10
       '@unhead/ssr': 1.8.10
       '@unhead/vue': 1.8.10(vue@3.4.15)
@@ -8920,6 +8957,16 @@ packages:
     dev: true
     optional: true
 
+  /sass@1.70.0:
+    resolution: {integrity: sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.3.5
+      source-map-js: 1.0.2
+    dev: true
+
   /schema-utils@3.3.0:
     resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
     engines: {node: '>= 10.13.0'}
@@ -9855,7 +9902,7 @@ packages:
       '@unocss/transformer-variant-group': 0.58.3
       '@unocss/vite': 0.58.3(rollup@2.79.1)(vite@5.0.11)
       '@unocss/webpack': 0.58.3(rollup@2.79.1)(webpack@5.88.2)
-      vite: 5.0.11
+      vite: 5.0.11(sass@1.70.0)
     transitivePeerDependencies:
       - postcss
       - rollup
@@ -10031,7 +10078,7 @@ packages:
       builtins: 5.0.1
     dev: true
 
-  /vite-node@1.2.1:
+  /vite-node@1.2.1(sass@1.70.0):
     resolution: {integrity: sha512-fNzHmQUSOY+y30naohBvSW7pPn/xn3Ib/uqm+5wAJQJiqQsU0NBR78XdRJb04l4bOFKjpTWld0XAfkKlrDbySg==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -10040,7 +10087,7 @@ packages:
       debug: 4.3.4
       pathe: 1.1.2
       picocolors: 1.0.0
-      vite: 5.0.11
+      vite: 5.0.11(sass@1.70.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -10098,7 +10145,7 @@ packages:
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.1
       typescript: 5.3.3
-      vite: 5.0.11
+      vite: 5.0.11(sass@1.70.0)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.8
@@ -10125,7 +10172,7 @@ packages:
       open: 9.1.0
       picocolors: 1.0.0
       sirv: 2.0.4
-      vite: 5.0.11
+      vite: 5.0.11(sass@1.70.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -10142,7 +10189,7 @@ packages:
       debug: 4.3.4
       fast-glob: 3.3.2
       pretty-bytes: 6.1.1
-      vite: 5.0.11
+      vite: 5.0.11(sass@1.70.0)
       workbox-build: 7.0.0
       workbox-window: 7.0.0
     transitivePeerDependencies:
@@ -10163,12 +10210,12 @@ packages:
       '@vue/compiler-dom': 3.4.15
       kolorist: 1.8.0
       magic-string: 0.30.5
-      vite: 5.0.11
+      vite: 5.0.11(sass@1.70.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite@5.0.11:
+  /vite@5.0.11(sass@1.70.0):
     resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -10199,6 +10246,7 @@ packages:
       esbuild: 0.19.11
       postcss: 8.4.33
       rollup: 4.9.5
+      sass: 1.70.0
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
diff --git a/public/fonts/MaShanZheng-Regular.ttf b/public/fonts/MaShanZheng-Regular.ttf
new file mode 100644
index 0000000..2fab282
Binary files /dev/null and b/public/fonts/MaShanZheng-Regular.ttf differ
diff --git a/public/layout-column-line.svg b/public/layout-column-line.svg
new file mode 100644
index 0000000..a26d7d0
--- /dev/null
+++ b/public/layout-column-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 5H5V19H11V5ZM13 5V19H19V5H13ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3Z"></path></svg>
\ No newline at end of file
diff --git a/styles/index.scss b/styles/index.scss
new file mode 100644
index 0000000..5c1c840
--- /dev/null
+++ b/styles/index.scss
@@ -0,0 +1,11 @@
+// https://fonts.google.com/share?selection.family=Zhi+Mang+Xing
+.font-zmx {
+  font-family: "Zhi Mang Xing", 华文楷体, KaiTi, "STKaiti", "Kaiti SC", "楷体","楷体_GB2312", cursive, serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Zhi Mang Xing";
+  src: url('/fonts/MaShanZheng-Regular.ttf') format('truetype');
+}
diff --git a/uno.config.ts b/uno.config.ts
index d024e38..8aa686d 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -4,15 +4,15 @@ import {
   presetIcons,
   presetTypography,
   presetUno,
-  presetWebFonts,
+  // presetWebFonts,
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
 
 export default defineConfig({
   shortcuts: [
-    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
-    ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
+    ['btn', 'text-xl px-4 py-2 rounded inline-block bg-yellow-500 text-white cursor-pointer hover:bg-yellow-600 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+    ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-red-600'],
   ],
   presets: [
     presetUno(),
@@ -21,13 +21,8 @@ export default defineConfig({
       scale: 1.2,
     }),
     presetTypography(),
-    presetWebFonts({
-      fonts: {
-        sans: 'DM Sans',
-        serif: 'DM Serif Display',
-        mono: 'DM Mono',
-      },
-    }),
+    // presetWebFonts({
+    // }),
   ],
   transformers: [
     transformerDirectives(),