PageStyler AI Vibe 项目

项目简介

PageStyler AI（网页装修小插件）是一个开源浏览器扩展，让你像装修房间一样装修任意网页：用一句自然语言描述需求，AI 生成结构化装修方案，也可以用预设主题、元素选择或手动面板调整样式，并把装修结果打包成"装修码"分享给别人一键复刻。项目基于 WXT + Vue 3 + Pinia + Zod 构建，界面采用 Neo Brutalism 风格，目前以 GitHub Release 分发，暂无独立产品官网。

核心功能

• AI 装修：一句自然语言（如"把导航栏换成黄黑撞色"）生成结构化方案，预览满意后再采用；支持多轮增量修改与失效规则智能修复。
• 10 个一键预设主题：午夜深色、专注阅读、玻璃拟态、Neo Brutalism、赛博朋克、报纸模式、樱花模式、柔和护眼、OLED 黑、像素模式。
• 元素选择与手动装修：悬停高亮、点击选中、Shift 多选、Alt 取消、方向键在父子元素间切换，自动识别相似元素批量应用；选中后可手动调整颜色、边框、阴影、字体、布局、透明度，也能一键隐藏或删除元素。
• 装修码分享：装修结果打包为前缀 PSAI1. 的短代码，对方导入即可复刻整套效果。
• 安全可逆与隐私优先：全部操作支持撤销/重做，Alt+Shift+O 一键切换装修效果与原样；数据全部存本地、API Key 不上传、发给 AI 的页面摘要不含输入值、密码与 Cookie。另有可拖动的 SVG 吉祥物入口（6 状态 × 4 配色 × 3 形态）。

技术实现

技术栈为 WXT（Manifest V3，Firefox 默认 MV2）+ Vue 3 script setup + Pinia + Zod + TypeScript。结构上分为 background、content 与 popup/options 三层：background 负责 AI 请求转发、快捷键与消息中转；content 脚本注入页面内 UI 并用 Shadow DOM 隔离，监听消息与 SPA 路由变化；装修数据、预览、撤销/重做、元素选择与 AI 多轮对话状态由 Pinia 统一管理。样式落地的核心是 decoration-engine：把规则编译成单个 style 标签注入，删除元素的规则会登记原位置以便还原；所有要写入页面的 CSS 先经过 css-sanitize 安全闸门，拦截脚本、外部 url() 与声明逃逸。元素选择在捕获阶段拦截事件并用 elementFromPoint 命中检测，支持 Shift/Alt 组合与方向键在 DOM 树中导航。构建产物分别输出 Chrome MV3、Edge 与 Firefox MV2 三个版本，开发模式支持热更新。

快速上手

1. 执行 git clone https://github.com/ns2250225/zhuangxiu.git 后运行 npm install 与 npm run build，产物在 output/ 目录；
2. Chrome 打开 chrome://extensions 开启"开发者模式"，选择"加载已解压的扩展程序"并指向 output/chrome-mv3（Edge/Firefox 按对应方式加载，Firefox 临时载入重启后失效）；
3. 打开插件设置页，在"AI 模型"中填入任意 OpenAI 兼容的 API URL、Key、Model 并测试连接（不用 AI 也可直接用预设与手动装修）；
4. 点击页面右侧吉祥物（或按 Alt+Shift+P）打开装修面板，选择跟 AI 说需求、挑预设主题、元素选择或手动调整，预览满意后"采用"，随时用 Alt+Shift+O 切回原样。

适用人群

希望个性化网页外观但不懂 CSS 的普通用户；喜欢 Neo Brutalism、赛博朋克等风格的极客与设计师；想把自己的网页样式分享给朋友复刻的内容创作者；以及需要在不修改源码前提下统一内网系统视觉风格的前端与运维人员。