前言¶
在 DeepSeek Harness（dsh）裏讓智能體寫 React 頁面時，常見做法是直接改 .tsx 文件，靠人工或零散腳本檢查語法。Meta 開源的 Astryx 設計系統提供了模板、組件和規範化的構建流程，但要把這些能力接到 dsh 的工具鏈、校驗和可視預覽上，需要自己拼裝。
dsh-astryx-studio 是維護者 pingfanfan 提交的 DSH 客戶端插件：爲智能體暴露結構化 Astryx 工具，在每次寫入時掛載校驗鉤子，並在右側 Sidebar 提供實時預覽與模板畫廊。它與 markmini1234/astryx 不同——後者是用 Astryx 重皮膚 dsh 界面；本插件面向「用 Astryx 搭頁面」的工具、校驗與預覽，不改 dsh 主題。
這是什麼¶
一句話：DeepSeek Harness 插件，在 harness 內用 Meta Astryx 設計系統構建頁面。
- 名稱：
dsh-astryx-studio（npm 包名同 README 標題） - 維護者：pingfanfan
- 社區分類：客戶端（SkillHub 目錄頁）
- 許可證：MIT（資料原文）
- 當前狀態（README）：Day 3；工具、校驗鉤子、prompt 段、
astryx-pageskill、實時預覽頁籤與模板畫廊已可用；尚未正式發佈，bench 延後
依賴邊界（package.json）：Node >=22，dsh >=0.2.2-rc.1 <0.3.0；@astryxdesign/cli 等與腳手架釘在同一版本 0.7.11。
核心功能¶
五個 Agent 工具¶
工具封裝自 @astryxdesign/cli/api，名稱與用途如下（與 README 表格一致）：
| 工具 | 封裝 | 說明 |
|---|---|---|
astryx_build(keywords) |
build() |
英文關鍵詞選頁；ranker 無證據時列出全部模板供模型選擇，blank 爲最後手段 |
astryx_template(id, path?) |
template() |
默認路徑 src/pages/main/page.tsx；非 Astryx 工作區時會經 DSH 審批後創建 ./astryx-app |
astryx_component(name) |
component() |
編輯組件前拉取 props（支持 --dense --zh） |
astryx_search(query, type?, limit?) |
search() |
檢索 |
astryx_render(file, out?) |
render() |
實驗性單文件 HTML 導出 |
寫入校驗（Verify hook）¶
對 Astryx 工作區內 .ts / .tsx 的 write / edit / apply_patch / str_replace_editor：
- 同步（毫秒級，隨工具結果返回
astryx verify ✗或繼續）：esbuild 語法檢查、lint 計數差分；寫入不得增加<div>、style={{}}或stylex.create數量，不得新增允許列表外的 import（白名單含@astryxdesign/*、@stylexjs/stylex、react、react-dom、@heroicons/react、lucide-react、recharts等）。README 註明在@astryxdesign/cli0.7.11 的 57 個頁模板上校準爲零誤報。 - 異步：
tsc --noEmit --incremental，每個工作區同時只跑一輪，新寫入會取消進行中的運行；最新結果在智能體下一步注入（astryx verify ✓ (tsc 0.6s)或 TS 錯誤），等待進行中的 tsc 最長tscStepWaitMs（5 s）。
Prompt、Skill 與客戶端頁籤¶
- 固定 prompt 段：
build()的 playbook 規則與中文工作流。 - Skill：
astryx-page，含模板選擇表與完整模板列表。 - Astryx 預覽：
astryx_template打開右側 Astryx 預覽；iframe 指向本機預覽 Vite（127.0.0.1），腳手架在<workspace>/.astryx-studio/（git 忽略），不改動用戶原有vite.config。工具欄可切換 7 套主題、暗色與三種寬度；頁腳顯示 Vite 狀態與最新校驗結果；頁面運行時錯誤在頁籤展示，並在滿足條件時於模型下一步彙報（每個 distinct 錯誤一次）。 - Astryx 模板畫廊：57 個頁模板縮略圖、分類與搜索；點選後以普通用戶輪次發送「用
<id>模板開始」，由模型決定落盤路徑並調用astryx_template。工具欄偏好可寫入$DSH_HOME/astryx-studio/prefs.json，跨 DSH 重啓保留。
安裝與啓用¶
README 當前給出的是開發態安裝流程（倉庫說明：尚未 publish）。需要本機已有 dsh 滿足版本要求，並在插件目錄執行構建。
pnpm install && pnpm run build
# once: make `dev` a copy of the shipped web profile (a profile created by
# `plugin add` alone only has dsh-base and cannot serve the web UI)
dsh --profile dev --from-default-profile web --dump-config > /dev/null
dsh plugin --profile dev add .
dsh --profile dev --no-open
預期：工具列表中出現五個 astryx_* 工具；向智能體提出做頁面需求時，Astryx 預覽 頁籤應打開並顯示實時預覽。
說明：資料中沒有單獨的 dsh plugin add github:pingfanfan/dsh-astryx-studio 一行命令；若以 git 等方式安裝，倉庫提交物含已構建的 lib/，可避免本地再 build（見 README Layout 一節）。
典型用法¶
按 README 的驗收路徑即可復現：
- 按上一節完成
devprofile 與dsh plugin add .。 - 在 dsh 中向智能體描述頁面需求（英文關鍵詞可走
astryx_build；也可在 模板畫廊 點選模板，觸發「用<id>模板開始」）。 - 智能體調用
astryx_template等工具寫入src/pages/...；同步校驗立即反饋，隨後在下一步看到 tsc 結論。 - 在 Astryx 預覽 切換主題/寬度/暗色，必要時從工具欄在瀏覽器打開或導出單文件 HTML（
astryx_render爲實驗能力）。
本地質量檢查（維護者腳本，可選）：
pnpm run typecheck
pnpm run build
pnpm run test
pnpm run check
適用場景與注意¶
適合誰：已在或願意在 dsh 0.2.2-rc.1 系列上開發、需要用 Meta Astryx 規範搭頁面並依賴 harness 側工具+校驗+預覽閉環的智能體開發者。
需注意：
- 插件以當前 dsh 進程權限運行；安裝前請閱讀 GitHub 源碼 與 MIT 許可證，自行判斷信任邊界。
- 與「給 dsh UI 換 Astryx 皮膚」的項目目標不同，本插件不主題化 dsh。
- README 標明尚未正式發佈；生產使用請關注倉庫 Release 與 SkillHub 目錄更新。
- DeepSeek Harness 社區目錄（SkillHub）爲獨立站點，與 DeepSeek / 幻方無官方從屬關係；插件星標等以目錄與 GitHub 頁面爲準（抓取時 GitHub 星標爲 0）。
結尾¶
dsh-astryx-studio 把 Astryx 的 build/template/component/search/render 收成 dsh 工具，並在每次 TSX 寫入時做語法、lint 與 tsc 分層校驗，再用右側預覽與 57 模板畫廊縮短「描述需求 → 可見頁面」的迴路。進一步瞭解可訪問 SkillHub 目錄頁 與 GitHub 倉庫。
