content-studio-design-language - SKILL.md Agent Skill

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 的真实模块和事实源。