閱讀此技能中的 README.md 檔案,並探索其他可用的檔案。
若需建立視覺成品(簡報、模擬圖、一次性原型等),請複製素材並建立靜態 HTML 檔案供使用者檢視。若處理正式程式碼,則可複製素材並閱讀此處的規則,以成為該品牌設計的專家。
若使用者未提供其他指引而直接啟用此技能,請詢問他們想要建置或設計的內容、提出一些問題,並扮演專家設計師的角色,依需求輸出 HTML 成品 或 正式程式碼。
關鍵檔案:
README.md— 品牌脈絡、內容基礎、視覺基礎、圖示colors_and_type.css— 色彩、字型、間距、圓角、陰影、轉場效果的 CSS 變數fonts/— 網路字型(Inter、Playfair Display、Fira Code、Pirata One)assets/— 標誌與圖像preview/— 小型元件 / 代碼樣本ui_kits/marketing_site/— 作品集網站的 JSX 重建
招牌手法:大地暖色調色盤、扁平 4–12px 偏移陰影(無模糊)、1px 樹皮邊框、12–20px 圓角、Playfair 襯線標題 + Inter 內文 + Fira Code 等寬字型 + Pirata One 展示字型、置中菱形眉題區塊標題、微妙的 cubic-bezier(.22,.61,.36,1) 轉場效果。透過 CDN 使用 Phosphor Icons(Regular + Fill)。