스킨 요청문 만들기

사이트 느낌을 고르세요. 오른쪽 요청문은 스킨 규격 v1.5를 담고 있어서, AI가 바로 올릴 수 있는 파일을 만들어 줍니다.

완성된 요청문

[원하는 느낌: Musicassetta anni '90, 배경색 #f6f3ee, 포인트색 #d2462f, 살짝 둥근 모서리(8px 정도), 밝은 테마(밝은 배경에 어두운 글자). 이 색을 그대로 --aml-bg 와 --aml-accent / --aml-accent-fill 로 써줘.]

위 느낌으로 내 음악 사이트의 "스킨" HTML 파일 1개를 만들어줘. 규칙을 반드시 지켜줘.

[규칙]
1. HTML 파일 하나. CSS는 <head> 안의 <style> 하나에만. 30KB 이하로 짧게.
2. 금지: <script>, onclick 같은 on…= 속성, javascript:, iframe, frame, object, embed, form, input, button, textarea, select,
   link, base, meta http-equiv, @import, url(http…), 외부 이미지·외부 웹폰트. 무늬가 필요하면 CSS 그라디언트로.
3. 곡 줄·메뉴·재생 바·앨범·방명록은 사이트가 그린다. 나는 색과 배치만 정한다. 아래 뼈대를 그대로 쓴다:
   <!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="(바탕색)"><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}} {{player}} 는 꼭 한 번씩. 자리표시 이름을 주석 안에 쓰지 않는다.)
4. <style> 의 :root 에 아래 색 변수를 모두 정한다 (이것만 바꿔도 전체 색이 바뀐다):
   --aml-bg(페이지 바탕) --aml-panel(곡 줄·카드) --aml-panel-2(눌린 칸) --aml-text(글자) --aml-muted(보조 글자)
   --aml-line(얇은 선) --aml-glass(메뉴 막대·재생 바, 반투명 rgb(… / .74))
   --aml-accent(강조 글자·선) --aml-accent-fill(버튼 바탕) --aml-accent-ink(버튼 글자)
   --aml-hero-a(머리 바탕에 프로필 색을 섞는 양, 밝으면 8%, 어두우면 20%) --aml-art-shadow(앨범 그림자 또는 none)
   --aml-viz-color(재생 중 막대 색) --aml-viz-opacity(0.18~0.25) --aml-viz-gap(3px)
   --aml-modal-bg --aml-modal-text(가사 창) --aml-footer-color --aml-social-color --aml-ext-color
   글꼴은 --aml-font 에 기기 글꼴 목록을 쓴다 (예: -apple-system, "Pretendard Variable", Pretendard, system-ui, sans-serif).
5. 글자와 바탕의 대비는 4.5:1 이상 (회색 바탕 위 회색 글자 금지). 보조 글자(--aml-muted)도 --aml-panel 위에서 4.5:1 이상.
6. 더 꾸미고 싶으면 아래 클래스에 CSS를 덧붙인다 (모양만, 위치·크기를 크게 바꾸지 않기):
   .aml-hero(머리 영역) .aml-hero-name(사이트 이름) .aml-profile(동그란 사진) .aml-btn-primary(전체 재생 버튼)
   .aml-bar(메뉴 막대) .aml-menu-item / .aml-menu-item.is-active(메뉴 알약)
   .aml-section-title(제목) .aml-track(곡 줄 카드) .aml-track.is-playing(재생 중인 줄) .aml-track-title .aml-track-artist .aml-genres
   .aml-album-cover(앨범 아트) .aml-gb-form .aml-gb-post(방명록) .aml-footer
   재생 바(.aml-player)와 비주얼라이저(.aml-viz)의 위치·크기는 바꾸지 않는다 (색 변수만).
7. 휴대폰(가로 390px)에서도 보기 좋은지 생각해서 만든다. 기본 디자인이 이미 휴대폰에 맞춰져 있으니 넓이를 고정하지 않는다.

완성된 HTML 파일 하나만 코드 블록으로 보여줘.

요청문을 복사해서 무료 ChatGPT나 Claude에 붙여넣습니다.
답이 중간에 끊기면 “이어서”라고 입력합니다.
받은 코드를 .html 파일로 저장하고 검사합니다: 스킨 검사기
관리 화면 Skins 탭에 올립니다.