Skip to download
Ukoshiku creative studioGet the skill

PROMO CREATIVES SKILL 1.4.5

Creative.
Layer by layer.

An AI scene, independent details, a real product, and HTML copy. Every layer can be edited in code without re-generating.

Get the skill

From a concept to a finished composition

creative.html → PNG1080 × 1350
A layout you can edit in words05 / 05

BEHIND THE SCENES

A creative
built in HTML.

AI makes the scene. Product, copy, and decoration become independent HTML layers. That means any element can move, change, or disappear without a new generation.

01

Composition first

Decide the format, main object, and mood. The agent proposes options; you choose a direction.

02

Every layer has a job

AI provides atmosphere. The screenshot shows the product. Copy, logo, and decoration remain independent HTML elements.

03

Edits without a new generation

Say “move the phone higher” or “remove the crumbs.” The agent changes HTML and CSS instead of generating the banner again.

04

Export after a check

Check spacing, crop, fonts, and canvas size. You keep both the finished image and a layout ready for the next edit.

Original Ukoshiku banner: a phone on a plinth, peaches, rocket, and crumbsOur actual creative · 1080 × 1350

MADE FOR OUR OWN PRODUCT

This is how we
show Ukoshiku.

Ukoshiku saves recipes, helps plan menus, and connects people with similar tastes. The banner shows a real screen from the app.

This scene combines an AI background, transparent peaches and greens, a screenshot, and HTML copy. For a different rhythm, we move the layers in code.

See Ukoshiku
AI scene Product HTML & CSS

NOW IT IS YOUR TURN

Take the process.
Make it yours.

Banners, posts, and carousels. Give your agent the brand, materials, and brief. It will build an HTML layout you can edit in words.

Download skill ZIP

Version 1.4.5 · MIT · no sign-up

Install the skill

One command, and the skill is in your agent

Works with agents that support the standard skills format.

npx skills add ukoshiku/promo-creatives --skill promo-creatives

  1. Prepare the tools

    For local rendering, install Chrome, Chromium, or Edge, Python 3.9+, and these libraries:

    macOS / Linux: python3 -m pip install pillow numpy
Windows: py -m pip install pillow numpy

    Standard browser installations are detected automatically on macOS, Linux, and Windows. An image generator is optional: your own photography works too.

  2. Install manually

    Download the ZIP above and place the promo-creatives folder in your skills directory:

    macOS / Linux: ~/.codex/skills/promo-creatives/
Windows: %USERPROFILE%\\.codex\\skills\\promo-creatives\\

    Claude Code can also install skills through its Marketplace.

  3. Start a new conversation

    Restart your agent, attach your brand materials, and try this prompt:

    Use the promo-creatives skill. Create a 1080 × 1350 promo banner for my product. Propose the composition first. I am attaching a screenshot, logo, and brand colours.

Claude Code has a Marketplace install; other agents can use the ZIP. The scripts need access to local files and a terminal.

A few details

What is in the archive?

A SKILL.md with the workflow, HTML templates, composition references, and Python scripts for rendering and checks. Product photography and access to image generators are not included.

Do I need Artlist?

No. Artlist appears only in this demo. Use your own photography or any image generator you have access to; its subscription or API is separate.

Do I need to generate the banner again after an edit?

No, when the change is copy, placement, size, or the number of prepared layers. The agent updates HTML and CSS. A new generation is only needed for a new background or visual object.

Does it only work for apps?

No. Use the skill for physical products, services, events, and your own brand: provide the assets and describe the brief.

Can I modify it and use it commercially?

The skill code and instructions are released under MIT. Check rights for your own photography, fonts, and generated materials separately.