面书签 UI 设计规范 (DesktopBookmark UI Spec)
Capabilities
本技能提供 DesktopBookmark（桌面书签）项目的完整 UI 设计规范和实现指导：
折叠态书签：56×56 毛玻璃方块，流动光带动画，呼吸阴影，屏幕边缘磁吸拖拽
5 套主题系统：墨色（深蓝暗调）、纸色（暖黄纸张）、朱砂（红棕暖调）、青黛（墨绿色系）、暗夜（极简暗黑）
CSS 变量架构：所有界面元素通过 CSS 变量切换，包含 --bg-panel、--text、--accent、--menu-bg 等 20+ 变量
分类下拉菜单：自定义毛玻璃下拉框，支持键盘导航（↓↑→ Enter Esc），实时同步历史分类，跟随 5 套主题变色
组件库：待办条目、想法卡片、知识笔记（含图片粘贴）、时间线、回收站、报告生成
零 emoji 原则：所有图标用 CSS ::before/::after 手绘
去硬边设计：分割线用 box-shadow 替代 border，卡片用内微光分层
书法字体："LXGW WenKai","STKaiti","KaiTi" 降级链
Use Cases
前端开发者：需要实现毛玻璃/Gassmorphism UI 时，参考组件规范和 CSS 变量结构
UI 设计师：需要主题系统方案、色彩体系或排版指南时调用
Electron 开发者：需要透明窗口、alwaysOnTop、系统托盘等 Electron 实现参考
产品经理：需要了解桌面端浮动书签交互模式的设计思路
Example Input/Output
输入：怎么实现一个毛玻璃折叠书签？
输出：参考 desktop-bookmark-ui 规范——
- 尺寸：56×56px 正方形
- .bookmark 使用 backdrop-filter: blur(10px)
- 背景用 radial-gradient 模拟内高光
- ::after 伪元素做流动光带动画
- box-shadow 做呼吸效果
输入：怎么添加一套新主题？
输出：在 CSS :root 中定义新主题变量，包含：
--bg-panel, --bg-card, --bg-hover, --bg-input
--text, --text-secondary, --text-muted
--accent, --accent-light, --border, --border-focus
--menu-bg, --menu-text, --menu-hover 等
输入：自定义分类下拉怎么做？
输出：使用 div#cat-menu + position:absolute
- ↓ 键弹出，↑↓ 导航，Enter 选中，Esc 关闭
- 数据源实时读取 state 中所有历史分类
- 5 套主题各自定义 --menu-bg/--menu-text/--menu-hover
FAQ
Q: 这个技能需要什么运行环境？
A: OpenClaw 兼容运行时（Hanako / Codex / Claude Code），下载后即可使用。
Q: 产出的设计规范是通用标准还是只适用于特定项目？
A：通用标准。所有 CSS 变量和组件规则可适配到任意 Electron / Web 前端项目，并非 DesktopBookmark 独有。
Q: 是否包含设计源文件（Figma / Sketch）？
A：不包含。本技能提供的是代码级 CSS 规范和实现指南，不提供设计工具源文件。
Q: 技能内是否包含第三方品牌或未授权内容？
A：不包含。所有代码和规范均为原创，不涉及第三方品牌、商标或知识产权。
