
ss-studio
Turn a brief into three creative directions, a human-selected interaction plan, prototype, and showcase reel. Use when a request needs more than one static screen — client concepts or interaction exploration.
- Installs
- 517
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/bitjaru/styleseed --skill ss-studio- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads ss-studio automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Before this workflow, follow the once-per-session update preflight.
Build a directed interactive concept
Registry-first artifact boundary
When .styleseed/project.json and .styleseed/artifacts/index.json exist, resolve the requested artifact ID first, then read only .styleseed/bundles/<artifact-id>.md and .styleseed/manifests/<artifact-id>.json. Never fall back to the global legacy bundle for a registry project. Legacy projects may use .styleseed/effective-rules.md only when no registry exists.
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 . \
--artifact <artifact-id> \
--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.
If the project uses the artifact registry, --artifact is required and the run binds the current
artifact manifest and method hash at init time.
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 derive Studio verification from the evidence gate.
The Studio evidence command stores only the computed verifier summary, and advance --stage verified
reruns verification instead of trusting an earlier stored pass.
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 and blocked remain useful progress states:
node <skill-dir>/scripts/studio-run.mjs gate \
--project-root . --run <id> --gate temporal --status blocked \
--note "recording still missing"
Do not use gate --status pass. Only the evidence verifier may derive pass. A prototype URL can
locate the built prototype, but it is not evidence. When temporal verification is required, the
recording must be a local hashed file.
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.
FAQ
What does the ss-studio skill do?
Turn a brief into three creative directions, a human-selected interaction plan, prototype, and showcase reel. Use when a request needs more than one static screen — client concepts or interaction exploration.
How do I install ss-studio?
Run npx skills add https://github.com/bitjaru/styleseed --skill ss-studio in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ss-studio/ (personal) or .claude/skills/ss-studio/ (project).
Which AI agents can use ss-studio?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is ss-studio safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains ss-studio?
It is published by bitjaru in bitjaru/styleseed. It has 517 recorded installs.
More from bitjaru/styleseed
ss-audit
bitjaru/styleseed
Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices
ss-review
bitjaru/styleseed
Review UI code for design system compliance, accessibility, and best practices
ss-setup
bitjaru/styleseed
Configure StyleSeed by selecting the output grammar, domain, page type, brand recipe, semantic palette recipe, optional aesthetic profile, and bounded brand tokens before scaffolding a first screen.
ss-a11y
bitjaru/styleseed
Audit a component or page for accessibility issues and fix them
ss-lint
bitjaru/styleseed
Quick automated lint — detects common design system violations in seconds
ss-feedback
bitjaru/styleseed
Add appropriate user feedback states (loading, success, error, empty) to a component or page
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.