
效果預覽
相似的 Skills
查看所有 Skills你將獲得
- 聯絡列 Hero 的完整原始碼——元件檔案加上可直接執行的使用範例,貼上即可編輯。
- 一份書面視覺規範:配色、字級、圓角、圖示線寬與動態時序,全部以 token 集中在一處編輯。
- 人像與照片隨區塊一併提供,已放置到位並儲存在本機,不需從外部抓取。
適合
- 你需要一個 Hero 區塊,而且想要現成的完成品,而不是一張白紙。
- 你希望第一屏一算繪出來就是完整的,圖像也已放置到位。
- 你想要可讀、可編輯的原始碼,而不是又一個得持續升級的相依套件。
不適合
- 已在使用成熟設計系統的團隊——這套配色與字級會和你們的互相衝突。
- 想要有版本號 npm 套件的人;這裡交給你的是需要自行維護的原始碼。
- 需要導覽列、表單、登入驗證或結帳流程的專案——這個區塊都不涵蓋。
品牌設計與視覺規範新品上市與 App 成長網頁設計與數位體驗製作 UI 視覺建置網頁建置 Landing Page成果可編輯視覺精美新手友善暖中性色青綠點綴動態攝影風
關於此 Skill

只要貼上一個區塊,頁面頂端就完成了——標題、輔助文案、按鈕和視覺素材都已彼此妥貼地排好。不必再排版,也不會留下任何灰色占位框。
你會得到什麼
- 聯絡列 Hero 的完整原始碼——元件檔案加上可直接執行的使用範例,貼上即可編輯。
- 一份成文的視覺規範:色票、字級、圓角、圖示線寬與動態時間,全部以 token 形式集中在一處編輯。
- 人像與攝影照片隨區塊一起提供,已放置到位並存放在本機,不需從外部抓取。
使用方式
- 告訴你的 AI 助理要把這個區塊放在哪裡,它會先讀過你的專案,再依照專案既有的寫法產出區塊。
- 把文字換成你自己的。字級與間距會自行維持。
- 放入你自己的圖片。有人物的位置放人像,其餘位置放攝影照片。
- 上線前先在手機上看一次。它本來就設計成在手機上也能穩住版面。
開始前需要準備什麼
- 最近實測
- v1.0.1 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
使用者評價
正在載入評價…







