
效果預覽
相似的 Skills
查看所有 Skills你將獲得
- 活動日曆圖表的完整原始碼——元件檔案加上可執行的使用範例,可直接貼上並編輯。
- 一份書面視覺規範:配色、字級、圓角、圖示線寬與動態時序,全部以 token 集中在一處編輯。
- 響應式斷點已調校完成,從桌機一路到手機都適用。
適合
- 你需要在頁面上放資料視覺化,又不想自己串接圖表函式庫。
- 你希望圖表的配色與間距和頁面其他部分一致。
- 你想要可讀、可編輯的原始碼,而不是又一個得持續升級的相依套件。
不適合
- 已在使用成熟設計系統的團隊——這套配色與字級會和你們的互相衝突。
- 想要有版本號 npm 套件的人;這裡交給你的是需要自行維護的原始碼。
- 需要導覽列、表單、登入驗證或結帳流程的專案——這個區塊都不涵蓋。
客戶交付與高層簡報學術研究與技術溝通網頁設計與數位體驗製作資訊圖表製作 UI 視覺建置網頁成果可編輯視覺精美新手友善暖中性色青綠點綴編輯風
關於此 Skill

貼上一個區塊,頁面上就會出現真正的資料視覺化,是正規繪製而非用 SVG 草草勾勒。放入你的數字,圖形就會自動重繪。
你會得到
- 活動日曆圖表的完整原始碼——元件檔案加上可執行的使用範例,可直接貼上並編輯。
- 一份書面視覺規範:配色、字級階層、圓角、圖示線寬與動態時間,全部以 token 集中在一處編輯。
- 已調校好的響應式斷點,從桌機到手機都適用。
使用方式
- 告訴你的助理要把這個區塊放在哪裡,它會先讀取你的專案,再依照專案既有的寫法產生區塊。
- 把文字換成你的內容。字級與間距會自動維持。
- 在一處修改強調色,整個區塊隨之更新。
- 上線前先在手機上看看。它本來就設計成在手機上也能維持版面。
開始前需要準備什麼
- 最近實測
- v1.0.1 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
使用者評價
正在載入評價…







