스킨 요청문 만들기

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

완성된 요청문

[원하는 느낌: 로파이 방구석 작업실, 배경색 #f6f3ee, 포인트색 #d2462f, 살짝 둥근 모서리(8px 정도), 밝은 테마(밝은 배경에 어두운 글자). 이 색을 그대로 --bg 와 --accent 로 써줘.]

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

[규칙]
1. HTML 파일 하나. CSS는 모두 <head> 안의 <style> 하나에 넣는다. 100KB 이하.
2. 스크립트 금지: <script>, onclick 같은 on…= 속성, javascript: 를 쓰지 않는다.
3. 다음 태그 금지: iframe, frame, object, embed, form, input, button, textarea, select, link, base, meta http-equiv.
4. 외부 파일 금지: 웹폰트, 외부 이미지, @import, url(http…) 를 쓰지 않는다. 글꼴은 system-ui 같은 기본 글꼴만. 이미지가 꼭 필요하면 CSS 그라디언트로 대신한다.
5. 아래 자리표시를 넣는다. {{menu}}, {{content}}, {{player}} 는 각각 정확히 한 번만.
   {{menu}} 메뉴 / {{content}} 본문 / {{player}} 하단 플레이어 (필수)
   {{site_name}} 사이트 이름 / {{artist_name}} 아티스트 / {{description}} 소개 / {{year}} 연도 / {{lang}} 언어코드 / {{lang_select}} 언어 선택 (선택)
6. 첫 부분은 이렇게 시작한다:
   <!doctype html><html lang="{{lang}}"><head><meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1"><title>{{site_name}}</title><style>…</style></head>
7. 메뉴·곡 목록·플레이어의 HTML은 사이트가 자동으로 만든다. 나는 아래 클래스에 CSS만 입힌다.
   - 메뉴: .aml-menu, .aml-menu-item, .aml-menu-item.is-active
   - 섹션: .aml-section, .aml-section-title, .aml-empty
   - 곡 목록: ol.aml-list > li.aml-track (재생 중이면 .is-playing)
       li 안: button.aml-play(빈 버튼, ::before로 ▶ 모양을 그린다), span.aml-track-main > span.aml-track-title + span.aml-track-artist,
              span.aml-genres > span.aml-genre(첫 번째는 .is-main, 최대 3개), span.aml-track-time
   - 앨범 목록: div.aml-albums > a.aml-album > (img.aml-album-cover 또는 span.aml-album-cover.is-empty) + span.aml-album-title + span.aml-album-artist
   - 앨범 보기: div.aml-album-head > img.aml-album-cover + div.aml-album-info > h2.aml-section-title + p.aml-album-artist + p.aml-album-count + button.aml-play-all
   - 플레이어: div.aml-player(재생 중이면 .is-playing) 안에 div.aml-player-info(span.aml-player-title, span.aml-player-artist),
       div.aml-player-controls(button.aml-player-btn.aml-prev / .aml-toggle / .aml-next), input.aml-player-seek(range),
       span.aml-player-time, span.aml-player-notice
   - 언어 선택: div.aml-lang > select.aml-lang-select ({{lang_select}} 자리에 사이트가 넣는다. 작고 눈에 띄게)
   - 관리 링크: div.aml-adminbar > a.aml-admin-link (사이트가 맨 아래에 자동으로 넣는다. 작고 은은하게)
8. 플레이어는 화면 아래에 고정하고 body에 padding-bottom을 준다. ".aml-player[hidden]{display:none}" 를 꼭 넣는다.
9. 휴대폰(가로 600px 이하)에서도 보기 좋게 @media 를 넣는다. 장르 칩이 좁으면 제목 아래로 내려가게 한다.
10. 색은 :root 의 CSS 변수로 모아서 나중에 바꾸기 쉽게 한다.

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

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