跳到主要內容
meshmelo
繁體中文
ZH
English
Deutsch
Español
Français
हिन्दी
Bahasa Indonesia
Italiano
日本語
한국어
Português (Brasil)
Русский
ไทย
Türkçe
Tiếng Việt
繁體中文
登入
選單
理念
運作方式
佈景主題
工具
教學
給 AI 與開發者
開始使用
到 aimusiclist.com 收聽
↗
工具
›
佈景主題需求產生器
選擇你想要的網站感覺。右邊的需求遵循佈景主題規則 v1.5，所以 AI 會做出可以直接上傳的檔案。
氛圍
簡約清爽
90 年代卡帶
夜晚的霓虹城市
溫暖的木吉他咖啡館
Lo-fi 臥室錄音室
古典音樂廳
繽紛的 K-pop 舞台
寧靜的森林與雨
亮色或暗色
亮色
暗色
顏色
背景
強調色
圓角
直角
微圓
很圓
產生需求
你的需求
複製
[想要的感覺：簡約清爽，背景色 #f6f3ee，強調色 #d2462f，微圓角（約 8px），亮色主題（淺色背景配深色文字）。請把這些顏色直接用在 --aml-bg 和 --aml-accent / --aml-accent-fill。] 請依照上面的感覺，幫我的音樂網站做一個「佈景主題」HTML 檔。請完全遵守以下規則。 [規則] 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. 想再多裝飾的話，可以在這些 class 加上 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 檔並檢查：
佈景主題檢查器
在管理頁面的「佈景主題」上傳。