- Target audience: 喜欢拼豆手作的个人创作者、亲子用户与小型工作室,主要在手机或桌面浏览器中把照片变成可直接制作的图纸。
- Use cases: 普通照片转 MARD 图纸;裁剪与去背景;逐格精修;统计用豆量;保存版本;导出 PNG、PDF 和作品备份。
- Brand personality: 像一盒整理得很好的彩色拼豆——轻快、精确、有手作温度。
- Visual direction: 图纸工作台采用浅色顶栏、奶油色点阵画布、白色浮动工具和高饱和粉色主操作;借鉴 Excalidraw 的空间布局,但保留清晰字体与实体拼豆质感。
- Accessibility: 清晰焦点、44px 触控目标、完整键盘操作、尊重减少动态效果偏好,不依赖颜色单独表达状态。
- Differentiation: 用完整 MARD 291 色、自动豆板和去零碎色,让新手拿到图纸后可以直接配豆开拼;复杂参数默认隐藏。
- 普通界面颜色只使用
background、foreground、primary、secondary、muted、border、success和workbench等语义主题;真实拼豆色和画布内容可以使用独立颜色。 - 按钮、状态标签、开关和成组选择优先复用
components/ui中的 shadcn 组件,不在页面里重新定义同类控件。 - 上传区、拼豆画布、色板、原生滑杆和原生展开区属于产品专属界面,可以保留定制结构,但必须沿用统一焦点、圆角和间距规则。
- 新增可操作控件要有清晰的键盘焦点;手机上的主要触控目标不得小于 44px。
- 不增加暗色主题;图纸工作台与顶栏固定使用浅色主题。