Tools ›

Skin request maker

Choose how your site should feel. The request on the right follows skin rules v1.5, so the AI makes a file you can upload right away.

Your request

[Desired look: 깔끔한 미니멀, background #f6f3ee, accent color #d2462f, slightly rounded corners (about 8px), a light theme (dark text on a light background). Use these exact colors for --aml-bg and --aml-accent / --aml-accent-fill.]

Using the look above, make one "skin" HTML file for my music site. Follow these rules exactly.

[Rules]
1. One HTML file. Put all CSS in a single <style> inside <head>. Keep it short — 30KB or less.
2. Not allowed: <script>, on…= attributes such as onclick, javascript:, iframe, frame, object, embed, form, input, button, textarea, select,
   link, base, meta http-equiv, @import, url(http…), external images or external web fonts. If you need a pattern, use a CSS gradient.
3. The site draws the song rows, menu, player, albums and guestbook. I only choose colors and layout. Use this skeleton exactly:
   <!doctype html><html lang="{{lang}}"><head><meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="theme-color" content="(background color)"><title>{{site_name}}</title><style> … </style></head>
   <body class="aml-kit">
   {{banner}}
   {{hero}}
   <div class="aml-bar">{{menu}}{{lang_select}}</div>
   {{ad_top}}
   {{content}}
   {{footer}}
   {{player}}
   </body></html>
   ({{menu}}, {{content}} and {{player}} must each appear exactly once. Never write placeholder names inside comments.)
4. In :root inside <style>, set all of these color variables (changing only these recolors the whole site):
   --aml-bg (page background) --aml-panel (song rows, cards) --aml-panel-2 (pressed cells) --aml-text (text) --aml-muted (secondary text)
   --aml-line (thin lines) --aml-glass (menu bar and player, see-through: rgb(… / .74))
   --aml-accent (accent text and lines) --aml-accent-fill (button background) --aml-accent-ink (button text)
   --aml-hero-a (how much profile color to mix into the header: 8% for light, 20% for dark) --aml-art-shadow (album shadow or none)
   --aml-viz-color (playing bars) --aml-viz-opacity (0.18–0.25) --aml-viz-gap (3px)
   --aml-modal-bg --aml-modal-text (lyrics window) --aml-footer-color --aml-social-color --aml-ext-color
   Put a list of device fonts in --aml-font (for example: -apple-system, "Pretendard Variable", Pretendard, system-ui, sans-serif).
5. Text must contrast with its background at 4.5:1 or more (no gray text on gray). Secondary text (--aml-muted) also 4.5:1 or more on --aml-panel.
6. To decorate more, add CSS to these classes (shape only — don't move or resize things a lot):
   .aml-hero (header) .aml-hero-name (site name) .aml-profile (round photo) .aml-btn-primary (play-all button)
   .aml-bar (menu bar) .aml-menu-item / .aml-menu-item.is-active (menu pills)
   .aml-section-title (titles) .aml-track (song row card) .aml-track.is-playing (playing row) .aml-track-title .aml-track-artist .aml-genres
   .aml-album-cover (album art) .aml-gb-form .aml-gb-post (guestbook) .aml-footer
   Do not change the position or size of the player (.aml-player) or the visualizer (.aml-viz) — colors only.
7. Make sure it looks good on a phone (390px wide). The built-in design already fits phones, so don't fix widths.

Show only the finished HTML file, in one code block.

Copy the request and paste it into free ChatGPT or Claude.
If the answer is cut off, type “continue”.
Save the code as a .html file and check it: Skin checker
Upload it in your admin page under Skins.