Examples
Cat IQ Test
The Cat IQ Test example: App Store screenshots, a Product Hunt gallery at 1x and 2x, an app icon and an SVG logo exported with copy-source, all in one project.
Cat IQ Test is a playful quiz app. Its asset project covers a whole launch from one assets.json.
| Collection | Source size | Templates | Locales | Exports |
|---|---|---|---|---|
Screenshots screenshots | 440×956 | 6 | - | iPhone 6.9" (1320×2868), iPhone 6.7" (1290×2796), iPhone 6.5" (1284×2778), iPhone 6.1" (1179×2556) |
Product Hunt product-hunt | 1270×760 | 5 | - | 1x (1270×760), 2x (2540×1520) |
App Icon icon | 1024×1024 | 1 | - | 1024px (1024×1024), 512px (512×512) |
Logo logo | 940×940 | 1 | - | 1024px (1024×1024), 512px (512×512), copy-source output |
Source: examples/cat-iq-test on GitHub.
Techniques
- Four collections, one project.
screenshots(six templates, four iPhone sizes),product-hunt(five gallery images at 1270x760 and 2540x1520),iconandlogo. - An SVG template. The
logocollection usespublic/logo.svgdirectly as a template and renders it at 1024 and 512. - copy-source. The logo's
exportarray includes{ "name": "logo", "type": "copy-source", "format": "svg" }, which copies the source SVG next to the PNGs. See Outputs. - Tailwind from the CDN with a dark purple theme and IQ-level colors defined inline in
tailwind.config. - No lockfile. This example does not commit
assets.lock, so the first render renders everything.
Run it
cd examples/cat-iq-test
npx -p @open-assets/open-assets open-assets dev
npx -p @open-assets/open-assets open-assets renderWhat to copy
- The Product Hunt collection with 1x and 2x exports. See Launch kit.
- The SVG logo collection with
copy-source, when you need both PNG and SVG versions of a mark.
Last updated on
Thoughtful
The Thoughtful example: seven App Store screenshots and an icon with a warm Tailwind v4 theme, glow orbs, decorative flourishes and an SVG icon wrapped in HTML.
No Context Bot
The No Context Bot example: a Slack app's Product Hunt gallery, Slack Marketplace images, an X header and an icon, showing Open Assets beyond App Store work.