OnePixel AI

文档定位

这份 DESIGN.md 被定义为设计侧的 AGENTS.md。它不负责讲营销故事，而是负责告诉后续的工具页面应该长什么样、哪些结构不能乱动、哪些模块可以替换。

当没有明确参考站时，这份文档优先于临时口头描述；当单个工具业务不同，也优先保持家族外壳稳定，只更换模块内容。

核心结论

• 让 agent 读懂设计语言，不能只说“做得像 PixelTurn 一点”。
• Figma 对人类够用，但对 agent 不够直接，必须把颜色、字号、圆角和组件语义写成文本。
• 这是一份活文档，家族视觉进化时需要一起更新。
• 既要写氛围，也要写 token、层级、结构和禁忌项。

稳定骨架

• 桌面端固定三段：Header、Left Workspace、Right Configuration。
• 内部默认走 12 栏网格，左侧工作区更宽，右侧配置区更稳。
• 移动端不是缩小桌面版，而是改成 Header、Dropzone、信息卡、Queue、Configuration、底部悬浮操作栏的阅读顺序。

视觉氛围与禁忌

• 主基调是明亮、偏纸白、中高对比，但不做纯黑纯白硬碰硬。
• 情绪应该冷静、专业、像被长期维护的浏览器轻工具家族。
• 禁止炫彩渐变主视觉、暗黑霓虹、大面积玻璃拟态、卡片套卡片和过多 hover 特效。

组件与 Agent 规则

• Header、LocaleSwitch、Dropzone、QueueList、SettingsPanel、SegmentedControl、RangeControl 和 MobileFabBar 都属于家族级稳定资产。
• 先保骨架，再换业务；先复用现有组件，再谈新的视觉语言。
• 移动端必须单独检查，中英双语也必须同时成立。