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

63 lines
2.9 KiB
Markdown

# 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
```markdown
# [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").