Open Assets

Screenshots, icons, and marketing assets, made a breeze in your git repo.

Design App Store screenshots, app icons, logos, OG images, and favicons as HTML/CSS/SVG templates. Preview them live in the browser. Render every size your stores need from a single template with one command, then export the results anywhere: your exports folder, your web app's public directory, or straight into an Xcode asset catalog.

Like Storybook, but for marketing assets. Free, local, MIT licensed, and built for AI coding agents.

Documentation: docs.open-assets.dev has guides for every store, localization, CI, the full assets.json reference and troubleshooting. This README covers everything you need to get going.

Why Open Assets

• One template, every size. Author a screenshot once at its source size and render it for iPhone 6.9", 6.7", iPad, Play Store, Product Hunt, and any custom dimension. No per-device rework.
• Export to multiple locations. Each export size can write to its own destination with outFile: drop favicon.png into public/, send the OG image to your web app, and write the app icon directly into your Xcode .appiconset.
• Localization built in. One template renders in every language. Mustache-style {{placeholders}}, locale-aware number formatting, and automatic RTL layout for Arabic, Hebrew, and friends. See Localization.
• Live preview dev server. A Storybook-style UI with hot reload, zoom/pan, and one-click exports while you iterate on templates.
• Incremental renders. assets.lock checksums every source file, so you, your teammates, and CI only re-render what changed.
• Versioned in git, rendered in CI. No SaaS, no per-seat design tool. Review screenshot changes in a PR with git diff, re-render on every push with GitHub Actions.
• Agent native. Ships a Claude Code skill (npx open-assets skills), so your agent can design, localize, and render the entire asset set for you.

Examples

Installation

# npm
npm install --save-dev @open-assets/open-assets

# yarn
yarn add --dev @open-assets/open-assets

# pnpm
pnpm add --save-dev @open-assets/open-assets

# bun
bun add --dev @open-assets/open-assets

Quick Start

# Scaffold a new project
npx open-assets init

# Start the dev server
npx open-assets dev

Shell Alias

Add an alias to your shell profile for a shorter command:

echo 'alias oa="npx open-assets"' >> ~/.zshrc && source ~/.zshrc

Then use oa anywhere:

oa dev
oa render
oa init

Concepts

open-assets uses a simple, unified data model. Every asset type follows the same structure: N templates × M export sizes.

Term	Definition
Collection	A named group of related assets sharing the same source size and export sizes. One tab in the dev UI.
Template	A single source file (HTML or SVG) that produces one image per export size.
Export Size	A named output dimension that templates are rendered at (e.g., "iPhone 6.9" → 1320×2868).
Source Size	The dimensions the HTML template is authored at. Puppeteer scales from source → export size.
Output	An optional post-render action (e.g., write to Xcode .appiconset, copy SVG source).

One template, many sizes, many destinations

Every entry in a collection's export array is either a size or an output action. A single template renders to all of them in one pass:

"export": [
  { "name": "iphone-6.9", "label": "iPhone 6.9\"", "size": { "width": 1320, "height": 2868 } },
  { "name": "iphone-6.7", "label": "iPhone 6.7\"", "size": { "width": 1290, "height": 2796 } },
  { "name": "favicon", "size": { "width": 32, "height": 32 }, "outFile": "public/favicon.png" },
  { "type": "xcode", "path": "../MyApp/Assets.xcassets/AppIcon.appiconset" }
]

• Sized entries land in exports/{collection}/{size}/{template}.png, or exports/{collection}/{size}.png when the collection has a single template
• outFile sends a rendered size anywhere in your repo, like your web app's public/ directory. Use .png or .jpg: any other extension still receives PNG bytes
• xcode fills an Xcode .appiconset directly
• copy-source copies SVG sources alongside the rendered PNGs

Change the template once, run npx open-assets render, and every destination updates. Unchanged templates are skipped automatically.

End-to-End Screenshot Pipeline

1. Initialize

npx open-assets init

Creates an assets.json, sample HTML templates in src/, a public/ directory for shared assets, a dist/ directory, and a .gitignore that ignores exports/ (it replaces any existing .gitignore).

2. Design with Claude Code

The easiest way to get the skill is the Claude Code plugin marketplace. Inside Claude Code, run:

/plugin marketplace add Parra-Inc/open-assets
/plugin install open-assets@open-assets

The skill is installed once, works in every project, and updates with /plugin marketplace update open-assets.

Alternatively, copy the skill into a single project:

# Using the built-in command
npx open-assets skills

# Or using the Skills CLI
npx skills add https://github.com/Parra-Inc/open-assets --skill open-assets

This copies the skill into .claude/skills/open-assets/ so Claude Code can use it. Then prompt:

Now we want to make beautiful screenshots for this app. Look at the marketing
doc and demographics. Design 8 high-converting App Store screenshots that catch
your eye as you scroll. Use bold headlines with highlighted keywords, phone
mockups with real app screenshots, and close with reviews + a CTA.

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗