Iridescent Butterfly UI System 專案

一個精緻的深色模式中文 UI/UX 設計系統展示專案，採用發光蝴蝶主題，適用於設計案例研究、作品集封面及風格系統展示。

提示詞

{"type":"UI/UX 設計系統展示專案","theme":"深色模式，自然靈感，發光虹彩美學","language":"中文","canvas":{"aspect_ratio":"方形海報","background":"深午夜藍至黑色，帶有細微光暈","style":"高級未來感展示專案，配有細霓虹藍面板輪廓、光澤高光、柔和光暈及高對比度"},"header":{"title":"自然靈感 UI\n蝴蝶虹彩\nUI/UX 設計系統","description":"從蝴蝶翅膀中汲取靈感，將結構色的虹彩光澤與深邃藍融入界面設計，創造輕盈、靈動、充滿生命力的數位體驗。","hero_image":"一個超細節的發光蝴蝶翅膀，呈現電光藍、紫羅蘭與虹彩青色，佔據右上半部，具有清晰的脈絡結構、半透明邊緣、火花般的粒子，以及後方模糊的第二個翅膀"},"layout":{"sections":[{"title":"1. 設計靈感","position":"左上方（標題下方）","count":4,"labels":["虹彩蝴蝶翅膀微距","藍紫色翅膀紋理特寫","光折射稜鏡光暈","蝴蝶翅膀細胞圖案"]},{"title":"2. 關鍵詞","position":"右上方（主圖下方）","count":5,"labels":["虹彩","靈動","輕盈","深邃","自然"],"icon_style":"圓角深色卡片內的簡約發光線條圖標"},{"title":"3. 色彩系統","position":"中左","subsections":[{"title":"主色","count":3,"labels":["大閃蝶藍 #1E5BFF","虹彩紫 #7A5CFF","天空光 #00E6FF"]},{"title":"中性色","count":3,"labels":["午夜黑 #060F19","柔和海軍藍 #141A2E","珍珠白 #F3F6FC"]},{"title":"強調色與漸變","count":2,"labels":["彩虹光澤","蝴蝶光芒"]}],"visual":"圓形色票與漸變球體，下方附有中文標籤"},{"title":"4. 排版","position":"中右","count":1,"labels":["Aa Poppins Light / Regular / Medium / SemiBold"],"visual":"深色卡片上的大型白色 Aa 字樣"},{"title":"5. 應用圖標","position":"左中","count":1,"text":"Winglet 輕盈。靈動。優雅。","visual":"應用名稱旁的發光蝴蝶 App 圖標"},{"title":"6. UI 組件","position":"中央","subsections":[{"title":"按鈕","count":3,"labels":["主要按鈕","次要按鈕","玻璃質感"]},{"title":"圖標","count":2,"labels":["心形收藏","發光圓環"]},{"title":"開關","count":1,"labels":["開關"]}],"visual":"深色面板上的圓角藍色按鈕、霓虹圖標按鈕及發光開關"},{"title":"其他元素","position":"右中","count":4,"labels":["搜索框","標籤 New","進度條 (72%)","卡片 Blue Morpho"],"visual":"緊湊水平卡片中的小型實用 UI 組件"},{"title":"7. 移動端 UI","position":"左下","count":3,"labels":["搜索頁面","帶有大型蝴蝶插圖的今日頁面","帶有波形圖的音頻播放頁面"],"visual":"三個圓角智能手機樣機，深色界面，藍紫色蝴蝶視覺"},{"title":"8. 網頁設計預覽","position":"右下","count":1,"labels":["光之生命"],"visual":"桌面端登陸頁面樣機，包含蝴蝶主圖、頂部導航、亮藍色行動呼籲按鈕及中文正文"},{"title":"9. 視覺背景","position":"底部全寬","count":4,"labels":["流動光帶背景 1","旋轉虹彩渦流","流動光帶背景 2","放射狀結晶爆發"],"visual":"四個紫色、藍色與青色的長方形背景樣本"}],"footer":{"count":1,"text":"源於自然的设计，為體驗而生。","center_icon":"小型蝴蝶圖標"}},"art_direction":{"materials":"玻璃擬態、霓虹邊緣光、平滑漸變、細微反射","colors":"電光藍、靛藍、紫羅蘭、青色、白色","composition":"整潔的網格，包含 9 個編號內容區塊、寬裕的間距、細圓角邊框及主導的蝴蝶主圖","render_quality":"高度精緻、清晰的排版、高級 Behance 風格設計系統專案"}}