# 鎵撳寘鍗虫垚鍝侊細HTML鍒跺搧寮曟搸妯瘎
## 姒傝堪
2026 骞寸殑 Claude Code 鎶�鑳界敓鎬侀噷锛屾渶鍊煎緱鍏虫敞鐨勪竴鑲℃殫娴佷笉鏄�"鑳藉啓澶氬皯琛屼唬鐮�"锛岃�屾槸"鑳戒笉鑳芥妸涓�涓畬鏁村墠绔�**鎵撳寘鎴愪竴涓彲鍒嗕韩銆佸彲鐙珛杩愯鐨勫崟鏂囦欢**"鈥斺�斾篃灏辨槸浠� claude.ai 鐨� Artifact 鑼冨紡瀚佹帴杩涙湰鍦扮紪鐮� Agent 鐨�"鎴愬搧浜や粯"鎬濊矾銆傛湰鏈熻仛鐒﹀叚娆惧洿缁曡繖涓�鑼冨紡鐨勫墠绔璁＄被鎶�鑳斤細瀹樻柟鐨� `web-artifacts-builder` 涓� `develop-web-game`銆佹槦鏍囨儕浜虹殑 `impeccable` 璁捐璇█銆佽鏈� 61 涓囩殑瀹樻柟 `frontend-design`锛屼互鍙婃暟鎹埗鍝佸弻闆勮殏铓� AntV 鍏欢濂椾笌绀惧尯 ECharts 鎶�鑳姐�傚畠浠叡浜悓涓�涓垽鏂細**浜や粯鐗╀笉鏄唬鐮佺墖娈碉紝鑰屾槸涓�涓墦寮�鍗崇敤鐨勬垚鍝�**銆傛湰鏂囦粠鍔熻兘瀹屾暣搴︺�佷笂鎵嬮毦搴︺�佸彉鐜版綔鍔涖�佽缁冭惀閫傜敤鎬с�佺ぞ鍖烘椿璺冨害浜斾釜鍔犳潈缁村害閫愪釜鎷嗚В锛屽苟缁欏嚭绂荤嚎浜や粯鍒嗙骇銆佽璁¤瑷�鍒嗗眰涓ゆ潯姝ゅ墠鏈璁ㄨ鐨勮瘎娴嬩富绾裤��
## 璇勬祴鎬昏琛�
| 鎶�鑳� | 绫诲瀷 | 瑁呮満閲� / Star | 鍔熻兘(25%) | 涓婃墜(20%) | 鍙樼幇(25%) | 璁粌钀�(15%) | 绀惧尯(15%) | 鍔犳潈缁煎悎 |
|------|------|--------------|:---:|:---:|:---:|:---:|:---:|:---:|
| impeccable (pbakaus) | 璁捐璇█ | 5.39涓囪鏈� / 4.33涓団槄 | 鈽呪槄鈽呪槄 | 鈽呪槄鈽呪槄鈽� | 鈽呪槄鈽呪槄鈽� | 鈽呪槄鈽呪槄鈽� | 鈽呪槄鈽呪槄鈽� | **4.75** |
| frontend-design (anthropics) | 璁捐瑙勮寖楠ㄦ灦 | 61.2涓囪鏈� | 鈽呪槄鈽呪槄鈽� | 鈽呪槄鈽呪槄 | 鈽呪槄鈽呪槄 | 鈽呪槄鈽呪槄鈽� | 鈽呪槄鈽呪槄鈽� | **4.55** |
| chart-visualization (AntV/铓傝殎) | 鏁版嵁鍒跺搧鍏欢濂� | 4.6鍗冭鏈� / 394鈽� | 鈽呪槄鈽呪槄鈽� | 鈽呪槄鈽呪槄 | 鈽呪槄鈽呪槄 | 鈽呪槄鈽呪槄 | 鈽呪槄鈽呪槄 | **4.25** |
| web-artifacts-builder (anthropics) | 浜や簰搴旂敤鍒跺搧 | 瀹樻柟 example | 鈽呪槄鈽呪槄鈽� | 鈽呪槄鈽� | 鈽呪槄鈽呪槄 | 鈽呪槄鈽呪槄鈽� | 鈽呪槄鈽呪槄 | **4.20** |
| echarts-chart-skill (Liuguanyi2125) | 鏁版嵁鍒跺搧(绀惧尯) | 绀惧尯浠撳簱 | 鈽呪槄鈽呪槄 | 鈽呪槄鈽� | 鈽呪槄鈽� | 鈽呪槄鈽呪槄 | 鈽呪槄鈽� | 3.40 |
| develop-web-game (anthropics) | 娓告垙鍒跺搧+娴嬭瘯鍥炶矾 | 瀹樻柟 example | 鈽呪槄鈽呪槄 | 鈽呪槄鈽� | 鈽呪槄鈽� | 鈽呪槄鈽呪槄 | 鈽呪槄鈽� | 3.40 |
> 鍔犳潈鍏紡锛�0.25脳鍔熻兘 + 0.20脳涓婃墜 + 0.25脳鍙樼幇 + 0.15脳璁粌钀� + 0.15脳绀惧尯銆�
## 鐢熸�佸垎绫绘�濈淮瀵煎浘
```mermaid
mindmap
root((HTML鎴愬搧
鍒跺搧寮曟搸))
浜や簰搴旂敤鍒跺搧
web-artifacts-builder
React18+Tailwind+shadcn鍗旽TML
develop-web-game
娓告垙鍒跺搧+Playwright鍥炶矾
绀惧尯React鍙樹綋
react-artifacts / gamified-app
鏁版嵁鍒跺搧
AntV鍏欢濂�(铓傝殎瀹樻柟)
鍥捐〃/淇℃伅鍥�/鍙欎簨/閫忚琛�/鍦板浘/鍥炬爣
ECharts绀惧尯skill
涓夋。HTML浜や粯
璁捐璇█灞�
impeccable
4.3涓囨槦璁捐璇█
anthropics/frontend-design
瀹樻柟璁捐楠ㄦ灦61涓囪鏈�
浜や粯褰㈡�佸垎绾�
鑱旂綉CDN鐗�
鏂囦欢澶圭绾跨増
鐙珛鍗曟枃浠剁増
```
---
## 涓�銆亀eb-artifacts-builder锛氫氦浜掑簲鐢ㄥ埗鍝佺殑鏃楄埌
- **鏉ユ簮 / 瀹夎**锛欰nthropic 瀹樻柟 `anthropics/skills`锛坋xample-skills锛夈�傛湰鍦板惎鐢ㄥ嵆鍦� `example-skills/web-artifacts-builder` 涓嬨��
- **鎶�鏈爤**锛歊eact 18 + TypeScript + Vite锛堝紑鍙戯級+ Parcel锛堟墦鍖咃級+ Tailwind CSS + shadcn/ui锛岄瑁� **40+ shadcn 缁勪欢**涓庡叏閮� Radix UI 渚濊禆锛宍@/` 璺緞鍒悕寮�绠卞嵆閰嶃��
- **鏍稿績娴佺▼**锛歚scripts/init-artifact.sh <椤圭洰鍚�>` 涓�閿垵濮嬪寲瀹屾暣宸ョ▼ 鈫� 缂栬緫寮�鍙� 鈫� `scripts/bundle-artifact.sh` 鎶婃暣涓� React 搴旂敤鍐呰仈鎴愬崟涓� `bundle.html`锛屾墍鏈� JS/CSS/渚濊禆鍏ㄩ儴鎵撹繘涓�涓枃浠讹紝鍙洿鎺ュ湪瀵硅瘽涓綔涓� Artifact 鍒嗕韩銆�
- **鍙� AI slop 鍑嗗垯**锛氭槑鏂囪姹傞伩寮�"杩囧害灞呬腑甯冨眬銆佺传鑹叉笎鍙樸�佺粺涓�鍦嗚銆両nter 瀛椾綋"鍥涗欢濂椻�斺�旇繖鏄綋鍓嶆垚鍝佸缇庣殑纭害鏉熴��
- **璇勫垎**锛氬姛鑳解槄鈽呪槄鈽呪槄锝滀笂鎵嬧槄鈽呪槄锝滃彉鐜扳槄鈽呪槄鈽咃綔璁粌钀モ槄鈽呪槄鈽呪槄锝滅ぞ鍖衡槄鈽呪槄鈽�
- **鍙樼幇 / 璁粌钀�**锛氭渶閫傚悎鍋�"AI 灏忓伐鍏峰晢搴�"鈥斺�旇绠楀櫒銆侀厤缃敓鎴愬櫒銆佷氦浜� Demo 閮借兘 5 鍒嗛挓鍑烘垚鍝侊紝鍗曢〉宸ュ叿鍙寕 Gumroad/Lemon 绫绘寜浠朵粯璐癸紱璁粌钀ラ噷瀹冩槸璁茶В"鐘舵�佺鐞� + 璺敱 + 缁勪欢搴�"涓変欢濂楃殑鏈�浣宠浇浣擄紝涓�鑺傝浠� init 璺戝埌 bundle銆�
- **绔炲搧瀵规瘮**锛氱ぞ鍖烘湁 `eyadsibai/ltk@react-artifacts`銆乣mphinance/alpha-skills@gamified-app` 绛夊彉浣擄紝浣嗛兘鍙湁鍑犲崄瑁呮満閲忥紝缂哄畼鏂硅繖濂� 40+ 缁勪欢棰勮涓� Parcel 鍐呰仈绠＄嚎锛屽樊璺濇槑鏄俱��
## 浜屻�乨evelop-web-game锛氭妸娓告垙涔熷彉鎴愬崟鏂囦欢鍒跺搧
- **鏉ユ簮**锛欰nthropic 瀹樻柟 example-skills锛屽畾浣� HTML/JS 缃戦〉娓告垙鐨�"寮�鍙�+娴嬭瘯"闂幆銆�
- **鏍稿績鏈哄埗**锛氬缓绔嬩竴鏉″彲闈犲洖璺�斺�斿仛灏忔敼鍔� 鈫� 璺戜竴娈靛熀浜� Playwright 鐨勬祴璇曡剼鏈紙鐭緭鍏ヨ剦鍐� + 鍒绘剰鐣欑櫧鍋滈】锛夆啋 妫�鏌ユ埅鍥�/鏂囨湰 鈫� 鐢� `render_game_to_text` 澶嶇洏鎺у埗鍙版姤閿欍��
- **璇勫垎**锛氬姛鑳解槄鈽呪槄鈽咃綔涓婃墜鈽呪槄鈽咃綔鍙樼幇鈽呪槄鈽咃綔璁粌钀モ槄鈽呪槄鈽咃綔绀惧尯鈽呪槄鈽�
- **鍙樼幇 / 璁粌钀�**锛氬崟鏂囦欢 HTML 娓告垙鍙洿鎺ュ杩� itch.io銆佸井淇″皬娓告垙澶栧３鎴栦綔涓鸿惀閿�浜掑姩椤碉紱璁粌钀ョ敤瀹冭"娓告垙寰幆銆佸抚鏇存柊銆佺鎾炪�佽皟璇曞洖璺�"闈炲父椤烘墜锛孭laywright 鑷姩鎴浘鏄暀瀛﹀弽棣堢殑绁炲櫒銆�
- **绔炲搧瀵规瘮**锛氱浉姣� `web-artifacts-builder` 鍋� UI锛屽畠涓撴敾"鏈夊惊鐜�昏緫鐨勫彲杩愯鍒跺搧"锛屽苟琛ヤ笂浜嗗墠鑰呯己澶辩殑**鑷姩鍖栨祴璇�**杩欎竴鐜�斺�旇繖鏄畠涓嶅彲鏇夸唬鐨勫樊寮傚寲銆�
## 涓夈�乮mpeccable锛�4.3 涓囨槦鐨勮璁¤瑷�灞�
- **鏉ユ簮 / 鏁版嵁**锛歚pbakaus/impeccable`锛�**43,283 Star銆�2,440 Fork**锛�2026-07-03 浠嶅湪鏇存柊锛泂kills.sh 瑁呮満 5.39 涓囥�傝嚜鎴戝畾浣嶏細"**The design language that makes your AI harness better at design.**"
- **鏍稿績浠峰��**锛氬畠涓嶄骇浠ｇ爜锛屼骇**瀹＄編鍒ゆ柇**鈥斺�斾竴濂楀彲绉绘鐨勮璁¤瑷�锛岃浠绘剰 AI 缂栫爜妗嗘灦鍦ㄥ嚭鍓嶇鏃�"涓嶅儚 AI 鍛�"銆傚畠鏄笂闈袱娆炬垚鍝佸埗鍝佺殑"璐ㄦ劅澶栨寕"銆�
- **璇勫垎**锛氬姛鑳解槄鈽呪槄鈽咃綔涓婃墜鈽呪槄鈽呪槄鈽咃綔鍙樼幇鈽呪槄鈽呪槄鈽咃綔璁粌钀モ槄鈽呪槄鈽呪槄锝滅ぞ鍖衡槄鈽呪槄鈽呪槄
- **鍙樼幇 / 璁粌钀�**锛氬彉鐜板ぉ鑺辨澘鏈�楂樷�斺�斿彲鐩存帴鍖呰鎴�"璁捐绯荤粺鍜ㄨ / 鍝佺墝鍓嶇浠ｅ伐"鐨勯珮绔湇鍔★紝鎸夐」鐩浠风┖闂村ぇ锛涜缁冭惀閲屽畠鏄�"鍝佸懗璇�"鐨勬渶浣虫暀鏉愶紝鍑犱箮闆堕棬妲涳紙绾寚寮曞瀷 skill锛夈��
- **绔炲搧瀵规瘮**锛氫笌 `leonxlnx/taste-skill`锛�21.17 涓囪鏈猴級鍚岃禌閬擄紝浣� impeccable 璧� GitHub 涓讳粨 + 璁捐璇█璺嚎锛孲tar 璐ㄩ噺涓庢洿鏂版椿璺冨害鏇撮珮锛屾洿閫傚悎闀挎湡娌夋穩銆�
## 鍥涖�乤nthropics/frontend-design锛�61 涓囪鏈虹殑璁捐楠ㄦ灦
- **鏉ユ簮 / 鏁版嵁**锛欰nthropic 瀹樻柟锛宻kills.sh 瑁呮満 **621,200**锛屾槸鍓嶇璁捐绫昏鏈洪噺鏂眰绗竴銆�
- **鏍稿績浠峰��**锛氭彁渚涘畼鏂圭殑璁捐瑙勮寖楠ㄦ灦鈥斺�斾粠甯冨眬銆侀棿璺濄�佸瓧浣撳眰绾у埌缁勪欢绾︽潫锛屾槸鍐�"瑙勮寖鍓嶇"鏃剁殑榛樿搴曠洏銆傚畠瑙ｅ喅鐨勬槸"瀵逛笉瀵�"锛宨mpeccable 瑙ｅ喅鐨勬槸"缇庝笉缇�"锛屼簩鑰呬簰琛ャ��
- **璇勫垎**锛氬姛鑳解槄鈽呪槄鈽呪槄锝滀笂鎵嬧槄鈽呪槄鈽咃綔鍙樼幇鈽呪槄鈽呪槄锝滆缁冭惀鈽呪槄鈽呪槄鈽咃綔绀惧尯鈽呪槄鈽呪槄鈽�
- **鍙樼幇 / 璁粌钀�**锛氫綔涓哄簳灞傝鑼冿紝鍑犱箮姣忎釜鍓嶇鎴愬搧椤圭洰閮藉彲鎸傝浇锛涜缁冭惀閲屽畠鏄�"璁捐瑙勮寖钀藉湴"鐨勭涓�璇撅紝瑁呮満閲忔湰韬氨鏄競鍦洪獙璇併��
- **绔炲搧瀵规瘮**锛氳鏈洪噺鏄浜屽悕 taste-skill 鐨勮繎 3 鍊嶏紝瀹樻柟鑳屼功 + 鏈�楂樿鑼冩潈濞侊紝鍑犱箮鏃犳闈㈢珵鍝侊紝鍞竴鐭澘鏄亸閫氱敤銆佺己琛屼笟鍨傜洿瀹氬埗銆�
## 浜斻�丄ntV chart-visualization锛氳殏铓佸畼鏂规暟鎹埗鍝佸叚浠跺
- **鏉ユ簮 / 鏁版嵁**锛氳殏铓侀泦鍥� AntV 鍥㈤槦瀹樻柟 `antvis/chart-visualization-skills`锛孧IT銆乀ypeScript锛�2026-01-22 寤轰粨锛�**2026-07-03 浠嶅湪鏇存柊**锛�394 Star / 30 Fork锛涘惈 `eval/`銆乣harness/`銆乣__tests__/`銆乣playground/` 宸ョ▼鍖栫洰褰曘��
- **鍏欢濂�**锛歚chart-visualization`锛�4.6 鍗冭鏈猴紝鏌�/鎶�/楗肩瓑锛夈�乣infographic-creator`锛�1.7 鍗冿級銆乣narrative-text-visualization`锛堟暟鎹彊浜嬶紝1.2 鍗冿級銆乣icon-retrieval`锛堝浘鏍囧簱锛�1.1 鍗冿級锛屽鍔犲湴鍥句笌閫忚琛紝涓绘墦**鑷姩閫夊瀷 + 涓�閿嚭鍥�**銆�
- **璇勫垎**锛氬姛鑳解槄鈽呪槄鈽呪槄锝滀笂鎵嬧槄鈽呪槄鈽咃綔鍙樼幇鈽呪槄鈽呪槄锝滆缁冭惀鈽呪槄鈽呪槄锝滅ぞ鍖衡槄鈽呪槄鈽�
- **鍙樼幇 / 璁粌钀�**锛氳殏铓佹妸鍐呴儴涓や竾涓郴缁熺敤杩囩殑鍥捐〃搴撴矇娣�鎴� skill锛屼笓涓氬害琛屼笟椤剁骇锛岄�傚悎鍋�"鏁版嵁鐪嬫澘浠ｅ伐 / BI 鎶ヨ〃澶栧寘"锛涜缁冭惀閲�"鍏欢濂楄嚜鍔ㄩ�夊瀷"鏈韩灏辨槸缁濅匠鐨勫浘琛ㄦ硶鏁欏妗堜緥銆�
- **绔炲搧瀵规瘮**锛氱浉姣� `bytedance/deer-flow@chart-visualization`锛�1.8 鍗冭鏈猴級涓� `shubhamsaboo/awesome-llm-apps@visualization-expert`锛�3.4 鍗冿級锛孉ntV 浠�"瀹樻柟鍏欢濂� + 鑷姩閫夊瀷 + 瀹屾暣宸ョ▼鍖栫洰褰�"鍙栬儨锛屾槸鏁版嵁鍒跺搧閲屾渶鎴愪綋绯荤殑涓�濂椼��
## 鍏�乪charts-chart-skill锛氭妸"绂荤嚎鍗曟枃浠�"鍋氬埌鏋佽嚧鐨勭ぞ鍖虹‖鏍告淳
- **鏉ユ簮**锛歚Liuguanyi2125/echarts-chart-skill`锛岄潰鍚� Codex/Claude锛孉pache 2.0銆�
- **鏍稿績宸紓鍖�**锛氬畠鐨勬潃鎵嬮攺涓嶆槸鍥捐〃绉嶇被锛岃�屾槸**浜や粯鍒嗙骇**鈥斺�旀槑纭尯鍒嗚仈缃戠増銆佹枃浠跺す绂荤嚎鐗堛�佺嫭绔嬪崟鏂囦欢鐗堜笁绉� HTML锛屽苟榛樿瑕佹眰"鍗曞浘 HTML 鍙湪绗笁鍙拌澶囨柇缃戞墦寮�"銆備粨搴撳唴缃� Apache ECharts 瀹樻柟绀轰緥鐨勭绾跨储寮曪紙婧愬嚭 `apache/echarts-examples`锛屾敹缂栨彁浜ゅ彲杩芥函锛夛紝澶嶆潅鍥惧舰璧扮ず渚嬪簱妫�绱€�佸父瑙佸浘褰㈣蛋鍐呯疆妯℃澘銆�
- **璇勫垎**锛氬姛鑳解槄鈽呪槄鈽咃綔涓婃墜鈽呪槄鈽咃綔鍙樼幇鈽呪槄鈽咃綔璁粌钀モ槄鈽呪槄鈽咃綔绀惧尯鈽呪槄鈽�
- **鍙樼幇 / 璁粌钀�**锛氱洿鍑�"鍐呯綉/绂荤嚎/鍚堣浜や粯"杩欎竴鏀夸紒鍒氶渶锛屽崟鏂囦欢 HTML 鍙洿鎺ヤ氦浠樺鎴疯�屾棤椤昏仈缃戯紱璁粌钀ョ敤瀹冭"浜や粯鐗╁垎绾т笌绂荤嚎宸ョ▼"闈炲父瀵圭棁銆�
- **绔炲搧瀵规瘮**锛氶潰瀵� AntV 瀹樻柟姘斿娍锛屽畠浠�**浜や粯宸ョ▼鍖�**锛堜笁妗� HTML + 绂荤嚎绀轰緥搴� + 鏂綉鍙紑锛夊仛宸紓鍖栵紝鏄暟鎹埗鍝侀噷鏈�鎳�"浜や粯鍦烘櫙"鐨勪竴涓��
---
## 妯瘎灏忕粨锛氫袱鏉℃鍓嶆病浜鸿鐨勪富绾�
**涓荤嚎涓�鈥斺�斾氦浠樺舰鎬佸垎绾�**銆傛湰鎵规妧鑳界殑鐪熸鍒嗘按宀笉鏄�"鐢讳粈涔�"锛岃�屾槸"鎵撳寘鎴愪粈涔�"锛歚web-artifacts-builder` 鎶� React 搴旂敤鍐呰仈鎴� `bundle.html`锛沗develop-web-game` 杩炴祴璇曞洖璺竴璧锋墦鍖咃紱AntV/ECharts 鍒欐妸鏁版嵁鍥惧垎绾ф垚鑱旂綉 / 绂荤嚎 / 鍗曟枃浠朵笁妗ｃ��**鍗曟枃浠躲�佹柇缃戝彲寮�銆佺涓夊彴璁惧鍙敤**锛屾鍦ㄦ垚涓� 2026 鎴愬搧浜や粯鐨勪簨瀹炴爣鍑嗐��
**涓荤嚎浜屸�斺�旇璁¤瑷�鍒嗗眰**銆傛垚鍝佽川閲� = 楠ㄦ灦锛坄frontend-design` 瑙勮寖瀵归敊锛壝� 璇█锛坄impeccable` 瀹＄編楂樹綆锛壝� 鍙� slop 鍑嗗垯锛堥伩寮�灞呬腑/绱笎鍙�/缁熶竴鍦嗚/Inter 鍥涗欢濂楋級銆備笁鑰呭彔鍔狅紝鎵嶆妸"AI 鍐欑殑鍓嶇"浠庤兘鐢ㄥ埌鑰愮湅銆�
## 鎺ㄨ崘鎺掕姒�
**鎸夊彉鐜版綔鍔�**锛氣憼 impeccable锛堣璁″挩璇㈠ぉ鑺辨澘锛夆憽 AntV 鍏欢濂楋紙鏁版嵁鐪嬫澘浠ｅ伐锛夆憿 web-artifacts-builder锛堝皬宸ュ叿鍟嗗簵锛�
**鎸夊紑绠卞嵆鐢�**锛氣憼 anthropics/frontend-design锛�61 涓囪鏈洪粯璁ゅ簳鐩橈級鈶� AntV 鍏欢濂楋紙鑷姩閫夊瀷锛夆憿 impeccable锛堢函鎸囧紩闆堕棬妲涳級
**鎸夎缁冭惀閫傜敤**锛氣憼 web-artifacts-builder锛坕nit鈫抌undle 鍏ㄩ摼璺級鈶� impeccable锛堝搧鍛宠锛夆憿 develop-web-game锛堝甫娴嬭瘯鍥炶矾鍙嶉锛�
**鎸夌绾�/鍚堣浜や粯**锛氣憼 echarts-chart-skill锛堜笁妗� HTML + 鏂綉鍙紑锛夆憽 web-artifacts-builder锛堝崟 bundle.html锛夆憿 AntV 鍏欢濂�
**鏈湡棣栭�夌粍鍚�**锛歚web-artifacts-builder` + `impeccable` + `frontend-design` 涓変欢濂椻�斺�斾竴涓礋璐ｆ妸搴旂敤鎵撳寘鎴愬崟鏂囦欢鎴愬搧锛屼竴涓礋璐ｈ鎴愬搧涓嶅儚 AI 鍛筹紝涓�涓礋璐ｈ鑼冨閿欙紝瑕嗙洊"浜や簰搴旂敤鍒跺搧"浠庡紑鍙戝埌璐ㄦ劅鐨勬渶鐭矾寰勩��
## 鍙傝�冩潵婧�
1. [antvis/chart-visualization-skills 鈥� GitHub](https://github.com/antvis/chart-visualization-skills) 鈥� 铓傝殎 AntV 瀹樻柟鍏欢濂椾粨搴擄紙鍥捐〃/淇℃伅鍥�/鍙欎簨/閫忚琛�/鍦板浘/鍥炬爣锛夛紝MIT锛�2026-07-03 鏇存柊锛�394 Star
2. [Liuguanyi2125/echarts-chart-skill 鈥� GitHub](https://github.com/Liuguanyi2125/echarts-chart-skill) 鈥� 绀惧尯 ECharts 鎶�鑳斤紝涓夋。 HTML 浜や粯锛堣仈缃�/鏂囦欢澶圭绾�/鐙珛鍗曟枃浠讹級锛屽唴缃畼鏂圭ず渚嬬绾跨储寮�
3. [pbakaus/impeccable 鈥� GitHub](https://github.com/pbakaus/impeccable) 鈥� "The design language that makes your AI harness better at design"锛�43,283 Star锛�2026-07-03 鏇存柊
4. [铓傝殎闆嗗洟寮�婧� 6 澶у彲瑙嗗寲 Skill锛孋laude Code 鐢诲浘鑳藉姏澶у崌绾� 鈥� 瓒呯骇浜у搧缁忕悊](https://www.imspm.com/AIGC/758285.html) 鈥� AntV 鍏欢濂楁繁搴︽姤閬擄紝鍚嚜鍔ㄩ�夊瀷涓庡唴閮ㄥ浘琛ㄥ簱娌夋穩鑳屾櫙
5. [Claude Code 鐢熸垚涓撲笟鍥捐〃鐨� 15 涓� Skills锛氳鐩� 7 绉嶆覆鏌撳紩鎿庣殑瀹屾暣鎸囧崡 鈥� 鑻忕背瀹(https://www.xmsumi.com/detail/2997) 鈥� 鍥捐〃绫绘妧鑳芥覆鏌撳紩鎿庡叏鏅⒊鐞嗭紝鍚� ECharts/AntV 绛夋í鍚戝鐓�
6. [anthropics/skills 鈥� web-artifacts-builder SKILL.md](https://github.com/anthropics/skills/tree/main/example-skills/web-artifacts-builder) 鈥� 瀹樻柟 React+Tailwind+shadcn 鍗曟枃浠� Artifact 鏋勫缓绠＄嚎涓庡弽 AI slop 鍑嗗垯
偒鎶�鐭棰�**鍞崠锛屾寜"绱犳潗鍖�"璁′环銆傝缁冭惀瀹氫綅"闆跺熀纭�鍒涙剰缂栫▼"锛屼粠涓�琛屼唬鐮佸嚭涓�涓矑瀛愮郴缁熷紑濮嬶紝鏄瀬濂界殑澶氬反鑳洪┍鍔ㄦ暀瀛︺��
**瀵规瘮**锛氫笌 `algorithmic-art`锛坧5.js 瀹炴椂浜や簰锛夌浉姣旓紝瀹冩洿鍋�**褰曞埗/娓叉煋浜х墿**鑰岄潪瀹炴椂锛涗笌 `remotion-video-creator` 鐩告瘮锛屽畠鏄�"鎰熸�ц壓鏈�"鑰岄潪"鐞嗘�у彊浜�"銆�**鍒涙剰缂栫▼绱犳潗鍖栫涓�**銆�
---
## Skills 鐢熸�佸垎绫绘�濈淮瀵煎浘
```mermaid
mindmap
root((鍓嶇浜х墿寮曟搸))
闈欐�佽瑙�
璁捐鐢诲竷
canvas-design
淇℃伅鍥�
baoyu-infographic
鏋舵瀯鎷撴墤
architecture-diagram-zh
鍙氦浜扺eb
鍗曟枃浠跺簲鐢�
web-artifacts-builder
鍙帺娓告垙
develop-web-game
鎵嬬粯鐢诲竷
excalidraw
鍔ㄦ晥涓庤棰�
鍔ㄧ敾鐭ヨ瘑鍗�
knowledge-card-pro
鍒涙剰缂栫▼
processing-video-creator
algorithmic-art
缂栫▼寮忚棰�
remotion-video-creator
鍙ｆ挱杞棰�
content-to-video
缁勪欢涓庤惤鍦伴〉
缁勪欢鏋舵瀯
frontend-design
钀藉湴椤�
landing-page寮曟搸
```
> 涓婂浘楂樹寒鐨� 7 娆句负鏈湡璇勬祴瀵硅薄锛岀伆鏄捐妭鐐逛负鍓嶅簭杞宸茶鐩栧紩鎿庯紝浠呬綔鐢熸�佸畾浣嶅弬鐓с��
---
## 鎺ㄨ崘鎺掕姒�
### 馃弳 缁煎悎瀹炲姏姒滐紙鍔犳潈鎬诲垎锛�
1. **develop-web-game**锛�4.3锛夆�斺�� 鍞竴甯﹁嚜娴嬮棴鐜紝鍙帺鎬х‖閫氳揣
2. **web-artifacts-builder**锛�4.2锛夆�斺�� 閫氱敤鎬ф渶骞匡紝闆堕厤缃氦浠�
3. **knowledge-card-pro**锛�4.0锛夆�斺�� STEM 鍔ㄧ敾鍗＄墖锛屽唴瀹瑰彉鐜扮帇
4. **architecture-diagram-zh**锛�3.9锛夆�斺�� 涓枃鍙屼富棰樻灦鏋勫浘锛孊 绔垰闇�
5. **remotion-video-creator**锛�3.7锛夆�斺�� React 缂栫▼寮忚棰戯紝楂樺鍗曟繁鎶ゅ煄娌�
6. **processing-video-creator**锛�3.7锛夆�斺�� 鍒涙剰缂栫▼绱犳潗鍖栵紝鑹烘湳鍙樼幇
7. **canvas-design**锛�3.6锛夆�斺�� 鍘熷垱鍚堣娴锋姤锛屾壒閲忚璁�
### 馃挵 鍙樼幇娼滃姏姒�
1. **knowledge-card-pro** 鈽呪槄鈽呪槄鈽� 鈥斺�� 浠樿垂鐭ヨ瘑鍒囩墖锛岃闃呬笓鏍忓ぉ鑺辨澘
2. **develop-web-game / web-artifacts-builder** 鈽呪槄鈽呪槄鈽� 鈥斺�� 浣滃搧鍗冲紩娴侊紝宸ュ叿闆嗗悎鍙樼幇
3. **remotion-video-creator** 鈽呪槄鈽呪槄鈽� 鈥斺�� 鍝佺墝鐗囧ご/鏁版嵁瑙嗛楂樺鍗�
4. **processing-video-creator** 鈽呪槄鈽呪槄鈽� 鈥斺�� VJ/绱犳潗鍖呮寜浠惰浠�
5. **architecture-diagram-zh / canvas-design** 鈽呪槄鈽呪槅鈽� 鈥斺�� 楂橀浣庡鍗曟爣鍑嗗寲
### 馃帗 璁粌钀ラ�傜敤姒�
1. **develop-web-game** 鈽呪槄鈽呪槄鈽� 鈥斺�� "Agent 鑷祴闂幆"鏄粍閲� PBL 璇�
2. **architecture-diagram-zh** 鈽呪槄鈽呪槄鈽� 鈥斺�� 鏋舵瀯甯堝浘璇磋鏍囬厤
3. **web-artifacts-builder / knowledge-card-pro** 鈽呪槄鈽呪槄鈽� 鈥斺�� 鍓嶇鍚挋 / STEM 鍐呭鐢熶骇
4. **processing-video-creator / canvas-design** 鈽呪槄鈽呪槄鈽� 鈥斺�� 鍒涙剰缂栫▼ / 瀹＄編瀹為獙鍙�
5. **remotion-video-creator** 鈽呪槄鈽呪槅鈽� 鈥斺�� 闇� React 鍩虹锛岃繘闃跺畾浣�
### 鈿� 涓婃墜闅惧害姒滐紙瓒婃槗瓒婂墠锛�
1. **web-artifacts-builder / architecture-diagram-zh** 鈽呪槄鈽呪槄鈽� 鈥斺�� 闆堕厤缃嵆鍑�
2. **develop-web-game / knowledge-card-pro** 鈽呪槄鈽呪槄鈽� 鈥斺�� 涓�鏉″懡浠よ繘寰幆
3. **canvas-design** 鈽呪槄鈽呪槄鈽� 鈥斺�� 鎻愮ず璇嶅啓娉曞嵆闂ㄦ
4. **remotion-video-creator / processing-video-creator** 鈽呪槄鈽呪槅鈽� 鈥斺�� 闇�妗嗘灦鍩虹
### 馃Л 閫夊瀷鍐崇瓥鏍�
- **瑕佸仛鑳界帺鐨� Web 浜х墿** 鈫� `develop-web-game`
- **瑕佸仛闆朵緷璧栧彲鍒嗕韩鐨勫皬宸ュ叿** 鈫� `web-artifacts-builder`
- **瑕佹壒閲忓崠鐭ヨ瘑鍐呭** 鈫� `knowledge-card-pro`
- **瑕佸仛 B 绔灦鏋勪氦浠�** 鈫� `architecture-diagram-zh`
- **瑕佸仛鍝佺墝/鏁版嵁瑙嗛** 鈫� `remotion-video-creator`
- **瑕佸仛鑹烘湳/VJ 绱犳潗** 鈫� `processing-video-creator`
- **瑕佸仛娲诲姩娴锋姤** 鈫� `canvas-design`
---
## 涓�鍙ヨ瘽缁撹
鏈壒 7 娆惧紩鎿庨獙璇佷簡涓�鏉¤寰嬶細**鍓嶇鐨勪笅涓�娉㈢孩鍒╀笉鍦�"鐢诲緱缇�"锛岃�屽湪"鍔ㄥ緱瀵�"**鈥斺�擿develop-web-game` 鐨勮嚜娴嬮棴鐜妸"鍙帺"鍋氭垚浜嗗彲璇佹槑鐨勫伐绋嬭兘鍔涳紝`knowledge-card-pro` 鎶�"鍔ㄦ晥"鍋氭垚浜嗗彲璁′环鐨勭煡璇嗗垏鐗囥�傝嫢鍙兘鎶兼敞涓ゆ锛岄��**鑷祴闂幆锛堣兘鍔涘簳搴э級+ 鍔ㄧ敾鍗＄墖锛堝彉鐜板紩鎿庯級**杩欏缁勫悎锛氬墠鑰呭煿鍏�"浼氳嚜璇佺殑 AI 宸ョ▼甯�"锛屽悗鑰呮妸姣忎竴娆＄鏅兘鍙樻垚鐜伴噾娴併��
## 鍙傝�冩潵婧�
1. [Anthropic Claude Code 瀹樻柟鏂囨。](https://docs.anthropic.com/en/docs/claude-code/overview) 鈥� Claude Code Skills 绯荤粺銆丄gent 宸ヤ綔娴佷笌 Artifacts 鑼冨紡鐨勫畼鏂硅鏄庯紝鏄� `web-artifacts-builder`銆乣develop-web-game` 绛夊唴缃� Skill 鐨勮璁′緷鎹��
2. [p5.js 瀹樻柟绔橾(https://p5js.org/) 鈥� 鍒涙剰缂栫▼/鐢熸垚鑹烘湳鍙傝�冨簱锛宍algorithmic-art`銆乣processing-video-creator` 鐨勬妧娉曪紙Perlin 鍣０銆佺矑瀛愮郴缁熴�佹祦鍦猴級鏉ユ簮銆�
3. [Remotion 瀹樻柟鏂囨。](https://remotion.dev/) 鈥� 鐢� React 缂栫▼寮忔覆鏌撹棰戠殑妗嗘灦锛宍remotion-video-creator` 鐨勬牳蹇冨紩鎿庝笌 API 渚濇嵁銆�
4. [Processing 瀹樻柟绔橾(https://processing.org/) 鈥� 鍒涙剰缂栫▼璇█涓庣ぞ鍖猴紝`processing-video-creator` 鐨勮瑷�鏍瑰熀涓� openprocessing 浣滃搧鐢熸�佸弬鐓с��
5. [Claude Code Skills GitHub 鐢熸�乚(https://github.com/anthropics) 鈥� Anthropic 瀹樻柟鍙婄ぞ鍖� Skill 浠撳簱锛坄example-skills` 鍛藉悕绌洪棿锛夌殑鍒嗗彂涓庡畨瑁呯害瀹氥��
> [!tip] 51学通信知识星球
> **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。
> **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。
> **当前规模**：5200 篇主题 / 990 个回答，198 元/年。
> **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。
> **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。
