日本語

ガイド ›

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)

  1. Open the skin request maker. Pick a feel, light or dark, two colors and the corner shape.
  2. Press Copy and paste the request into free ChatGPT or Claude.
  3. If the answer is cut off, type “continue”.
  4. Copy the code into a text editor and save it as myskin.html (UTF-8).
  5. Check it with the skin checker. Fix what it reports — or paste the problems back to the AI and ask it to fix them.
  6. 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 .html file, 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. Small data: 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.