content-studio-design-language

# 内容工厂设计语言 ## 使用顺序 先使用 `bugu-product-design-cheatsheet` 抽取 PRD、用户故事、用例和业务 UI 契约；再使用本 skill 把契约落成统一桌面工作台语言。不要跳过业务对象直接照抄截图。 本 skill 只约束普通用户工作台的产品语言，不替代 `AGENTS.md`、`docs/aiprompts/business-ux-contract.md` 或具体模块事实源。 详细规则按需读取： - 需要从截图抽象布局和组件时，读 `references/workbench-layout.md`。 - 需要把外部产品模块迁移到内容工厂时，读 `references/migration-checklist.md`。 - 需要做实现前/实现后的 UI 评审时，读 `references/review-gate.md`。 ## 设计目标 内容工厂的普通用户界面应该像高密度桌面生产工具，而不是营销页、能力合集或聊天页面。 保持这些特征： - 左侧是当前任务的输入和参数，不是泛导航。 - 中间是可判断、可操作的业务对象，例如案例、素材、脚本、Prompt、拆解资产。 - 顶部是当前对象可执行的能力带，不是入口堆叠。 - 右侧可用抽屉承载历史、证据、参数或运行记录，但不抢主路径。 - 操作密度高、边框清楚、卡片轻、文字短，适合长时间办公。 ## 标准骨架 优先使用这套桌面工作台骨架： ```text 应用侧栏 ├── 当前模块图标导航 └── 设置 / 账号 / 状态 模块工作台 ├── 左侧输入参数栏：素材上传、素材选择、视角/比例/质量/模型、Prompt、主按钮 ├── 中间主任务区：顶部能力带、筛选条、案例/结果/资产网格、详情预览 └── 右侧浮动抽屉：历史记录、运行证据、Prompt 助手、参数追溯 ``` 当模块不需要三栏时，也要保留“输入/对象/历史或证据”的关系，不能变成大块功能卡片。 ## 布局规格 应用侧栏： - 窄栏、图标为主、文字少量纵向标签。 - 一级导航沿用当前 content-studio，不新增 ScriptAI 或外部产品那套一级菜单。 - 当前模块高亮要克制，使用浅青绿底或描边。 左侧输入参数栏： - 宽度约 300-360px，固定在模块内。 - 分组顺序通常是：上传素材、选择素材、关键参数、Prompt/要求、主动作。 - 上传区要是稳定尺寸的浅灰按钮区，避免大 hero。 - 参数控件使用分段按钮、select、checkbox、输入框，不做装饰卡堆叠。 - 只保留当前主动作，例如“开始AI生成”“智能拆解”“生成新视频脚本”。 顶部能力带： - 横向图标按钮，适合 8-14 个同级能力。 - 每个能力是图标 + 短标题；避免长说明。 - 当前能力使用边框、浅底和轻阴影表达，不用大面积高饱和色。 - 能力必须服务当前业务对象，不允许把所有产品入口平铺进来。 中间主任务区： - 案例、素材、脚本和拆解资产用密集网格或列表。 - 卡片边框清楚、圆角小于等于 8px、阴影轻。 - 卡片里直接展示可判断的业务内容：输入/输出对比、评分、标签、来源、操作。 - 网格卡片不要再嵌套大卡片，内部用分隔线、标签和小按钮组织。 - 标题区短：模块名、统计、筛选；不要写产品介绍文。 右侧抽屉： - 可折叠，适合历史记录、证据、Prompt 助手、运行追溯。 - 抽屉默认窄而轻，不改变主任务区布局。 - 抽屉内容必须来自事实源，例如 generation logs、input sources、prompt drafts、artifact refs。 ## 视觉规则 颜色： - 主色沿用当前深青绿色和浅青绿选中态。 - 背景使用浅白、浅灰、浅青，不用暗色产品页。 - 信息态可用 sky/slate，提醒用 amber，风险用 rose/red。 - 避免紫蓝渐变、纯黑大背景、营销感大色块。 组件： - 控件高度稳定，常用按钮约 32-38px。 - 卡片圆角不超过 8px，除头像、pill、icon button 外不要大圆角。 - 边框优先于阴影，阴影只用于当前选中或浮层。 - 使用 lucide 或现有图标库，避免手绘 SVG。 - 文案要短，按钮用动词，不用解释功能的长句。 - 不把说明文字塞满页面；让对象、状态和操作自解释。 密度： - 桌面端优先，默认可展示多列对象。 - 面板标题使用 16-20px；卡片标题 12-15px；不要在工具界面使用 hero 字号。 - 输入区和卡片区要有稳定的 `min-width`、`grid-template-columns` 和 `min-height`，避免内容挤压跳动。 ## 模块映射 图片 / AI 营销： - 左侧：上传素材、选择素材、视角、生成数量、比例、质量、模型、Prompt、开始生成。 - 顶部：模特产品展示、多人场景展示、换背景、换姿势、批量产品展示等能力带。 - 中间：优秀案例或生成结果网格，卡片展示输入图 / 输出图、预览、尝试示例、复用 Prompt。 - 右侧：历史记录或提示词助手抽屉。 视频： - 左侧：参考视频导入、拆解维度、目标产品信息、素材选择、主动作。 - 顶部：视频拆解、爆款特征库、脚本改写、Prompt 交接等阶段或能力。 - 中间：拆解报告、特征资产卡片、脚本分镜、Prompt 交接资料。 - 右侧：脚本历史、拆解日志、素材证据或 Prompt 助手。 - 第三方视频生成只做 Prompt 复制和手动导入记录，不显示外部任务进度。 素材库 / 运行历史： - 左侧：筛选、来源、状态、类型。 - 中间：资产或日志列表 / 网格。 - 右侧：详情、证据、Prompt、模型参数。 ## 反模式门禁 出现以下情况必须重做： - 页面只是功能入口合集，没有当前正在处理的业务对象。 - 把参考产品的一级导航整套搬进 content-studio。 - 主任务区没有可判断内容，只展示说明文案。 - 同一页面有多个同等权重主按钮。 - 卡片套卡片、section 做成漂浮大卡片、营销 hero 进入工作台。 - 用假数据、占位图或模板伪造成真实生成/拆解结果。 - UI 展示的状态不能追溯到 repo 中的 store、logs、input sources、prompt drafts 或 artifact refs。 ## 实施流程 1. 读取相关 PRD / 用例 / 业务 UI 契约，确定当前对象、输入物、状态和交付物。 2. 从现有组件和样式中找相近模式，优先复用。 3. 先设计工作台骨架，再填控件和卡片。 4. 所有新增控件必须能回答：服务哪个业务对象、改变哪个状态、产出什么交付物。 5. 改代码后跑 `npm run typecheck`；涉及可交付 UI 时跑 `npm run build`。 6. GUI 改动要用 Playwright 截图验证，并用本地图片查看工具检查截图，不只看命令结果。 ## 截图抽象 当用户给出类似“AI营销/优秀案例/左侧参数栏/右侧历史记录”的截图时，学习的是结构和密度： - 学习：左侧任务参数栏、顶部能力带、案例网格、输入输出对比卡、浮动历史抽屉、低饱和浅色办公质感。 - 不照搬：外部品牌名、外部一级导航、具体素材、不可追溯示例、与内容工厂无关的入口。 - 落地时必须映射到 content-studio 的真实模块和事实源。