Work Text:
☰ ChatGPT 
How does a
bastard, orphan, son of a whore and a Scotsman, dropped in the middle of a forgotten. Spot in the Caribbean by providence, impoverished, in squalor. Grow up to be a hero and a scholar? The ten-dollar Founding Father without a father. Got a lot farther by working a lot harder
...And he wrote his first refrain, a testament to his pain. Well, the word got around, they said, “This kid is insane, man” Took up a collection just to send him to the mainland “Get your education, don’t forget from whence you came, and the world's gonna know your name. What’s your name, man?”
Alexander Hamilton.
My name is Alexander Hamilton. And there's a million things I haven't done
——But just you wait, just you wait...
How to use this work skin:
Click Dashboard -> Skins -> My Work Skins -> Create Work Skin. Paste the code below and save it.
The code goes:
#workskin .ai-section {
font-family: "ui-sans-serif", "Arial", "sans-serif";
font-size: 16px;
color: rgb(13, 13, 13);
background: white;
}
#workskin .ai-header {
display: flex;
align-items: center;
width: 100%;
padding: 16px 0 18px 0;
margin-bottom: 18px;
border-bottom: 1px solid rgb(230, 230, 230);
}
#workskin .ai-header p {
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
#workskin .ai-header p:last-child {
margin-left: auto;
}
#workskin .ai-title-main {
font-weight: 700;
line-height: 1;
display: inline-block;
}
#workskin .ai-title p {
font-weight: 700;
margin: 0;
}
#workskin .ai-title p .ai-title-main {
font-size: 20px;
}
#workskin .ai-arrow-img {
height: 40px;
width: auto;
display: inline-block;
margin-left: 6px;
vertical-align: middle;
opacity: 0.7;
}
#workskin .ai-header-image {
height: 40px;
width: auto;
display: block;
flex-shrink: 0;
}
#workskin .user {
background: rgba(233, 233, 233, 0.5);
padding: 10px;
width: fit-content;
max-width: 70vw;
border-radius: 18px;
margin-left: auto;
}
#workskin .user p {
margin: 10px;
}
#workskin .ai-section h2 {
font-family: "ui-sans-serif", "Arial", "sans-serif";
font-weight: 600;
font-size: 20px;
border-top: 1px solid rgb(208 208 208);
padding-top: 27px;
}
#workskin .ai-section li {
margin: 6px 10px;
}
#workskin .ai-section hr {
width: 100%;
border-color: rgb(222, 222, 222);
margin: 8px 0;
display: inline-block;
}
#workskin .half-screen-image {
width: 220px;
height: auto;
display: block;
max-width: 50vw;
}
#workskin .ai-section p,
#workskin .ai-section div,
#workskin .user p,
#workskin .ai-section * {
font-size: 16px;
line-height: 1.6;
}
#workskin .ai-section div:not(.user),
#workskin .ai-section div:not(.user) p,
#workskin .ai-section > div:not(.user),
#workskin .ai-section > div:not(.user) p {
font-size: 16px;
line-height: 1.6;
}
#workskin p,
#workskin div {
font-size: 16px;
line-height: 1.6;
font-family: "ui-sans-serif", "Arial", sans-serif;
}
Post a new work and select the saved work skin. Switch to HTML instead of rich text mode. The format goes like this:
<div class="ai-section"><div class="ai-header"><div class="ai-title">
<p><span class="ai-title-main">☰ ChatGPT</span>
<img class="ai-arrow-img" src="https://i.postimg.cc/mrQvprrx/more-module.jpg"></p></div>
<p><img class="ai-header-image" src="https://i.postimg.cc/B6nm5ZLP/top-right-svgs.jpg"></p></div><div class="user">
<p>what user says</div><div>
<p>ai response</p>
</div></div>
<p><img class="half-screen-image" src="https://i.postimg.cc/hGpbvP7r/six-bottom-svgs.jpg"></p><div class="user">
<p>what user says 2</p></div><div>
<p>ai response 2</p></div>
<p><img class="half-screen-image" src="https://i.postimg.cc/hGpbvP7r/six-bottom-svgs.jpg">
AO3 does not allow svg buttons so I have to import pics to recreate ChatGPT UI. You can replace the imgs to switch it to Deepseek or Claude or any other AIs you like. As you can see in the code, the user's dialogue will only occupy no more than 70% of the screen, just like the original ChatGPT UI. But I know there are many other versions so feel free to customize. The same goes for any other settings in this work skin.
You can also let the AI speak first or let the user end the conversation. Just don't forget to wrap the dialog in <div class="user"><p>what user says 2</p></div>, and don't forget to add <p><img class="half-screen-image" src="https://i.postimg.cc/hGpbvP7r/six-bottom-svgs.jpg"> after everything ai says.
AI and user can speak with pics. Simply importing the pic link and wraping it into <p></p> will do.