What does the AI Image Generator UI Kit include?

The ZIP contains 6 desktop page SVGs, 2 color themes, component and state boards, 2 mobile page references, scenario guidance, sample data, and preview images.

Is this a working image-generation app?

No. These are static design resources. The pack does not include a running frontend, image-generation API, authentication service, or payment integration.

Are the screen designs in English?

The included sample copy is Chinese. Text remains editable in the SVG files, so you can adapt it for your own product and language.

Do I need a subscription to use the Skill?

No. The Skill is free and can design from your brief. An active paid subscription is required to download this optional scene pack from the website.

Can I keep using the pack after my subscription ends?

Yes. Previously downloaded resources remain usable locally. New downloads from the website require an active paid subscription.

AI image SaaS scene pack · Editable SVG

AI Image Generator UI Kit in Editable SVG

An AI Image Generator UI Kit for developers and founders designing an image SaaS product. Start with connected screens, then use the free AI UI Designer Skill in Codex or Claude Code to adapt the layout, content, and theme.

Included with an active paid subscription. No credits deducted.

Preview all pages

Static SVG designs · Chinese sample copy · No application code

Light generation workbench with a prompt panel, image settings, and result cards — Included generation workbench · Light theme

Desktop pages: 6
Color themes: 2
Mobile references: 2
Editable sources: SVG

See the whole image SaaS flow

Review the page set before downloading. Every desktop page includes a grayscale wireframe, a light design, and a dark design. The same product flow connects your generation experience to history, billing, and account settings.

Light home-page design with a generation entry, artwork gallery, and usage steps — Home
Introduce the product, show example artwork, and place the generation entry in context.

Light authentication design with sign-in fields and registration guidance — Sign in & registration
Plan authentication screens and review registration fields on the state board.

Light image-history design with search, artwork cards, and a selected image detail — Image history
Explore saved works, search, inspect details, reuse parameters, and confirm deletion.

Light plans design with a credit balance and three fictional pricing tiers — Plans & credits
Review the current balance, example plans, and purchase-result designs.

Account settings

Edit profile details, review save feedback, and locate the sign-out action.

Included screens contain Chinese sample text and fictional product data. All controls shown are static designs.

More than a set of page screenshots

The ZIP combines editable screen designs with the resources needed to keep related pages consistent.

Editable SVG sources

Change text, shapes, and layout in the supplied source files. Keep your task-specific revisions separate from the original pack.

Light and dark themes

2 theme JSON files accompany the page designs. Grayscale frames help you review hierarchy before refining the visual style.

Components and key states

Reference buttons, inputs, selectors, cards, and dialogs. State boards cover generation, empty history, insufficient credits, login errors, and payment failures.

Mobile reference designs

Workbench and history layouts are drawn at 390px. Scenario notes describe mobile behavior for the remaining pages; those pages have no separate mobile drawings.

Download, import, then make it yours

Use the pack with the free Skill. Pack import helpers require Python 3.9 or later.

1
Download the ZIP
Sign in with an active paid AI UI Designer subscription. Scene-pack downloads do not use your generation credits.
2
Import with the free Skill
Install AI UI Designer Skill in Codex or Claude Code. Give the assistant the downloaded ZIP path and ask it to import the pack.
3
Adapt and review
Choose a theme, describe your changes, and inspect the resulting SVG. Continue revising the working files without overwriting the original resources.

Example request

Use the image-generation scene pack in a dark theme. Design a product-poster workbench with a product name, selling points, and poster sizes.

Choose the starting point you need

The free Skill provides the design workflow. This optional pack adds a ready-made image SaaS reference.

What you need	Resource	Access
Design from your own brief	Free Skill	Included
Import packs and apply themes	Free Skill	Included
Download this page set	Scene pack	Paid subscription
Use a downloaded pack locally	Scene pack	After subscription ends too

Design from your own brief: Free Skill · Included
Import packs and apply themes: Free Skill · Included
Download this page set: Scene pack · Paid subscription
Use a downloaded pack locally: Scene pack · After subscription ends too

FAQ

Before you download

What you receive and how download access works.

Start with connected screens. Refine your product.

Bring your image SaaS flow into focus with the AI Image Generator UI Kit: editable screens, shared themes, and key interface states. Preview the designs, then download the pack with your active paid subscription.

Download scene pack