GULIAI Branding Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Apply the supplied GULIAI Logo and the name GULIAI WorkBuddy 教程与使用指南 to the local reading website.

Architecture: Store the supplied raster wordmark under VitePress public assets and render it from the navigation title area. Change the shared VitePress configuration, SEO constants, and homepage copy so browser metadata and visible identity use the same name.

Tech Stack: VitePress 1.6.4, Vue 3, CSS, npm, Vitest.

Global Constraints

• Use /Users/owenwang/Desktop/个人资料/人物/guli logo/微信图片_2026-08-08_214447_537.png as the source logo.
• Preserve the full black-background GULIAI wordmark without cropping or redrawing it.
• Do not alter bluebook chapters, cases, navigation destinations, or localhost-only operation.
• Use exactly GULIAI WorkBuddy 教程与使用指南 for visible and metadata site naming.

---

Task 1: Add the GULIAI wordmark and shared site title

Files:

• Create: docs/public/brand/guliai-logo.png
• Modify: docs/.vitepress/config.mts
• Modify: docs/.vitepress/seo.ts
• Modify: docs/index.md
• Modify: docs/.vitepress/theme/components/HomePage.vue
• Modify: docs/.vitepress/theme/style.css
• Test: production build and existing Vitest suite

Interfaces:

• Consumes: the provided PNG wordmark

• Produces: /brand/guliai-logo.png and a common title string used in browser and visible page identity

• [ ] Step 1: Confirm the source asset is readable

Run: sips -g pixelWidth -g pixelHeight '/Users/owenwang/Desktop/个人资料/人物/guli logo/微信图片_2026-08-08_214447_537.png'

Expected: image metadata reports a positive width and height.

• [ ] Step 2: Copy the source image without transformation

Run: mkdir -p docs/public/brand && cp '/Users/owenwang/Desktop/个人资料/人物/guli logo/微信图片_2026-08-08_214447_537.png' docs/public/brand/guliai-logo.png

Expected: docs/public/brand/guliai-logo.png has identical bytes to the source image.

• [ ] Step 3: Replace the shared site title and homepage title strings

Update the VitePress title, title template, navigation site title, SEO site-name constant, page frontmatter, and homepage h1 to GULIAI WorkBuddy 教程与使用指南.

• [ ] Step 4: Replace the pixel navigation mark with the GULIAI image

Use the existing .VPNavBarTitle .title::before pseudo-element with background: url('/brand/guliai-logo.png') center / contain no-repeat; enlarge its width to show the horizontal wordmark; remove the previous CSS mask and ink background.

• [ ] Step 5: Build and test

Run: npm run docs:build && npm test

Expected: VitePress build succeeds and Vitest reports all tests passing.

• [ ] Step 6: Verify rendered local pages

Run: curl --fail --silent http://127.0.0.1:5173/ | rg 'GULIAI WorkBuddy 教程与使用指南'

Expected: the homepage response includes the new name.

• [ ] Step 7: Commit the brand update

Run: git add docs/public/brand docs/.vitepress docs/index.md && git commit -m 'feat: apply GULIAI branding'

Expected: Git records only the new Logo and intended branding changes.