| name | content-studio-design-language |
| description | 统一布谷AI内容工厂桌面端产品界面的设计语言。Use when Codex needs to design, review, prototype, or implement content-studio UI/UX, especially modules inspired by reference screenshots with left parameter panels, top capability bands, dense case grids, right history drawers, Prompt workbenches, image/video generation workbenches, material libraries, running history, or any request asking to “参考这个排版/设计/模块/截图/统一设计语言”. |
内容工厂设计语言
使用顺序
先使用 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、拆解资产。
- 顶部是当前对象可执行的能力带，不是入口堆叠。
- 右侧可用抽屉承载历史、证据、参数或运行记录，但不抢主路径。
- 操作密度高、边框清楚、卡片轻、文字短，适合长时间办公。
标准骨架
优先使用这套桌面工作台骨架：
应用侧栏
├── 当前模块图标导航
└── 设置 / 账号 / 状态
模块工作台
├── 左侧输入参数栏：素材上传、素材选择、视角/比例/质量/模型、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。
实施流程
- 读取相关 PRD / 用例 / 业务 UI 契约，确定当前对象、输入物、状态和交付物。
- 从现有组件和样式中找相近模式，优先复用。
- 先设计工作台骨架，再填控件和卡片。
- 所有新增控件必须能回答：服务哪个业务对象、改变哪个状态、产出什么交付物。
- 改代码后跑
npm run typecheck；涉及可交付 UI 时跑 npm run build。
- GUI 改动要用 Playwright 截图验证，并用本地图片查看工具检查截图，不只看命令结果。
截图抽象
当用户给出类似“AI营销/优秀案例/左侧参数栏/右侧历史记录”的截图时，学习的是结构和密度：
- 学习：左侧任务参数栏、顶部能力带、案例网格、输入输出对比卡、浮动历史抽屉、低饱和浅色办公质感。
- 不照搬：外部品牌名、外部一级导航、具体素材、不可追溯示例、与内容工厂无关的入口。
- 落地时必须映射到 content-studio 的真实模块和事实源。
