前言¶
在 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 仓库。
