Voice Console 10/10 — 打磨规格¶

目标： 将整合后的 Voice 工作区从约 7/10 打磨到参考级质量（Linear/Raycast 一档），同时不丢失工作室身份。核心论点：三个问题，三个区域 — 它该说什么？（Script）· 谁在说？（Voice）· 执行（固定的操作栏）。其余一切都是渐进式披露。

范围：仅 studio 工作区（语音库侧栏 + CloneDesignTab + 生成侧栏）。后端无改动。

0 — 线框图¶

┌──────────────────────────────────────────────────────────────────────────────────────────────┐
│ ◉ Voice                            ⊙ VoiceStudio                           🔔2 ● Idle ⚡Flush │
├──┬──────────────────────┬──────────────────────────────────────────┬─────────────────────────┤
│  │ ACTIVE VOICE         │ SCRIPT                                   │ GENERATED VOICES        │
│◉ │ ◉ Maya · designed    │ ┌──────────────────────────────────────┐ │ [All][Clone][Design]   │
│  │ ▶ sample · 0:03      │ │ You came a long way for an answer…  │ │ ⬢ DESIGN · 19.8s      │
│◌ │                      │ └──────────────────────────────────────┘ │ ▶ ▂▅▇▅▂ · seed 32      │
│  │ VOICE CLONES         │ VOICE       (From audio)(● By design)   │                         │
│◌ │ ◉ Maya           ▶   │ ✎ warm elderly storyteller…            │ ⬡ CLONE · 12.0s        │
│  │ ◌ The Anchor     ▶   │ Identity male · elderly · very low     │ ▶ ▂▃▆▃▂                │
│◌ │ ◌ Storyteller    ▶   │                                          │                         │
│  │                      ├──────────────────────────────────────────┤                         │
│  │                      │ Fr French ▾  Steps 10  ▷ SYNTHESIZE ⌘↵ │                         │
├──┴──────────────────────┴──────────────────────────────────────────┴─────────────────────────┤
│ ▾ Logs 11 · Updates                                                       ⚲ Local  ⬡  ♥     │
└──────────────────────────────────────────────────────────────────────────────────────────────┘
   └ nav  └ active + saved voices   └ definition + pinned action      └ full-height generations

操作栏（固定，绝不会滚出视口）：

├──────────────────────────────────────────────────────────┤
│  Fr French ▾    Steps ───●─── 10    ⚙ Overrides ▸        │   ← generation params live
│ ┃              ▷  SYNTHESIZE   ⌘↵                       ┃ │     WITH the button
└──────────────────────────────────────────────────────────┘
   while generating: ┃ ◐ Synthesizing… 3.2s   ■ Stop ┃  + thin progress under the bar

身份摘要（设置后默认折叠）：

 Identity   male · elderly · very low pitch · whisper        ⌄
            └ one quiet line = current voice recipe; click expands the chips.
              Describe-box edits update this line live (the magic moment).

左侧栏 — 当前声音卡片：

┌─ ACTIVE VOICE ────────────────────────┐
│ ◉ Maya                     [designed] │   ← identity always visible: who will
│ male · elderly · very low pitch       │     speak the next Synthesize
│ ▶ ▁▂▅▇▅▂▁  sample · 0:03              │   ← one-click identity check
│ [Edit voice]              [+ New]    │
└───────────────────────────────────────┘
Empty state:  "No voice selected — describe one ←, drop audio, or pick below."

1 — 五大结构性调整¶

固定操作栏。 语言、Steps、Overrides 披露以及 SYNTHESIZE 组成一个固定于列底部的操作栏（flex 页脚；内容在其上方滚动，向导模式）。它们是生成参数——应和按钮在一起，而不是散落在列中间。⌘↵ 可在任意位置触发合成；生成过程中操作栏会切换为进度 + Stop。
总共两个眉题。 SCRIPT 和 VOICE 是仅有的等宽字体区块标题。DEFINE VOICE / DESCRIBE YOUR VOICE / PERSONALITY / PICK A PERSONALITY PRESET 全部移除：From-audio/By-design 切换内联放在 VOICE 眉题旁；描述框通过占位符自我说明；预设获得一个最大 12px 的标签（“Starting points”）。
一套预设系统。 顶部的 PROMPT chips（utils/constants.js 中的 PRESETS）与性格条合并为描述框下方一条单一的可横向滚动 “Starting points” 行——两者本就已经设置 vdStates+instruct；同一个插槽放两个组件才是困惑的根源。（PRESETS 的脚本预填行为保留：带脚本的 chip 也会在 SCRIPT 为空时填入 SCRIPT。）
插入弹出层取代标签墙。 14 个 [tag] chip 从固定布局中消失；textarea 角落的 ⊕ Insert ▾ 控件会打开一个紧凑的弹出网格（可搜索过滤）。标签是偶尔使用的进阶功能；它们却占用了页面上最昂贵的像素。
身份摘要行。 一旦有任何值不是 Auto，四个 chip 组 + 两个选择框就会折叠为一行安静的配方行（male · elderly · very low pitch）；点击（或描述框活动）可展开。首次运行（全是 Auto）时默认展开。这是最大的密度收益，也让“描述 → 控件”的感觉变得神奇（该行会实时重写）。

2 — 语音库在左、生成在右¶

左侧栏承载 ACTIVE VOICE → Saved voices，右侧栏则为生成的片段/历史记录提供完整高度。卡片回答“按下 Synthesize 时谁会说话”。它显示名称、方法徽章、配方行、3 秒身份样本（profile 的参考/渲染音频的 <WaveformPlayer compact>）、Edit（加载到表单）和 + New（清空）。空卡片承载的是动作而非缺失：“描述一个声音、拖入音频，或在下面选择。” Saved voices 保持紧凑列表（名称 · 徽章 · 播放）；历史记录保持不变（post-#389）。

3 — 工艺规则（最后 2 点在此展开）{#3--craft-rules-the-last-2-points-live-here}¶

8 像素节奏： 所有间距/内边距 ∈ {4, 8, 12, 16, 24}；区块间距 24，组内间距 8。做一次审计，然后在 index.css 中加一条 lint 注释。
字号规模 = 3： 眉题 11/等宽/全大写 · 正文 13 · 元信息 11。此视图中没有其他字号。
每个视图最多两种强调色： 品牌粉（操作/激活）+ 每种模式徽章颜色。其余全部是中性的界面框架。
溢出诚实性： 每个可横向滚动的通道（starting points、tag 弹出行）都带边缘渐隐遮罩 + 悬停时出现的 ‹ › 微调按钮。被裁剪的 chip 绝不能渲染出一个被切断的字形。
A11y 门槛（可测量）： 弱化文本对比度 ≥ 4.5:1（新增 --chrome-fg-muted 值，每个主题下验证）；chip 组为 role="radiogroup"，并使用 roving-tabindex 方向键；每个可交互元素都有可见的 :focus-visible 焦点环；prefers-reduced-motion 会关闭 shimmer/pulse/marquee；生成状态使用 aria-live="polite"。
动效： 仅使用 120–160ms ease-out；身份摘要行的展开/折叠对高度做动画；除了生成中的小圆点，任何东西都不能无限循环。
微惊喜（选 3 个，不是 10 个）： 波形图上悬停擦洗预览；⌘↵ 合成 + / 聚焦描述框；悬停起始点 chip 时显示一行“它会设置什么”的提示。

4 — 验收标准：10/10 满分线¶

维度	通过条件
首屏	SYNTHESIZE 在 1280×720 @100% 与 175% 缩放下始终可见
层级	≤2 个等宽眉题（kicker）；≤3 种字号；无孤立标签
一致性	恰好一个预设控件；所有间距对齐 8pt 网格
密度	定义音色（描述 → 合成）≤ 1 屏，零滚动
空状态	每个空面板均标明下一步操作并深层链接直达
溢出	900–2560px 任意宽度下无字形裁切；每个滚动区域均有淡出渐变
A11y	视图通过 axe-core 检查；完整键盘路径：描述→合成；所有文字对比度 4.5:1
状态	当前激活语音始终可见；生成状态可被屏幕阅读器访问

5 — 分阶段实施（持续合入主干）¶

P1 — 操作栏 + 首屏（固定语言/步骤/覆盖项/CTA；⌘↵）— 分值提升最大，纯布局调整
P2 — 标签折叠 + 预设统一 + 插入弹出框 — 层级与一致性
P3 — 身份摘要行 + 当前语音卡片 + 空状态动词 — 密度与身份
P4 — 精修打磨（8pt 网格审计、对比度令牌、单选按钮组、焦点、减弱动态效果、淡出、微惊喜 ×3）

每个阶段独立发布；P1–P3 仅前端改动；P4 会改动主题令牌（请逐一验证各主题的对比度）。

本页原文 Markdown：在 AtomGit 查看·内容源自开源项目 om/VoiceStudio