One command
Render tonight
One `studio render` call turns a typed TSX template into production assets. No Figma, no rebuild, no drift between the product and the export.
TSX → pixels, from your repo
Your components already are your marketing assets.
stdout-design renders the TSX you already wrote into App Store screenshots, launch cards, and Open Graph images one CLI command, no Figma, no drift.
npx @stdout-design/cli init
studio render
▍
stdout-designTSX → pixels
Renders to
- App Store
- Google Play
- Open Graph
- X cards
- Launch pages
- Web
Pipeline diagram: Your TSX component flows through the CLI renderer and outputs to multiple targets.
one command · no drift · local-first
Why stdout-design
A render pipeline for the assets you post, not a second design tool.
Built for agents
Point an agent at it
The same render core is exposed over MCP, so Claude Code, Cursor, or any agent can generate assets on command from the templates you already ship.
Batch at scale
A data file, a whole set
Render a full matrix of presets and locales from a CSV or JSON data file ten assets, or ten thousand. Same render path as a single asset.
Multi-target
One template, every canvas
App Store screenshots, Open Graph images, and launch cards from the same component. Each target gets its own size, preset, and crop.
Type-safe templates
Props, not a DSL
A plain React component with typed props. No custom DSL agents can pattern-match it from your existing components on day one.
Local-first
Open source, no account
Runs on your machine against your repo. Open source, no account, no locked-in exports. Your future self will thank you.
One core, three interfaces
The live studio, the CLI, and your agent all call the same render path.
The same render task a bento-feature card from a data file expressed in each interface.
$ npx @stdout-design/cli init
✔ Created stdout.config.ts
$ studio render bento-feature \
--data ./data/posts.csv \
--preset all \
--out-dir ./out/
✔ Rendered 10 assets in 1.2s
$ ls ./out/
launch-card.png og-post-01.png og-post-02.png store@3x.png x-card.png// Same template, prop editing live in the Studio
import type { Props } from "@stdout-design/core";
export function BentoFeature({ title, rows }: Props) {
return (
<section className="grid grid-cols-2 gap-4">
{rows.map((row) => (
<Card key={row.id} {...row} />
))}
</section>
);
}// Any agent, over MCP the same render path
{
"method": "tools/call",
"params": {
"name": "studio_render",
"arguments": {
"template": "bento-feature",
"data": "./data/posts.csv",
"preset": "all",
"outDir": "./out"
}
}
}