AI Brand Kit

Overview

I designed a two-skill workflow that moves an AI agent from a campaign brief to a key visual and a complete H5 page.

The work covered four parts:

• Brand knowledge — analyzing and understanding the brand's visual language and assets.
• Visual generation — generating high-quality header images that place the logo well, match the campaign brief, and fit the brand's style.
• H5 page generation — extending the header image into a complete H5 page, with elements and content that align with the brand.
• Python scripts — scripts inside the skill that assist page generation: background removal, blending the picture into the background, inserting the logo, and more.

How might we help an AI agent create Life Services H5 pages and header images that meet a high visual standard — without making every campaign a manual design task?

Problem

Life Services teams frequently need campaign visuals and H5 pages that are polished, on-brand, and ready to use.

Creating these pages one by one with designers and operations teams can be time-consuming. The agent platform lets operations teams generate pages directly, improving speed and efficiency — but the visual quality can be inconsistent and often fails to fully match the brand style.

The skills aim to address this problem specifically:

Wider adoption

Operations teams create their own campaign visuals and H5 pages on the agent platform instead of queuing for design support.

Higher baseline

Life Services visual standards live inside the workflow, so output starts on-brand rather than generic.

Faster turnaround

A campaign brief becomes a finished header image and H5 page in a single pass.

Solution

Two skills: one for the header image, one for the H5 page built from it.

Skill 01 — Header image generation

Turns a campaign theme into a ready-to-use Life Services key visual. The SKILL.md steps:

1. Define the campaign theme
2. Classify it into one of seven categories
3. Draft three titles, pick one
4. Compose the prompt from the template
5. Generate against two reference images
6. Overlay the auto-coloured logo

Skill 02 — H5 page generation

Extends the approved key visual into a complete, responsive H5 page. The SKILL.md steps:

1. Confirm inputs and real content
2. Generate or receive the key visual
3. Analyze the key visual
4. Build the brand kit
5. Select modules, set page order
6. Plan title images and cutouts
7. Implement in HTML and CSS
8. Check compliance, then deliver

Process

01 — LoRA vs. skill

I evaluated two approaches, a LoRA and a skill, on which produced higher-quality images that fit the Life Services visual style. The comparison favored the skill, which became the foundation for the rest of the workflow.

02 — Header image skill

The initial workflow was a linear chain: campaign topic, then generated prompt, then generated image. In practice it rarely met the quality bar, and the resulting style repeated itself across campaigns.

I replaced it with a set of prompt templates organized by topic category. The skill now assigns the template that matches the campaign and composes a prompt from it, addressing both the quality ceiling and the repetition.

03 — Problem solving

Problems occurred in the process that affected the quality of the output. I iterated on reference inputs, script writing, prompt engineering, and additional steps in the skill to resolve each of these, bringing the output to a consistent quality level.

Logo distortion. The logo rendered with an incorrect shape, or appeared more than once in a single image.

Title collision. The space reserved for the logo at the top of the image was not respected, so the title overlapped it.

Wrong typeface. Generated text rendered in a typeface outside the brand set.

Over-stylization. The overall render skewed more cartoonish than the brand allows.

04 — H5 page skill

I analyzed the sample H5 pages to determine which parts of the layout could be encoded as a skill, then defined a template for each page section. The skill is written with HTML and CSS knowledge so pages can be reproduced consistently, including a typographic treatment for section subtitles that keeps them on brand. I then tested the agent and revised the skill round by round to improve the output, working with developers to resolve specific issues such as removing the background behind a generated title.