Archive of Our Own

As Generative AI (GenAI) and Large Language Models (LLMs) become more prevalent, more and more people are using them for creative pursuits, including writing fan-fiction.

This guide is intended to explain how to enable an AO3 site skin that will change the look of the site if the HTML source code of a fic has indications of Generative AI (GenAI) usage. It does not look at so-called “patterns” in the prose, nor does it have any way of differentiating how the GenAI was used. This site skin is for the purposes of informed decision making only, and not intended to incite witch-hunts against authors who use LLMs.

As of August 2nd, 2026, the code is only able to detect artifacts left by Claude (Anthropic’s Large Language Model (LLM)), and DeepSeek when they are used to generate a response. This guide will be updated as more detection methods become available. 

If you wish to learn more, I’ve also included a “how this works” section to combat fears of false-positives. It is after the tutorial, so you do not need to read it if you do not want to. 

Creating the Site Skin

1. Ensure you are logged into Archive of Our Own (the Archive).
2. Hover over (or click on, when on mobile) your username in the top right corner of the site.
3. Click on ‘My Preferences’ and scroll down to the preference titled ‘Your site skin.’ Note the name of the selection.
4. In the left side-bar, select ‘Skins’.
5. In the right upper-portion of the page, select ‘Create Site Skin’.
6. Fill out the ‘About’ section. Ensure the Type is ‘Site Skin’ and give it a name of your choosing. The rest is optional
7. In the ‘CSS’ section, copy-paste the following code-block:
   

   /*This looks for Claude artifacts*/
body:has(.userstuff p.font-claude-response-body) #outer,
body:has(.userstuff p.font-claude-response-body) #main,
body:has(.userstuff p.font-claude-response-body) .userstuff,
body:has(.userstuff p.font-claude-response-body) .userstuff p,
body:has(.userstuff p.font-claude-response-body) .userstuff div {
  background: #ff0000 !important;
  color: #ffffff !important;
}
/*This looks for DeepSeek artifacts; if you want the background to change to a different color, change the background value.*/
body:has(.userstuff p.ds-markdown-paragraph) #outer,
body:has(.userstuff p.ds-markdown-paragraph) #main,
body:has(.userstuff p.ds-markdown-paragraph) .userstuff,
body:has(.userstuff p.ds-markdown-paragraph) .userstuff p,
body:has(.userstuff p.ds-markdown-paragraph) .userstuff div {
background: #ff0000 !important;
color: #ffffff !important;
}

8. Expand the ‘Advanced’ section.
9. Under the ‘Conditions’ sub-section, for the ‘What it does’ drop down, select ‘add on to archive skin’. Leave the remainder of the options alone.
10. In the ‘Parent Skins’ subsection, click ‘Add parent skin’. A suggestion-text box will appear, labeled ‘Parent #1’. Begin typing in the name of the skin you noted in step 3, and select it when it appears in the suggested options. NOTE: If you typically use the default skin or Archive 2.0, skip this step entirely. It will work as though you added them as parents, but it is not necessary in their case.
11. Click Submit.
12. In the bottom right corner, click ‘Use.’
13. The site will revert to your Dashboard, and will have a small alert that reads ‘Your preferences were successfully updated.’ You should see no noticeable difference in the appearance of the site at this time.
14. If you wish to test the site skin, here is a work that has deliberate AI usage to teach readers some common signs of AI generated writing. The expected result is that the background color of the Archive should be vibrant red.

How the Site Skin Works

First, it is important to know a little bit about HTML & CSS, two programming languages that make up the whole of the internet. HTML is the base layer. It creates the structure of every web page you have ever visited. It has “tags” that will determine how pieces of the website come together. CSS is the icing on top, e.g. it is the style on top of the HTML. It provides styling to each piece of the website, like fonts, colors, backgrounds, and text sizes.

When a developer or company create a website, they will make CSS “classes” to determine which elements of a website get certain styles. These classes will be very specific and detailed as a way of ensuring they are targeting the exact structure they want to hit. For an example, on Wikipedia, their logo in the header has the following classes associated with it: mw-logo, mw-logo-container, skin-invert, and mw-logo-wordmark. Four classes for one small area of the screen, unlikely to be reused for anything except the logo in the header, and vanishingly unlikely to be used by any other website. The LLM chats are set up in the same way. They have very specific CSS classes associated with every element on the page, and they’re unlikely to be reused or replicated on any other website.

Sometimes, when we copy text from the internet, the style gets copied as well. We’ve all experienced this when pasting into a Word Document or similar. It’s why the “paste & match style” option exists; it will strip out any styling copied and apply the style already within the document.

Now, when a person uses an LLM and copies from the LLMs response, then pastes it into AO3’s rich text editor, the HTML tag and CSS classes that the LLM in question used are getting pasted in as well. Because AO3’s rich text editor does not know what to do with those HTML tags and CSS classes, it does nothing, just keeps them. Then, when the person publishes their fic, those tags and classes are still in the HTML of the work.

The above site skin is itself CSS. It is looking for specific CSS classes, and applying a style to the website when it detects them. In this case, it’s turning all of AO3 red.

This means there are layers of factors preventing this AI Artifact detection method from giving false positives, and in fact is going to present us with magnitudes more false negatives, namely:

• the specificity of the CSS classes narrowing down to the response areas of the LLMs in question
• the vanishingly small possibility that any other website uses the exact same CSS classes
• the necessity of copying the text from the LLM and pasting it into AO3’s rich text editor so that they styling information remains
• the author would need to not go back and edit out these CSS classes, which will become more unlikely over time as word spreads about this detection method

All of these things together make this one of the most reliable detection methods we have for AI usage in fan-fiction right now.

References & Credentials

• The fanlore article on the various Generative AI-related scandals in the Heated Rivalry fandom.
• An archived copy of the original document revealing the discovery of the Claude-generated CSS class within fan fiction. The above code-block was adapted from this document to work with any parent skin.
• I am a former software developer with over a decade of experience in the field, have worked with a dozen programming languages, and have a Bachelor of Science degree in Computer Science & Mathematics. 

Let me know in the comments if this was helpful to you, or if any step needs to be rewritten for clarity. Use responsibly; do not start any witch-hunts or I will wish a plague on all your households.