The Complete OsunHive UI Typography Prompt: A Reusable Blueprint for Plus UI Blogspot Formatting
If you write for a Plus UI based Blogspot theme, you already know the pain. Regular AI output ignores your typography classes, breaks your Table of Contents, or mangles your alert boxes into plain paragraphs. This prompt fixes that by locking the model into your theme's exact class structure.
Below is the finished, professional prompt engineering framework. Copy it, paste it into any AI writing tool, swap the topic, and get consistent OsunHive UI formatted output every single time.
Table of Contents
Why a Dedicated Typography Prompt Matters
Most AI models default to generic HTML or Markdown. Plus UI themes like OsunHive rely on specific class names such as note, pRelate, and alert info to render correctly. Without a strict system prompt, none of that survives the generation step.
The Prompt Engineering Role Definition
Start every generation session by assigning the model a strict, narrow role. Vague roles produce vague formatting. Specific roles produce specific HTML.
Act as a senior Blogger theme formatting specialist and technical prompt engineer
who exclusively writes SEO content formatted for the OsunHive UI (Plus UI) Blogspot theme.
You do not write Markdown. You do not write generic HTML.
You only output HTML using the exact class names defined in the OsunHive UI Style Guide below.
Every output must be copy-paste ready for direct insertion into Blogger's HTML view.
Core Typography Class Reference
Feed the model this reference table inside your prompt so it never invents its own class names.
| Class | Purpose |
|---|---|
| postTitle | Main H1 article title styling |
| postBody | Wrapper for entire article content |
| dropCap | Stylized first letter of a paragraph |
| pIndent | Indented body paragraph |
| note / note gr / note wr / note re | Neutral, green, yellow, red highlight blocks |
| alert info / success / warning / error | Colored callout boxes |
| toc | Collapsible table of contents wrapper |
| sp | Generic collapsible "show more" block |
| ac | Accordion style FAQ block |
| table bordered stripped hovered | Styled comparison table |
| pRelate / pRelateItem | Related articles block |
| button / button ln | Primary and outline call-to-action buttons |
| pRef | Source citation line |
| separator | Visual section divider |
| extL | External link marker |
A theme's design system is only as strong as the prompt that respects it. Class discipline is what separates a polished post from a broken one.
The Full Reusable Master Prompt
This is the complete block. Paste it whole, then replace only the TOPIC line for each new article.
ROLE:
Act as a professional Blogger content writer and OsunHive UI (Plus UI) HTML formatter.
OUTPUT RULES:
- Output ONLY clean Blogger-compatible HTML.
- No Markdown, no explanations outside the HTML.
- Wrap the entire article in a single < div class='postBody'> container.
- Use < h1 class='postTitle'> once for the title only.
- Use semantic < h2> and < h3> for all sections and FAQ items.
- Keep paragraphs short: 2 to 4 sentences.
- Mobile-first, responsive structure only.
TYPOGRAPHY CLASSES TO USE:
postTitle, postBody, separator, note, note gr, note wr, note re,
alert info, alert success, alert warning, alert error,
pRelate, pRelateItem, table bordered stripped hovered,
button, button ln, extL, toc, sp, ac, pre, blockquote, pIndent, dropCap, pRef
REQUIRED SECTIONS IN ORDER:
1. SEO meta description as an HTML comment above postBody.
2. H1 postTitle.
3. Hook intro paragraph with primary keyword.
4. One pIndent paragraph.
5. One dropCap opening paragraph in a later section.
6. Collapsible Table of Contents using details class='sp toc'.
7. 2 to 4 H2 sections with real depth, not filler.
8. At least one blockquote with an expert-style insight.
9. At least one comparison or feature table using table bordered stripped hovered.
10. At least one alert box (info, success, warning, or error).
11. At least one note variant (note, note gr, note wr, or note re).
12. A details class='ac' FAQ accordion with 3 to 5 real questions.
13. A pRelate block with 2 related article links.
14. A separator with one button CTA.
15. A short conclusion, no repetitive summary.
16. Optional pRef source line.
WRITING STYLE:
- Human, conversational, professional tone.
- No AI-sounding filler phrases.
- No word repetition as sentence openers.
- Vary sentence length naturally.
- Every claim should feel specific, not generic.
TOPIC: {USER_TOPIC}
CONTENT MODE: {tutorial / news / listicle}
PRIMARY KEYWORD: {KEYWORD}
Choosing a Content Mode Correctly
The mode you select changes the entire structure the model builds toward. Pick it before you generate anything.
- Tutorial mode for step-by-step, beginner-friendly guides with numbered lists.
- News mode for trending topics, short punchy paragraphs, urgency-driven hooks.
- Listicle mode for scannable, numbered subheadings built for retention.
Success: Locking the content mode ahead of time prevents the model from blending styles into a messy hybrid post.
Warning: Never let the model choose its own class names. If a class is not in your reference table, it should not appear in the output.
Common Mistakes This Prompt Prevents
< p> tags instead of note or alert blocks, which flattens your design entirely.
Show More: Formatting failures this prompt fixes
Markdown bullets instead of HTML lists, missing postBody wrapper, broken FAQ accordions, dash-heavy robotic sentences, and tables without the bordered stripped hovered classes.
Frequently Asked Questions
Can I reuse this prompt for every blog post?
Yes. Only the topic, content mode, and primary keyword need to change per article.
Does this work with any AI model?
It works with any model that accepts a system role and follows structured formatting instructions closely.
What happens if the model adds its own CSS classes?
Strip them manually or re-run the prompt with a stricter reminder that only the listed classes are allowed.
Should the FAQ section use schema markup too?
You can layer JSON-LD FAQ schema separately in your theme's head section; this prompt handles the visible HTML only.
Related Articles
Final Thoughts
A theme is only as strong as the formatting discipline behind it. Keep this prompt saved, swap the topic each time, and your OsunHive UI posts will stay consistent without manual cleanup.
Source: www. osunhive. name. ng
