mcpField
S
ss-studio

ss-studio

github.com/bitjaru设计与 UI993517 次安装今天更新
代码仓库

关于 ss-studio

ss-studio 是 StyleSeed 项目中构建设计概念并验证原型的技能,面向产品设计与实现工作流。它通过定向方案选择、场景与媒体任务编排以及证据验证,管理从参考调研到交付的完整流程。

主要功能

  1. 01按角色整理设计参考
  2. 02产出三种设计方向供选择
  3. 03编排交互场景与媒体任务
  4. 04构建可运行原型并录制
  5. 05基于证据执行验证

适用场景

  1. 01为产品界面探索并比较设计方向
  2. 02将选定方向落实为交互原型
  3. 03记录原型并检查视觉与时序结果

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/bitjaru/styleseed --skill ss-studio

安装后在 Claude Code 中输入/ss-studio确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

agents/
openai.yaml
references/
artifact-contract.md
provider-adapters.md
scripts/
studio-run.mjs

详细介绍

在此工作流开始前,请先执行每个会话一次的更新预检。

构建有向交互概念

注册表优先的产物边界

当 .styleseed/project.json 和 .styleseed/artifacts/index.json 存在时,先解析所请求的产物 ID,然后只读取 .styleseed/bundles/<artifact-id>.md 和 .styleseed/manifests/<artifact-id>.json。对于使用注册表的项目,绝不要回退到全局旧版 bundle。只有在不存在注册表时,旧版项目才可以使用 .styleseed/effective-rules.md。

运行完整的 Studio 流程。不要将其简化为情绪板、静态图片或一组随意的动态效果。

开始运行

先阅读 STUDIO-PIPELINE.md、PRODUCT-PRINCIPLES.md 和解析后的项目规则。如果项目没有有效的 STYLESEED.md,请先运行 setup 并完成解析,再进入 Studio。

初始化一个持久化运行:

node <skill-dir>/scripts/studio-run.mjs init \
  --project-root . \
  --artifact <artifact-id> \
  --name "<project or concept>" \
  --brief "<product job and desired interaction>" \
  --surface mobile-app \
  --platform web

该命令会输出 .styleseed/studio/ 下的运行目录。使用 references/artifact-contract.md 中的产物架构。只有在需要生成媒体或录制时,才使用 references/provider-adapters.md。

如果项目使用产物注册表,则必须提供 --artifact,并且运行会在初始化时绑定当前产物清单和方法哈希。

1. 按角色侦察

将提供和发现的参考资料归类为 structure、navigation、signature、motion 或 asset-language。记录来源 URL/路径、日期、可见观察、可迁移原则、置信度和权利说明。绝不要声称看到了实际上未查看的参考资料中的视觉证据。

不要让用户收集通用情绪板。只寻找缺失的角色。除非需求说明明确将它们关联起来,否则应将产品 UI、营销展示和生成媒体分开处理。

2. 产出三个方向

在 directions.json 中准确写入三个条目:native、signature 和 experimental。保持产品目标和内容不变;至少改变两个结构轴。每个方向都必须包含:

  • 构图和焦点逻辑;
  • 导航界面与内容画布;
  • 一套语义色彩方案、字体和材质角色;
  • 生成式素材策略;
  • 动效和连续性逻辑;
  • 一个产品专属的标志性设计;
  • 输出语法、品牌方案、权衡、实现成本和风险。

只有在方向验证通过后才继续:

node <skill-dir>/scripts/studio-run.mjs advance --project-root . --run <id> --stage directed

3. 必须进行选择

同时展示三个方向。记录用户的选择和理由。不要将它们折中平均,也不要悄悄选择最容易实现的方案。

node <skill-dir>/scripts/studio-run.mjs select \
  --project-root . --run <id> --direction <direction-id> \
  --by "<reviewer>" --rationale "<decision>"

4. 编译场景和媒体任务

根据选定的方向编写 scenes.json、assets.json 和 video.json。

  • 交互场景定义触发条件、状态、连续性、进入/退出、反馈、中断、减少动态效果时的行为,以及渲染器目标。
  • 素材任务定义能力、提示词、输入、输出、来源、权利说明、回退方案和使用该素材的场景。
  • 视频计划从真实的原型录制开始。明确标记生成式镜头;绝不要用它们伪造无法正常工作的交互。

只有在执行时才将所需能力映射到可用的提供方。如果缺少所需提供方,将任务标记为 blocked,并准确报告缺少的能力。

记录提供方执行情况,不要手动编辑运行记录:

node <skill-dir>/scripts/studio-run.mjs media \
  --project-root . --run <id> --job <job-id> --status complete \
  --provider <tool/model> --output <project-relative-path> \
  --provenance "<model · date · source inputs>"

5. 生成、构建并录制

仅为图像、纹理、插画、影像或产品材质生成光栅素材。UI 几何、图标和最终文案应以代码原生方式实现,并确保无障碍。将最终生成的文件复制到运行目录,并保留提示词和来源信息。

将选定方向构建为可运行的原型。实现其主要导航、标志性场景、取消/返回行为,以及减少动态效果时的回退方案。通过代码和像素检查后,录制实际原型。可选的生成影像可以合成到视频中,但必须标明为媒体素材。

通过 CLI 保存原型和录制文件的路径,然后将状态推进到 built:

node <skill-dir>/scripts/studio-run.mjs output \
  --project-root . --run <id> --prototype <route-or-path>
node <skill-dir>/scripts/studio-run.mjs advance \
  --project-root . --run <id> --stage built
node <skill-dir>/scripts/studio-run.mjs output \
  --project-root . --run <id> --recording <project-relative-path>

6. 验证并交付

运行 StyleSeed 评分和视觉验证,然后根据证据门禁推导 Studio 验证结果。 Studio 证据命令只会存储计算得出的验证器摘要,而 advance --stage verified 会重新运行验证,而不是信任先前存储的通过结果。

node <skill-dir>/scripts/studio-run.mjs evidence \
  --project-root . --run <id> --evidence-run <gate-run-id>
node <skill-dir>/scripts/studio-run.mjs advance --project-root . --run <id> --stage verified
node <skill-dir>/scripts/studio-run.mjs status --project-root . --run <id>

fail 和 blocked 仍是有用的进度状态:

node <skill-dir>/scripts/studio-run.mjs gate \
  --project-root . --run <id> --gate temporal --status blocked \
  --note "recording still missing"

不要使用 gate --status pass。只有证据验证器才能推导出 pass。原型 URL 可以 定位已构建的原型,但它不是证据。如果需要进行时序验证,录制内容必须是本地的哈希文件。

交付完整的运行文件夹、可运行的原型、实际录制内容以及未解决的风险。仅有一段精心制作的短片,不算完成 Studio 运行。

不容妥协的要求

  • 始终只选择一个设计方向,并保持统一连贯的产品语言。
  • 先由人工选择,再进行高成本生成和实现。
  • 不得克隆受保护的品牌素材、文案或商标化布局。
  • 不得伪造参考观察、提供方输出、文件路径或验证通过结果。
  • 不得让生成的图像承载关键的 UI 文本或交互语义。
  • 未查看像素内容和时序结果前,不得将运行标记为已验证。

评论

支持 Markdown