Social-media scenes that actually work on AO3
Build iMessage, WhatsApp, X/Twitter or search scenes. Export a quick image — or real, selectable work-skin text with video and voice notes your readers can play inside the chapter. No coding, no account.
Came here from a fic? The little credit under a screenshot points here. Everything on this page is free, and you can make the same thing in about two minutes.
Which one do you want?
Three tools. Two put a conversation in your fic and differ in what your readers get; the third changes how AO3 looks to you. Pick whichever matches what you’re trying to do.
Fake screenshots
The simplest thing that works. Build the conversation, get a picture, paste it into your chapter.
- iMessage, WhatsApp, X/Twitter, Google
- Goes inside a chapter
- Nothing to set up — it’s an image
- Best when you just want it done
Work skins
The same conversation as real text. It reflows on a phone, can be selected and copied — and video and voice notes can play inside the chapter.
- All four platforms, light and dark
- Playable video and voice notes on AO3
- Goes in Preferences → Skins, once
- One skin covers every platform — a fic can only have one, so this matters
Site Skin Magic Picker
Paste a picture or website. Magic Picker reads its colours and builds a personal AO3 theme around them.
- Picture or website → complete colour theme
- Light and dark versions to choose from
- Or start with one of 16 templates
- Goes in Preferences → Skins
- Only you see it, on every AO3 page
| Screenshot | Work skin | Site skin | |
|---|---|---|---|
| Who sees it | Every reader | Every reader | Only you |
| Where it goes | In the chapter | Chapter + Preferences | Preferences |
| Setup on AO3 | None | Once, then reuse | Once |
| Selectable text | No — it’s a picture | Yes | n/a |
| Reflows on a phone | No, readers zoom | Yes | n/a |
What you get
All three tools are free, run in your browser, and save as you work
Four platforms that look right
iMessage and WhatsApp with the correct bubbles, tails, delivery ticks and read receipts. X/Twitter with verified badges, quote tweets and metrics. Google, in three flavours including Naver.
Reactions & group chats
Tap a message to add a reaction — where iMessage really puts a tapback, and where WhatsApp really puts its pill, stacking when more than one person picks the same one. Group chats give each person a name colour and a photo, plus date breaks and the small grey lines like “Alex added Sam to the chat”.
Messages that do more than talk
Reply to an earlier message and it carries the quoted original above it. Add four photos in the grid the real app uses, a link that unfurls into a card with its own title and thumbnail, or a voice note with its length. Threads, quote posts and polls on X/Twitter.
Voice notes and video that actually play
In a work skin, a voice note or a video is a real player sitting in your chapter — your readers press play on AO3 itself, no leaving the page. Screenshots keep a still poster card instead, because a picture can’t play.
Nothing is uploaded: the media continues streaming from the HTTPS host you provide. If that host stops serving it, it goes quiet in every chapter you’ve already posted.
A cast you set up once
Say who’s in the conversation in one place — names, handles, photos. Thirty ready-made avatars if you’d rather not hunt for one. Rename someone and the messages they already sent follow.
Checked before you paste
AO3 refuses a whole skin over one CSS property it doesn’t allow — and its list is stricter and stranger than you’d guess. Everything is checked against AO3’s real rules first, so you don’t find out after pasting.
A site skin from something you love
Paste a picture, poster, screenshot or website into Magic Picker. It builds light and dark themes from the colours, then previews the exact CSS over a mock AO3 page. It borrows the palette — not the source’s layout or artwork.
Auto-save
Your work is saved in your browser as you type. Close the tab and pick up where you left off — no account, and nothing leaves your machine unless you export it.
Three steps, either way
Putting a conversation in a fic and restyling AO3 take about the same time. What you copy at the end is different.
💬 A conversation in your fic
Pick a platform
iMessage, WhatsApp, X/Twitter or Google — or open a ready-made example and edit it.
Write the conversation
Add messages, reactions, names and photos. The preview updates as you type.
Copy it out
Take the picture and paste one <img> tag — nothing to set up. Or take the work skin for real text, which is two pastes the first time and one after that.
🎨 A site skin for yourself
Pick a look
Sixteen templates, filtered by dark, light, minimal or decorative.
Make it yours
Four colours, two fonts, card corners, tag shape, a header banner. Readability is checked as you go.
Copy into AO3
Paste the CSS into Preferences → Skins → Create Site Skin, then choose Use.
Read complete examples on AO3
Two finished fics made with AO3 SkinGen, with the conversations posted as readable work-skin text rather than screenshots alone.
The Arrangement
A complete friends-to-lovers fic using group chats, direct messages and Google searches to carry the story alongside prose.
Read the finished work on AO3Sent to the Wrong Chat
A complete accidental-confession fic showing delivery and read states, typing indicators, reactions, group chats and search scenes.
Read the finished work on AO3Questions people actually ask
Mostly about which thing goes where, because AO3’s three kinds of skin are genuinely confusing
What’s the difference between a work skin and a site skin?
A work skin styles one fic, for everyone who reads it. A site skin restyles AO3 itself, and only you see it. They’re both made in Preferences → Skins, which is why they get mixed up.
This tool makes both, plus plain screenshots that need neither.
Screenshot or work skin — which should I use?
Use a screenshot if you want it done in two minutes with nothing to configure. It’s a picture, so readers can’t select the text and have to zoom in on a phone.
Use a work skin for anything long, or if you care that the conversation reflows on a phone, can be copied, and can be read by a screen reader. It costs one setup on AO3, and after that you reuse it.
My fic already has a work skin. Can I add another?
No — AO3 allows a work exactly one, and picking a second silently drops whatever the first one was doing. Add this skin’s CSS to the end of the one you already have.
For the same reason there’s a “covers all four platforms” option: if chapter 4 is a different app, you want one skin that already knows about it rather than a choice between two.
Do I need an account?
No. There’s no signup, and your work is saved in your own browser rather than on a server. Clearing your browser data clears your projects, so export anything you want to keep.
Will the images in my fic stop working one day?
Worth knowing: AO3 never stores a copy of an image, it links to wherever it lives. If a host stops serving a file, it disappears from every chapter you’ve already posted, with no warning. This has happened to popular skins before.
So keep the PNG somewhere you can re-upload it from — or use a work skin, where the conversation is text in your chapter and only the small icons are fetched.
Is this official, or affiliated with AO3?
No. It’s an unofficial fan tool, not connected to the Organization for Transformative Works. It just knows AO3’s rules well enough to stay inside them.
Also by the same developer
Separate Google Docs add-ons · free to start · not required for AO3 SkinGen.
WordFokus
Draft in Google Docs without going back to polish every sentence. WordFokus keeps earlier text out of reach so the chapter moves forward.
WorldKonstruct
Keeping a long AU or series consistent? WorldKonstruct can scan an existing draft into a story bible beside your manuscript.
AO3 skin guides
Reference pages for the parts AO3’s skin editor does not explain clearly.
Every CSS property AO3 allows
Search the complete 182-property and 20-shorthand allowlist, then find practical replacements for common rejected CSS.
Check an AO3 CSS propertyWork skin vs site skin vs public skin
AO3 has two skin types, and “public” is not a third one. See who sees each skin, where it goes, and why a work can use only one work skin at a time.
Work out which skin you needMake a work skin that doesn’t break
AO3 deletes every comment in your CSS when it saves, and it can drop whole rules without reporting an error. Follow the save-and-read-back procedure that catches that before your readers do.
Check your skin actually savedKeeping this free costs me evenings, not servers
I build this on my own, in the evenings and at weekends. There’s no company behind it and no investor, and it isn’t going to sprout a paywall later. Hosting is cheap — it’s the hours that add up.
One thing I did spend real money on: I bought the image hosting outright instead of running on a free tier. Free image hosts are how fics lose their pictures years after posting — the host quietly stops serving a file and every chapter using it goes blank. I’d rather that never happened to your work.
If this has saved you an afternoon and you’re in a position to, a few pounds back makes it easier to keep going. If you’re not — genuinely, use it anyway. That’s what it’s for.
One-off or monthly — the toggle’s at the top of the Ko-fi page. Takes about thirty seconds, and you don’t need an account.
Ready when you are
AO3 SkinGen’s three builders are free forever, need no signup, and remember your work between visits.
An unofficial fan tool, not affiliated with the Organization for Transformative Works. Built by the creator of WordFokus.