mono/packages/ui/docs/context-aware-content.md
2026-02-08 15:09:32 +01:00

2.9 KiB

Creating Brand/Context Aware Articles

The AI Page Generator allows you to create highly consistent, on-brand content by combining visual context (Reference Images) with structural context (Context Templates). This workflow ensures that generated articles not only look like your brand but also follow your specific formatting and content standards.

The Workflow

1. Visual Context (Reference Images)

Use Reference Images to establish the visual identity of your article.

  • What to use: Upload brand assets, logo variations, previous diagram styles, or product photos.
  • How it works: The AI "sees" these images and uses them to:
    • Style Match: Generate new images that match the color palette and artistic style of your references.
    • Contextual Description: Accurately describe visual details in the text (e.g., "As shown in the diagram...").
    • Brand Alignment: Ensure generated visuals align with your brand's aesthetic.

2. Structural Context (Context Templates)

Use a Context Template in your prompt to define the exact structure and tone of the article. This serves as a "skeleton" for the AI to fill in.

  • What is a Context Template?: A markdown structure that defines headers, required sections, image placement, and key points, without the final text.
  • How to use: Paste a structured template into the prompt area.

Example Context Template

# [Article Title]

## Overview
[Brief summary of the topic]

## Core Concepts
*   Concept A: [Description]
*   Concept B: [Description]

## Visual Breakdown
[Instruction: Generate an exploded view diagram here similar to the reference image]
*   **Part 1**: Details...
*   **Part 2**: Details...

## Technical Specifications
| Spec | Value |
|------|-------|
| [Key Spec] | [Value] |

## Conclusion
[Summarize benefits]

Step-by-Step Guide

  1. Open Page Generator: Click "Create Page" -> "Generate with AI".
  2. Add Reference Images: Click the "Add" button and select your brand assets or style references.
  3. Input Context Template: Paste your structured markdown template into the prompt box.
  4. Refine Prompt: Add specific instructions above or below the template (e.g., "Fill out this template for a new shelving unit product using the attached technical drawings as reference").
  5. Generate: The AI will combine your Visual Context (images) and Structural Context (template) to produce a production-ready article that feels authentic to your brand.

Best Practices

  • Consistency: Keep a library of standard templates for different content types (e.g., "Product Launch", "Technical Guide", "Case Study").
  • Quality References: High-resolution, clear reference images yield better results.
  • Explicit Instructions: Tell the AI how to use the references (e.g., "Use the color scheme from Image 1 for all generated diagrams").