Studio Pipeline
FreeTransform product briefs into interactive design concepts.
Free · Opens the source repo
What Studio Pipeline does
Studio Pipeline is a comprehensive tool designed for designers and developers looking to create interactive concepts from product briefs. It guides users through a structured process to develop three distinct creative directions, each tailored to the specific needs of a project. By leveraging a series of scripts and commands, Studio Pipeline ensures that every aspect of the design process is meticulously documented and executed, from initial concept to final prototype.
The skill begins with the initialization of a project run, where users can specify details such as the project name and desired interaction. Following this, users scout references based on defined roles, ensuring that all gathered materials are relevant and appropriately categorized. This organized approach allows for a focused exploration of design directions, leading to the production of three unique entries that vary in structure while maintaining the core product job.
Once the directions are created, users can select their preferred option, documenting the rationale behind their choice. This human-centric selection process is crucial, as it prevents arbitrary decisions and promotes thoughtful design. The subsequent steps involve compiling scenes and media jobs, generating assets, and building a working prototype that reflects the selected direction. Each stage is carefully recorded, ensuring that the design process is transparent and verifiable.
Finally, Studio Pipeline emphasizes the importance of verification and delivery. Users are required to run visual checks and document the status of various design gates before finalizing their project. This thorough approach not only enhances the quality of the deliverables but also ensures that all aspects of the design have been critically evaluated and approved. Studio Pipeline is ideal for teams focused on creating interactive applications and experiences, providing a structured framework for innovation and creativity.
When to use it
Use Studio Pipeline when you need to develop multiple design directions from a product brief, especially for interactive applications.
When not to use it
This tool may not be suitable for projects that require quick mockups or where a single static design is sufficient.
What you can build with it
Client Concept Development
Use Studio Pipeline to create multiple design directions for client presentations, ensuring a variety of options to choose from.
Interactive App Exploration
Leverage the skill to explore different interaction designs for mobile or web applications, validating each concept with user feedback.
Trendy UI Direction Synthesis
Utilize Studio Pipeline to synthesize current design trends into coherent UI directions that align with the project goals.
How to install Studio Pipeline
View source1. Install with the skills CLI
npx skills add bitjaru/styleseed/ss-studio --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by bitjaruBuild a directed interactive concept
Run the full Studio pipeline. Do not reduce it to a moodboard, a static image, or a set of arbitrary motion effects.
Start the run
Read STUDIO-PIPELINE.md, PRODUCT-PRINCIPLES.md, and the resolved project rules first. If the
project has no valid STYLESEED.md, run setup and resolve before Studio.
Initialize a durable run:
node <skill-dir>/scripts/studio-run.mjs init \
--project-root . \
--name "<project or concept>" \
--brief "<product job and desired interaction>" \
--surface mobile-app \
--platform web
The command prints the run directory under .styleseed/studio/. Use the artifact schemas in
references/artifact-contract.md. Use references/provider-adapters.md only when media generation
or recording is required.
1. Scout by role
Classify supplied and discovered references as structure, navigation, signature, motion, or
asset-language. Capture source URL/path, date, visible observation, transferable principle,
confidence, and rights note. Never claim visual evidence for a reference that was not actually seen.
Do not ask the user to collect a generic moodboard. Find only the missing roles. Keep product UI, marketing presentation, and generated media separate unless the brief explicitly connects them.
2. Produce three directions
Write exactly three entries in directions.json: native, signature, and experimental. Keep
the product job and content fixed; vary at least two structural axes. Every direction must include:
- composition and focal logic;
- navigation chrome versus content canvas;
- one semantic palette recipe, type, and material roles;
- generated asset strategy;
- motion and continuity logic;
- one product-specific signature move;
- output grammar, brand recipe, trade-offs, implementation cost, and risk.
Advance only after the directions validate:
node <skill-dir>/scripts/studio-run.mjs advance --project-root . --run <id> --stage directed
3. Require a selection
Show the three directions together. Record the user's selection and rationale. Do not average them or quietly choose the easiest one.
node <skill-dir>/scripts/studio-run.mjs select \
--project-root . --run <id> --direction <direction-id> \
--by "<reviewer>" --rationale "<decision>"
4. Compile scenes and media jobs
Write scenes.json, assets.json, and video.json from the selected direction.
- An interaction scene defines trigger, states, continuity, enter/exit, feedback, interruption, reduced-motion behavior, and renderer targets.
- An asset job defines capability, prompt, inputs, output, provenance, rights note, fallback, and consuming scene.
- A video plan starts with real prototype recordings. Mark generative shots explicitly; never use them to fake an interaction that does not work.
Map capability to an available provider only at execution time. If the needed provider is absent,
leave the job blocked and report the exact missing capability.
Record provider execution without hand-editing the run:
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. Generate, build, and record
Generate raster assets only for imagery, texture, illustration, footage, or product material. Keep UI geometry, icons, and final copy code-native and accessible. Copy final generated files into the run directory and preserve prompts and provenance.
Build the selected direction as a working prototype. Implement its primary navigation, signature scene, cancel/back behavior, and reduced-motion fallback. Record the actual prototype after it passes the code and pixel gates. Optional generated footage may be composited as labeled media.
Store prototype and recording paths through the CLI, then advance to 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. Verify and deliver
Run StyleSeed score and visual verification, then inspect temporal evidence: start/mid/end frames,
interrupt/cancel behavior, and reduced motion. Record code, visual, temporal, and human gate
statuses plus evidence paths in verification.json.
Record each gate explicitly. A human pass requires a named reviewer:
node <skill-dir>/scripts/studio-run.mjs gate \
--project-root . --run <id> --gate temporal --status pass \
--evidence <path> --note "start, mid, end, cancel, and reduced motion inspected"
node <skill-dir>/scripts/studio-run.mjs gate \
--project-root . --run <id> --gate human --status pass \
--reviewer "<name>" --evidence <path> --note "selected result accepted"
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>
Deliver the complete run folder, runnable prototype, actual recording, and unresolved risks. A polished reel by itself is not a completed Studio run.
Non-negotiables
- Keep exactly one selected design direction and one coherent product language.
- Human selection precedes expensive generation and implementation.
- Do not clone protected brand assets, copy, or trademarked arrangements.
- Do not fabricate reference observations, provider outputs, file paths, or verification passes.
- Do not let generated imagery carry essential UI text or interaction semantics.
- Do not mark a run verified without seeing the pixels and the temporal result.
Frequently asked questions about Studio Pipeline
Similar skills
Penpot UI/UX Design
Create professional UI/UX designs in Penpot with ease.
UX Theming
Streamline your VS Code theming process with best practices.
Wireframe
Create low-fidelity UI wireframes in SVG format.
Waitlist Page
Create a clean, focused pre-launch landing page.
Hallmark
Design skill for creating unique, structured UIs.
UI Styling
Create beautiful, accessible user interfaces effortlessly.