zhouxiaoka--autoclip/DESIGN.md

Design System — AutoClip

AutoClip 的设计唯一标准。做任何 UI/视觉决策前先读这里。 方向：克制专业 / Calm Premium（参考 Dia Browser）。安静、精确、留白多、几乎全单色， 只用一个克制的蓝做强调。给"认真做内容的人"用，不是玩具风、不是冷黑科技风。

Product Context

• 是什么：基于 AI 的视频切片桌面工具。粘 B站/YouTube 链接或本地视频 → 自动出切片与合集。
• 给谁用：内容创作者 / 剪辑者。
• 类型：macOS 桌面应用（Tauri + React + TypeScript）。当前用 Ant Design，需按本系统逐屏重做。
• 记忆点：有调性、克制、专业——让人觉得"这是认真的好工具"。

Aesthetic Direction

• 方向：Calm Premium / 克制编辑感。
• 装饰级别：minimal（排版和留白做所有的活，不堆装饰）。
• 气质：安静、精确、从容、高级。大量留白、低信息密度、发丝级分隔。
• 参考：Dia Browser (diabrowser.com) —— sans+serif 混排、近乎全单色、一抹克制强调色。
• 明确不要：玩具撞色、彩色 chip、紫色渐变、霓虹、3 列图标网格、居中堆砌、死黑 #000。

Color

双主题（浅色为主，深色等价）。强调色极克制：只用于进行中状态、活动态、链接；其余一律单色。

浅色（默认）

--bg:        #F6F5F3;  /* 暖浅灰底，非纯白 */
--card:      #FFFFFF;
--ink:       #1A1A19;  /* 柔近黑正文，非纯黑 */
--sub:       #6E6B66;  /* 次级文字 */
--muted:     #A8A59F;  /* 弱化/占位 */
--line:      #EBE9E4;  /* 发丝边框 */
--line-2:    #F0EEEA;  /* 更弱分隔 */
--accent:    #2D6BFF;  /* 唯一强调蓝，克制使用 */
--thumb:     #EEECE8;  /* 缩略图占位底 */
--cta-bg:    #1A1A19;  /* 主按钮：实心墨 */
--cta-fg:    #FFFFFF;

深色

--bg:        #19181A;  /* 暖近黑，非纯黑 */
--card:      #211F22;
--ink:       #ECEAE6;  /* 暖白正文 */
--sub:       #A6A29B;
--muted:     #76726C;
--line:      #2C2A2D;
--line-2:    #232124;
--accent:    #5A8BFF;  /* 深色下蓝亮一档 */
--thumb:     #262428;
--cta-bg:    #ECEAE6;  /* 主按钮：浅墨 */
--cta-fg:    #19181A;

语义色（两主题通用，克制使用）

--ok:    #5BB36A;  /* 已完成（小圆点） */
--warn:  #E6B23C;
--error: #E66A5C;  /* 失败 */
--info:  var(--accent);

• 暗色策略：不是把浅色反相，而是重设表面层级；强调蓝提亮约 10–15% 保证对比。

Typography

sans + serif 混排是高级感来源：衬线只用于拉丁品牌时刻（wordmark、大数字），中文与 UI 一律干净无衬线。

• 品牌/衬线（仅拉丁）：Instrument Serif（含 italic）。用于 AutoClip wordmark、大号英文数字等点睛处。
• 中文：PingFang SC（mac 原生、最克制）优先，跨平台回退 Noto Sans SC。
• UI / 正文（拉丁）：Geist（400/500/600）。不用 Inter/Roboto。
• 数据 / 数字 / 时间码：Geist Mono（tabular）。
• 字体栈：

  --font-sans: "Geist", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;   /* 仅拉丁 */
  --font-mono: "Geist Mono", ui-monospace, monospace;
  

• 字号阶（rem，16px 基准）：

  角色	字号	字重	行高
  wordmark（serif）	28px	400	1.1
  区块标题 h2	16px	600	1.3
  卡片标题	15px	500	1.45
  正文	14–15px	400	1.5
  次级/元信息	12.5–13px	400/500	1.4
  标签/uppercase	11px / letter-spacing .8px	500	—

Spacing

• 基准：4px。
• 密度：spacious（留白多、信息少）。
• 阶：2(2) xs(4) sm(8) md(16) lg(24) xl(32) 2xl(40) 3xl(56)。
• 常用：窗口内边距 56px；区块间距 56px；卡片网格 gap 24px；卡片内边距 20–22px；导入框与首项目区之间大留白。

Layout

• 方式：grid-disciplined（克制网格），不玩编辑式破格。
• 项目网格：3 列（大间距、大卡片），窄屏降到 2/1 列。
• 最大内容宽度：跟随窗口，左右 56px 安全边距。
• 圆角：卡片/输入框/缩略图 16px；小元素 10px；按钮/徽章/分段切换 999px（胶囊）。
• 边框：发丝级 1px solid var(--line)，靠边框而非重阴影分隔。

Components

• 主按钮：实心墨胶囊（浅色=黑/深色=浅墨），文字 14.5px/500，内边距 ~14×26px。
• 次按钮：发丝边框胶囊，文字 --sub。
• 分段切换（链接/文件）：胶囊容器 --line-2 底，选中项 --card 底 + 极轻阴影。
• 状态表达（克制）：缩略图左上角小圆点 + 文字标签（下载中/分析中=accent、已完成=ok、失败=error）。进度用 4px 细线（accent），右侧百分比用 mono。
• 已完成元信息：纯灰 mono 数字 + 中点分隔，例 7 切片 · 1 合集 · 8 个月前，不用彩色 chip。
• 阴影：极轻。0 1px 2px rgba(0,0,0,.03), 0 8px 24px rgba(0,0,0,.04)（深色相应降透明度）。

Motion

• 方式：minimal-functional + 个别 intentional。只做有意义的过渡，不炫技。
• 缓动：进入 ease-out、退出 ease-in、位移 ease-in-out。
• 时长：micro 80–120ms、short 150–250ms。
• 微交互：卡片 hover 上移 2px + 极轻阴影；进度线平滑过渡。
• 一个值得做的高光：「出片成功」给一个克制但有仪式感的过渡（无彩纸、无弹跳），服务"想分享"。

Decisions Log

日期	决策	理由
2026-05-31	初版设计系统	/design-consultation 产出。方向几经迭代（暖编辑→玩具风→否决）最终锁定 Dia 式「克制专业」，浅/深双主题，去大标题、低密度、单一克制蓝。