DESIGN.md · diff

git:20261001.c4ac61b to git:20261001.c83eb57

1 added, 1 removed. Audit A to A.

---

name: MemeMeow

description: 简洁、可读且带一点趣味的本地表情包工作台，用自然语言检索、整理图片并追踪异步任务。

colors:

ink: "#2A2638"

ink-soft: "#39334D"

workspace: "#F8F7FB"

surface: "#FFFFFF"

surface-muted: "#F0EEF8"

divider: "#E3E0ED"

divider-strong: "#C7C2D8"

text-muted: "#625D72"

text-muted-soft: "#716B82"

accent: "#5157D9"

accent-deep: "#3C42B1"

success: "#1F7A5A"

info: "#3B66A5"

warning: "#8A651C"

error: "#B64855"

focus: "#3B43B8"

typography:

body:

fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"

fontSize: "16px"

fontWeight: 400

lineHeight: 1.5

label:

fontSize: "14px"

fontWeight: 500

lineHeight: 1.35

control:

fontSize: "16px"

fontWeight: 500

lineHeight: 1.2

headline:

fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"

fontSize: "36px"

fontWeight: 750

lineHeight: 1.15

rounded:

control: "6px"

surface: "8px"

spacing:

compact: "12px"

field: "16px"

panel: "32px"

components:

button-primary:

backgroundColor: "{colors.accent}"

textColor: "#FFFFFF"

rounded: "{rounded.control}"

minHeight: "46px"

button-quiet:

backgroundColor: "{colors.surface}"

textColor: "{colors.ink-soft}"

rounded: "{rounded.control}"

minHeight: "46px"

heading-rule:

use: "标题下使用短紫蓝斜线作为克制分隔，不作为大面积背景"

---

# Design System: MemeMeow

## Overview

**Creative North Star: “清晰的表达工作面”**

MemeMeow 是本地图片库的操作台。用户在浅色工作面上用自然语言查找、整理和修复表情包；信息先于装饰，真实图片是主要视觉对象。紫蓝只承担交互、当前导航和焦点，深墨承担品牌与正文，轻微倾斜的深色方块 M 是唯一克制品牌标记。

## Visual World

工作区以连续阅读轴组织：导航和标题说清楚“这里是什么”，紫蓝标识“现在可以做什么”。标题下的短斜线提供方向感，但不扩展成背景图案。按钮、输入和状态使用轻边框与稳定触达尺寸，图片内容保持不被装饰抢夺。

## Colors

- **Ink** (`#2A2638`) 与 **Ink soft** (`#39334D`)：品牌、标题、主要文本和正文。

- **Workspace** (`#F8F7FB`) 与 **Surface** (`#FFFFFF`)：工作区背景与图片/表单内容面。

- **Accent** (`#5157D9`)：主操作、当前导航和焦点，不用于大面积背景。

- **Divider** (`#E3E0ED`) 与 **Divider strong** (`#C7C2D8`)：列表、字段和分区边界。

- **Success** (`#1F7A5A`)、**Info** (`#3B66A5`)、**Warning** (`#8A651C`)、**Error** (`#B64855`)：状态必须带文字，不仅依赖颜色。

- **Focus** (`#3B43B8`)：键盘焦点环，保持与主交互色区分。

## Typography

全界面使用系统无衬线，优先稳定的中英文混排。正文基准为 16px/1.5，关键操作与输入为 16px，功能元数据为 14px，页面标题 36px（移动端 32px）。不使用 10-12px 装饰文字；通过重量、间距和轻边框区分状态。

## Layout

桌面保留 232px 侧栏与最大 1280px 内容面，标题、检索表单和列表沿同一条阅读轴排列。图片库提供方块和列表两种展示，任务页与设置页使用分隔行。移动端保留顶部五项路由导航，导航按钮最小高度 50px，正文左右留 18px；表格变为带字段标签的行，抽屉和图片 JSON 预览变为全屏。

## Controls and States

- 主按钮使用紫蓝和白色文字，禁用态改用中性灰并保持可读对比度。

- 安静按钮使用白底和强分隔线，hover/focus/disabled 维持同一尺寸，触达区不小于 44px。

- 输入、选择框和上传区域使用白色内容面；错误、成功、加载和空状态都同时提供文字说明。

- 任务状态通过中文标签、状态点和进度文字共同表达；不在用户界面显示后端枚举。

- 加载使用行骨架或明确的进行中文案；`prefers-reduced-motion` 下关闭过渡和骨架动画。移动端顶部继续保留“API 已连接”语义，但隐藏模型名称以节省垂直空间。

## Responsive Rules

移动端不压缩字体来塞入桌面结构：顶部保留“API 已连接”，五项导航保持稳定列宽；检索表单垂直堆叠，图片结果两列，工具栏和任务字段允许换行。320px 及以上宽度下，长文件名与 JSON 使用 `overflow-wrap: anywhere`，按钮组在需要时改为单列，禁止横向滚动和遮挡。

## Do's and Don'ts

### Do:

- **Do** 用文字状态、进度和恢复动作表达异步任务。

- **Do** 让标题下的短斜线提供分区方向，保持页面的一点性格。

- **Do** 在图片库和任务页保留稳定排列和可键盘操作的控件。

### Don't:

- **Don't** 把斜线铺满背景，或用它代替语义状态。

- **Don't** 用卡片套卡片、营销 hero、渐变和无目的动画抢夺工作区注意力。

- **Don't** 把原始任务枚举、低对比度灰字或只依赖颜色的状态交给用户阅读。

- **Don't** 在模块下放解释性小字；用界面结构、操作控件和状态表达功能，仅保留必要的错误、状态、事实和字段帮助。

## 图片库与合集

- 图片库默认用方块展示当前 scope 的图片，并提供列表切换。每个方块左上角是复选框，右侧从上到下显示视觉向量、语境、文本索引状态条；列表状态标签也使用相同顺序。状态条提供完整文字标签。右上角按钮打开相邻操作浮窗，包含查看详情、重命名和删除。切换展示方式保留当前选择，浮窗支持 Escape、外部点击和键盘焦点移出时关闭。合集使用相同的工作区导航和真实封面，成员关系不复制图片身份。

+ 图片库默认用方块展示当前 scope 的图片，并提供列表切换。每个方块左上角是复选框，右侧从上到下显示视觉向量、语境、文本向量状态条；列表状态标签也使用相同顺序。状态条提供完整文字标签。右上角按钮打开相邻操作浮窗，包含查看详情、重命名和删除。切换展示方式保留当前选择，浮窗支持 Escape、外部点击和键盘焦点移出时关闭。合集使用相同的工作区导航和真实封面，成员关系不复制图片身份。

## 后续需求

“最近看过”不在当前工作台展示，记录为后续独立需求。