教學 ›
Make a skin with free AI
A skin is one HTML file. Make one with free ChatGPT or Claude in a few minutes, check it, and upload it.
這篇教學還沒有翻譯成你的語言,所以先以英文顯示。
A skin decides how your site looks: colors, layout, fonts, shapes. It is one HTML file with CSS inside. The site itself draws the menu, song list and player — the skin only gives them a look. So any skin works on any personal site, and playing music always works the same.
The fast way (about 5 minutes)
- Open the skin request maker. Pick a feel, light or dark, two colors and the corner shape.
- Press Copy and paste the request into free ChatGPT or Claude.
- If the answer is cut off, type “continue”.
- Copy the code into a text editor and save it as
myskin.html(UTF-8). - Check it with the skin checker. Fix what it reports — or paste the problems back to the AI and ask it to fix them.
- On your site: ⚙ Admin → Skins → type a name → upload → Use this skin.
Or start from a skin
Download a skin from the gallery and change the colors at the top (:root { --aml-bg: …; --aml-accent: … }). With <body class="aml-kit"> the site draws a polished design for you — a skin can be just a list of colors (2–4 KB).
The rules in short
- One
.htmlfile, 100 KB or less, CSS inside<style>. - Put
{{menu}},{{content}}and{{player}}exactly once each. - Recommended:
{{hero}}(photo, name, about, socials and Play buttons in one block),{{banner}},{{footer}},{{lang_select}}. - Also available:
{{site_name}},{{artist_name}},{{description}},{{year}},{{lang}},{{socials}},{{ad_top}}. - No scripts (
<script>,onclick=…), no forms or buttons, no iframes. - No outside files: no web fonts, no images from other sites, no
@import. Smalldata:images and CSS gradients are fine. - Normal links (
<a href="https://…">to your social pages) are fine.
Why so strict? A skin with no scripts can't steal passwords or slow your site down, and a free AI can write it in one go.
Tips
- The site draws the player bar (a floating bar, full-screen on phones). Change its colors with the
--aml-*variables — not its position or size. - Text needs a contrast of 4.5:1 or more, secondary text too.
- Check on a phone (390px wide). The built-in design already fits phones.
- The ⚙ Admin link is added at the bottom of every page automatically. You can style
.aml-adminbar, but please don't hide it.