Chapter Text
Translations:
How does it work?:
This skin doesn't detect whether text has been written by AI. It actually works by looking for specific traces of HTML code that might remain in the text when it's copied directly from an AI tool and pasted into AO3.
The most reliable example is Claude (and Deepseek). When a response from Claude is copied directly and pasted into AO3, a specific HTML class called "font-claude-response-body" might be preserved. The skin looks for precisely that element using ":has()". If it finds something like "<p class="font-claude-response-body">"," it displays a "AI has been detected!" notification in the upper right part of the device. Therefore, in the case of Claude, the detector has a specific and known marker that allows for fairly reliable detection.
For ChatGPT, Gemini, Copilot, and other AIs, the situation is different. Some may generate HTML or additional information in the clipboard when copying a response, but there is no marker equivalent to "font-claude-response-body" that we can guarantee is specific to each one and that also survives AO3 processing. Therefore, the skin includes some selectors that look for possible classes or identifiers related to names like "chatgpt," "openai," etc. These selectors do not constitute reliable detection of these AIs.
Furthermore, the system cannot determine if text sounds like AI. CSS cannot analyze the style, vocabulary, or structure of a work to decide if it was written by ChatGPT or a person. Nor can it know which tool was used if the content arrives at AO3 as plain text. The detection works primarily when content is copied directly from the AI interface and pasted directly into AO3. If the text is first processed by a text editor or any other program that removes or transforms the HTML, these markers may disappear. In that case, the skin will have nothing to detect.
Similarly, the absence of the warning does not prove that a work was written by a person. It simply means that the work does not contain any of the markers the skin is looking for.
Code:
body:has( .userstuff p.font-claude-response-body,
.userstuff p.ds-markdown-paragraph,
.userstuff [class*="chatgpt"],
.userstuff [id*="chatgpt"],
.userstuff [class*="openai"],
.userstuff [id*="openai"],
.userstuff [class*="gemini"],
.userstuff [id*="gemini"],
.userstuff [class*="copilot"],
.userstuff [id*="copilot"],
.userstuff [class*="character-ai"],
.userstuff [id*="character-ai"],
.userstuff [class*="grok"],
.userstuff [id*="grok"] )::after {
content: "AI has been detected!";
position: fixed;
top: 50px;
right: 20px;
width: 130px;
padding: 14px 12px;
background: #f7dfe3;
color: #674d4d;
font-family: Arial, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
border: 3px solid #b88982;
border-radius: 18px;
box-shadow: 5px 5px 0 #d8b3ad;
z-index: 10;
}
Tutorial:
1. Copy the code.
2. Create the Parent Skin: Go to Dashboard, click "Skins", and then click "Create Site Skin". Give it a unique name and add (in the CSS) the code. Scroll down to "Advanced" and click "Show", and check the box "Parent Only". Click "Submit".
3. Create/Edit your main Skin: Go back to "Skins" and click "Edit" on the skin you use.
4. Scroll down to "Advanced" and click "Show".
5. Under "Parent Skins", click "Add Parent Skin" and type the name of the skin you just created.
6. Click "Update".