スキン依頼文メーカー

サイトの雰囲気を選んでください。右側の依頼文はスキンルール v1.5 に沿っているので、AIがそのままアップロードできるファイルを作ってくれます。

雰囲気

ミニマルですっきり 90年代のカセットテープ夜のネオン街あたたかいアコースティックカフェ Lo-fiな宅録スタジオクラシックのコンサートホール華やかなK-POPステージ静かな森と雨

ライトかダークかライトダーク

色背景アクセント

角四角少し丸くとても丸く

あなたの依頼文

[希望の雰囲気：เทปคาสเซ็ตยุค 90、背景色 #f6f3ee、アクセント色 #d2462f、少し丸い角（約8px）、ライトテーマ（明るい背景に濃い文字）。この色をそのまま --aml-bg と --aml-accent / --aml-accent-fill に使ってください。]

上の雰囲気で、私の音楽サイト用の「スキン」HTMLファイルを1つ作ってください。次のルールを必ず守ってください。

[ルール]
1. HTMLファイルは1つ。CSSはすべて <head> 内の <style> 1つにまとめる。30KB以下で短く。
2. 禁止：<script>、onclick などの on…= 属性、javascript:、iframe、frame、object、embed、form、input、button、textarea、select、
   link、base、meta http-equiv、@import、url(http…)、外部画像や外部Webフォント。模様が必要なら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}} はそれぞれ必ず1回だけ。プレースホルダー名をコメントの中に書かない。）
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ファイルだけを、1つのコードブロックで見せてください。

依頼文をコピーして、無料のChatGPTやClaudeに貼り付けます。
答えが途中で切れたら「続けて」と入力します。
コードを .html ファイルとして保存して確認します：スキンチェッカー
管理画面のスキンからアップロードします。