# How to Use Taste Skill's Image Generation Tools: imagegen-frontend-web and brandkit

> Learn to use Taste Skill's image generation tools imagegen-frontend-web and brandkit. Effortlessly create website mockups and brand identity boards from natural language briefs without code or API keys.

- Repository: [Leon Lin/taste-skill](https://github.com/Leonxlnx/taste-skill)
- Tags: how-to-guide
- Published: 2026-05-30

---

**Taste Skill provides two specialized markdown-based skills—`imagegen-frontend-web` for multi-section website mockups and `brandkit` for premium brand identity boards—that convert natural language briefs into production-ready visual assets without requiring API keys or additional code.**

The `Leonxlnx/taste-skill` repository ships declarative skill files that act as instruction sets for underlying LLMs. Both `imagegen-frontend-web` and `brandkit` reside in the `skills/` directory and use structured YAML frontmatter combined with detailed directives to automate visual asset generation.

## Understanding imagegen-frontend-web for Website Mockups

The **`imagegen-frontend-web`** skill generates high-fidelity horizontal mockup images designed for frontend implementation. It interprets your textual brief and produces a dedicated image for each website section you specify.

### Core Configuration and Hard Output Rules

According to [`skills/imagegen-frontend-web/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md), this skill enforces a **hard output rule** requiring exactly one separate horizontal image per section. If your brief requests eight sections—such as hero, trust bar, features, product showcase, benefits, testimonials, pricing, and CTA—the skill automatically selects the **8-section default pack** and returns eight distinct images labeled "Section 1 of 8: Hero" through "Section 8 of 8: CTA".

The configuration palette includes design variance, visual density, art direction, hero scale (such as "Giant Statement"), and composition anchors. The skill automatically maps keywords like "minimalist," "fintech," or "dark-tech" to pre-defined visual modes through pattern matching. A **clarity check** (specified in section 17 of the skill file) validates that each image maintains consistent branding, horizontal aspect ratios, and implementation-friendly detail levels.

### Practical Usage Example

To generate a complete SaaS landing page, structure your prompt with specific section requirements:

```text
Create a premium SaaS landing page for "DataPulse", a real-time analytics platform.
- Desired sections: 8 (hero, trust bar, features, product showcase, benefits, testimonials, pricing, CTA)
- Brand tone: clean, trustworthy, dark-tech
- Primary colour: deep teal with cyan accents
- Hero scale: Giant Statement
- Avoid left-text/right-image default; use bottom-left text over full-bleed background for hero.

```

The skill parses this brief, selects the **Dark Developer** visual mode, and returns eight horizontal images ready for developer handoff.

## Understanding brandkit for Brand Identity Systems

The **`brandkit`** skill produces single comprehensive brand-kit boards—such as 3×3 or 2×3 grids—that communicate complete visual identity systems including logos, color palettes, typography, and application mock-ups.

### Brand Strategy Inference and Layout Options

Located at [`skills/brandkit/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/brandkit/SKILL.md), this skill begins with **brand-strategy inference** to determine category, audience, and core metaphors before generating assets. It supports multiple layout configurations including 3×3, 2×3, and 1×3 grids, enforcing strict visual discipline with limited color accents and sparse typography to maintain professional presentation standards.

The skill maps your brief to specific visual modes (such as **Dark Product / Operator** featuring black backgrounds with glowing UI chips) and constructs the grid with minimal text and art-directed imagery. Each panel serves a distinct purpose—logo construction, color system, typography specimens, or physical badge mock-ups—creating a complete identity deck in a single output.

### Practical Usage Example

Request a comprehensive brand identity system by specifying category metaphors and layout preferences:

```text
Generate a brand-kit for "CrediFlow", a B2B fintech that streamlines invoice financing.
- Category: fintech / finance
- Core metaphor: flow / river + secure vault
- Desired layout: 3 × 3
- Visual mode: Dark Product / Operator (black & dark red with glowing UI chips)
- Primary palette: charcoal, amber, teal
- Include: logo cover, logo construction, digital app mock-up, colour system, typography, physical badge, image direction.

```

The skill infers the brand strategy, selects the appropriate visual mode, and outputs a single high-resolution 3×3 board containing nine distinct panels.

## Architectural Implementation and Runtime Behavior

Both skills operate as **prompt-driven** declarative instruction sets. The runtime processes your natural-language brief through the following pipeline:

1. **Metadata parsing**: The YAML frontmatter in each [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md) file provides the skill `name` and `description` used by the Taste Skill runtime for UI/CLI exposure.

2. **Keyword mapping**: The runtime maps brief keywords to pre-defined configuration sections using pattern matching (see "Brief-to-direction mapping" in `imagegen-frontend-web` and "Brand strategy first" in `brandkit`).

3. **Deterministic prompt generation**: The skill constructs a detailed prompt containing selected parameters (hero scale, layout, color mode, logo concept) and submits it to the image-generation model.

4. **Looping and validation**: For `imagegen-frontend-web`, when the underlying model limits output to single images, the skill loops internally to generate per-section results, concatenating them with labels. A post-generation clarity check validates compliance with hard rules; failed sections trigger regeneration.

Because the instructions are pure markdown, you can port [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md) files between projects without code changes. The repository also includes [`skill.sh`](https://github.com/Leonxlnx/taste-skill/blob/main/skill.sh), a helper script enabling command-line invocation:

```bash
./skill.sh imagegen-frontend-web "Design a minimalist landing page for EcoSnap with 6 sections"

```

## Summary

- **`imagegen-frontend-web`** generates one horizontal image per website section with strict consistency rules and automatic clarity validation.

- **`brandkit`** creates single comprehensive identity boards (3×3, 2×3, or 1×3 grids) starting from brand-strategy inference.

- Both skills reside in the `skills/` directory as self-documenting markdown files requiring no API keys or external code dependencies.

- The Taste Skill runtime handles keyword mapping, looped generation for multi-section outputs, and deterministic prompt construction automatically.

## Frequently Asked Questions

### What is the main difference between imagegen-frontend-web and brandkit?

**`imagegen-frontend-web`** produces multiple separate horizontal images optimized for frontend developers to implement section-by-section, while **`brandkit`** generates a single composite board (like a 3×3 grid) presenting a complete brand identity system. The frontend skill enforces one-image-per-section rules, whereas the brandkit skill focuses on strategic visual identity presentation with strict layout discipline.

### Do I need API keys to use these Taste Skill image generation tools?

No. The skills function as declarative instruction sets contained in markdown files. You only need the Taste Skill runtime configured; the skills themselves do not require separate API keys or external service credentials. The [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md) files act as portable "instruction sets" that the underlying LLM follows to structure generation prompts.

### How does the skill runtime handle multiple sections in imagegen-frontend-web?

When you request multiple sections (e.g., eight sections for a landing page), the runtime parses your brief and selects the appropriate default section pack. If the underlying image model limits outputs to single images, the skill **loops internally**, generating one image per call and concatenating the results with labels like "Section X of N". A post-generation clarity check validates each image against hard output rules before final delivery.

### Can I customize the default parameters in the skill files?

Yes. Because the skills are implemented as markdown files ([`skills/imagegen-frontend-web/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md) and [`skills/brandkit/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/brandkit/SKILL.md)), you can edit the default parameters, composition tables, and validation rules directly. These changes are portable—copying the modified [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md) to another Taste Skill installation reproduces the same customized behavior without requiring code modifications.