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

貼上一個區塊,頁面上就會出現一張真正的資料視覺化圖表,是正式繪製而成,而不是用 SVG 隨手拼湊。填入你的數字,圖形就會自動重繪。
你會得到
- 試算表資料表格 的完整原始碼——元件檔案加上可執行的使用範例,貼上就能編輯。
- 一份書面視覺規範:色盤、字級、圓角、圖示線寬與動態時間,全部以 token 形式集中在一處編輯。
- 表格欄位與資料列皆為純資料;排序、分頁與水平捲動由表格層處理。
使用方式
- 告訴你的助理這個區塊要放在哪裡,它會先讀取你的專案,再依照專案既有的寫法產出區塊。
- 把文字換成你的內容,字級與間距會自動維持。
- 把資料列換成你自己的資料——排序、分頁與捲動照常運作。
- 上線前先用手機檢查一下,它已經針對手機做好調整。
開始前需要準備什麼
- 相依項目
- Ant Design — 必要
- 最近實測
- v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
使用者評價
正在載入評價…






