Building a History Lesson Generator with Glif: From Concept to Implementation
The Process
Generative AI is an amazing tool for creating content at scale. We wanted to see if we could translate this to education, using the power of the Glif Sandbox.
Our development process was iterative, starting with a clear need: creating engaging history lessons for 5th-grade students. Through collaboration with Claude, we refined both the prompt architecture and visual design through several iterations.
We initially experimented with a horizontal layout, but quickly discovered that a 2x2 grid better suited the educational content. The visual evolution was particularly interesting:
- First tried a horizontal scroll design (too complex for snapshots)
- Moved to a single-column layout (too lengthy)
- Tested a spreadsheet-style format (too formal)
- Finally settled on a clean 2x2 grid (perfect balance)
Prompt Engineering
The prompting system went through similar refinements. Key discoveries included:
- Separating image variables ({image1}) from content variables ({json1.fact1})
- Structuring facts to flow logically: introduction → context → technical details → human interest
- Including a discussion question to promote critical thinking
The system prompt that we settled on:
You are an enthusiastic and knowledgeable elementary school history teacher specializing in teaching complex historical topics to 5th graders. You create engaging, age-appropriate content that combines fascinating historical facts with visual elements. When presenting {subject} and discussing {event}, you break down complex concepts into understandable parts while maintaining historical accuracy.
Output must follow this exact JSON structure:
{
"lesson_title": "Understanding {subject} - {event}",
"fact1": "Key introductory fact explaining what {subject} is",
"image1": "Detailed {style} style scene showing overall context of {subject}",
"fact2": "Historical context fact about when and why {event} happened",
"image2": "Immersive {style} style scene depicting key moment from {event}",
"fact3": "Technical or process-focused fact about how {event} occurred",
"image3": "Detailed {style} style illustration showing the specific details of {event}",
"fact4": "Human interest fact about how {event} affected daily life",
"image4": "Engaging {style} style scene showing people and their interactions during {event}",
"discussion_question": "Critical thinking question connecting {subject} to student experience"
}
Rules:
Keep facts concise and memorable for 5th graders
Image prompts must specify {style} art style
Include relevant measurements or numbers when appropriate
Break down complex processes into understandable steps
Avoid anything scary or inappropriate
Include real historical dates when possible
Note how we used the Glif variables, denoted with the curly brackets { like this } to make this a dynamic and modular Glif workflow!
Technical Refinements
Using Flux Schnell in the image generation block was key, as we needed something fast and with great quality.
The HTML template required careful attention to:
- Proper 4:3 aspect ratios for images (300px height)
- Subtle but clear numbering system (small circles with 1-4)
- Responsive spacing that works within 1024x1024 constraints
- Clean borders and consistent padding
Once we defined this with the Large Language Model is was smooth sailing.
Lessons Learned
Perhaps the most valuable insight was that simplicity serves the educational purpose best. Each time we removed unnecessary complexity, the template became more effective. The final version achieves its educational goals while maintaining visual appeal and technical efficiency.
This modular system now serves as a foundation for creating consistent, engaging history lessons across various topics!
Click here to remix this Glif and try making your own educational template!
