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

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, 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:

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, 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:

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 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 files between projects without code changes. The repository also includes skill.sh, a helper script enabling command-line invocation:

./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 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 and 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 to another Taste Skill installation reproduces the same customized behavior without requiring code modifications.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}