視覺工作台 · Playground
你想開始經營個人 IG 或 Threads、打開 Canva 才發現第一關卡在「我要用什麼顏色」。網路找色票一片一片看、丟給 AI 又只回你三段文字、你還是看不出貼起來會長怎樣。下面把三組配色完整攤開——每個色塊標明用途、跟黑字白字的對比夠不夠、配上 IG / Threads / 部落格三種樣張即時換色、還可以拖滑桿微調主色看整套樣張一起變。挑到順眼的配色、點色塊把色碼複製進剪貼簿、直接拿去 Canva 用。
把你的品牌題目替換到下面 prompt 的【方括號】、貼進 ChatGPT / Claude / Gemini：
幫我做一個「個人品牌配色工作台」的網頁、用 HTML 做、CSS 跟 JavaScript 全寫在同一個檔案、不要外連任何套件、最後給我一個完整 .html 我直接用瀏覽器打開。 我的品牌題目：【寫你做什麼、講給誰聽。例：我寫食譜給上班族／我做美股筆記給小資族／我畫療癒系插畫】 請幫我做一個工作台、左右兩欄： 左欄（色票工作區）： 1. 上方 3 個圓鈕切換配色（不同氛圍、例如暖色／冷色／平靜色），點哪顆右側樣張就換哪配色 2. 主色微調滑桿：可以拖色相 ±60 度、飽和度 50~120%、整套色票跟樣張即時變色 3. 色票列表：每個色塊一行、左邊大色塊、中間色碼跟「用途說明」（例：主背景／強調色／次要文字）、右邊 hex、整行可以點來複製色碼 4. 對比比例小卡：把主色配白字、主色配黑字、淺底配主色、淺底配深字四種組合算 WCAG 對比比例、不夠 4.5 就標紅 5. 字級樣張：Display／H1／H2／Body／Small／Caption 六種大小、右側標 px / line-height / weight、上方按鈕可以切字體（無襯線／襯線／等寬） 右欄（樣張即時預覽）： 1. IG 輪播圖封面（4:5）：含品牌標籤、大標題兩行、handle、滑動提示 2. Threads 貼文卡：頭像、ID、文案、互動列 3. 部落格 hero 區塊：分類 tag、文章標題、摘要、CTA 按鈕 全部跟著左欄配色即時換色 互動細節： - 點色塊複製色碼、右下跳 toast 提示「色碼 #XXXXXX 已複製」 - 對比比例不夠 AA 標準時、跳警告條提示「這組對比偏低、長文字會吃力」 - 上方「複製整套色碼」按鈕一次打包成 CSS 變數複製 全繁體中文、不要用 emoji、手機 320px 寬度不爆版。