
效果預覽
相似的 Skills
查看所有 Skills你將獲得
- 事件長條圖的完整原始碼——元件檔案加上可執行的使用範例,可直接貼上並編輯。
- 一份書面視覺規範:配色、字級、圓角、圖示線寬與動態時序,全部以 token 集中在一處編輯。
- 圖表設定以純資料形式提供——換上你自己的資料序列,其餘交給圖表層處理。
適合
- 你需要在頁面上放資料視覺化,又不想自己串接圖表函式庫。
- 你希望圖表的配色與間距和頁面其他部分一致。
- 你想要可讀、可編輯的原始碼,而不是又一個得持續升級的相依套件。
不適合
- 已在使用成熟設計系統的團隊——這套配色與字級會和你們的互相衝突。
- 想要有版本號 npm 套件的人;這裡交給你的是需要自行維護的原始碼。
- 需要即時串流資料,或要對超大資料集做虛擬化捲動的圖表。
客戶交付與高層簡報學術研究與技術溝通網頁設計與數位體驗製作資訊圖表製作 UI 視覺建置網頁成果可編輯視覺精美新手友善暖中性色青綠點綴生成式背景
關於此 Skill

貼上一個區塊,頁面上就會出現真正的資料視覺化,是正規繪製而非用 SVG 草草勾勒。放入你的數字,圖形就會自動重繪。
你會得到
- 事件長條圖的完整原始碼——元件檔案加上可執行的使用範例,可直接貼上並編輯。
- 一份書面視覺規範:配色、字級階層、圓角、圖示線寬與動態時間,全部以 token 集中在一處編輯。
- 圖表設定以純資料形式提供——換上你自己的資料序列,其餘交給圖表層處理。
使用方式
- 告訴你的助理要把這個區塊放在哪裡,它會先讀取你的專案,再依照專案既有的寫法產生區塊。
- 把文字換成你的內容。字級與間距會自動維持。
- 把數字換成你自己的資料序列——圖表會重繪,顏色與座標軸保持一致。
- 上線前先在手機上看看。它本來就設計成在手機上也能維持版面。
開始前需要準備什麼
- 相依項目
- ECharts — 必要
- 最近實測
- v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
使用者評價
正在載入評價…







