koubou

Render HTML/CSS templates into device-framed App Store screenshots via YAML configs.

196|13|Updated Aug 27, 2025
One-click install
npx skills add https://github.com/bitomule/Koubou --skill koubou
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: koubou
Source: https://github.com/bitomule/Koubou/tree/main/skills/koubou
Command: npx skills add https://github.com/bitomule/Koubou --skill koubou

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of branded App Store screenshots by rendering HTML/CSS templates inside real device frames, enabling localization and YAML-driven configuration to speed up marketing assets.

Core Features & Use Cases

  • HTML template rendering: Generate consistent, device-accurate screenshots from HTML/CSS templates using a device-frame rendering workflow.
  • Localization and branding: Localize slide copy and assets via YAML localization and xcstrings to support multiple languages and markets.
  • Asset management and pipelines: Pre-render and organize images with device frames for scalable campaigns across iPhone, iPad, Mac, and Watch.

Use case: A marketing team wants 3–5 localized, brand-consistent screenshots for several languages from a single YAML configuration.

Quick Start

Create a YAML config describing your project and run kou generate config.yaml to render the initial set of screenshots.

Frequently Asked Questions about koubou

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate localized App Store screenshots from HTML templates?

You can generate localized App Store screenshots by defining your project parameters and slide copy in a YAML configuration file. The Skill renders your HTML/CSS templates inside pre-rendered device frames, using xcstrings localization to support multiple languages and markets.

What is the best way to automate marketing screenshot creation for multiple Apple device frames?

Automating marketing screenshot creation is best handled through a YAML-driven workflow executed via the kou CLI. This approach pre-renders and organizes branded images with device frames, allowing scalable campaigns across iPhone, iPad, Mac, and Watch from a single configuration.

How do I start rendering App Store screenshots using a YAML configuration?

To start rendering App Store screenshots, create a YAML config file that describes your project and localization details. You then execute the command kou generate config.yaml via the CLI to render your initial set of branded marketing visuals.

Can I use HTML and CSS to design App Store screenshots for different languages?

Yes, you can use HTML and CSS to design App Store screenshots for different languages. The Skill renders your templates inside real device frames and applies localization via xcstrings and YAML configurations to ensure brand consistency across markets.

Does this screenshot generation workflow require external dependencies or components?

No, this screenshot generation workflow does not require external dependencies or components to function. It operates independently using its built-in kou CLI, HTML template rendering, and YAML-driven configuration to produce device-accurate marketing assets.

Why use HTML templates instead of static images for App Store marketing assets?

Using HTML templates instead of static images allows for dynamic rendering and precise CSS styling inside device frames. This method enables efficient localization via YAML and xcstrings, ensuring brand-consistent visuals across multiple campaigns without manual image editing.