@jakeryderv/pi-artifacts
为Pi编码代理生成可视化文档/HTML制品
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：@jakeryderv/pi-artifacts。 它的用途是：为Pi编码代理生成可视化文档/HTML制品 完整的 Skill 内容见：https://321skill.com/skills/jakeryderv-pi-artifacts-jakeryderv/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'帮我用pi-artifacts搭建一个数据可视化报告，包含3张图表和说明文字'，它会自动生成项目文件夹、填充示例Markdown和HTML结构，并运行验证确保所有资源路径正确，最后启动预览让你在浏览器中查看效果。
介绍
该Skill专门解决Pi编码代理在生成复杂可视化内容时的痛点：手动拼接Markdown和HTML效率低、难以验证和预览。它提供一套完整的脚手架（scaffold）工具，可快速搭建便携式文档/HTML包结构；内置验证器自动检查内容完整性、链接有效性及格式合规性；预览功能支持即时渲染，让你在开发过程中随时查看最终效果。
使用方式极简：通过npm安装后，在终端中调用pi-artifacts命令即可。例如，输入pi-artifacts scaffold my-report创建项目骨架，再用pi-artifacts validate检查当前目录下的制品，最后用pi-artifacts preview启动本地预览服务。整个过程无需离开终端，与Pi代理的工作流无缝集成。
适合所有需要为Pi编码代理生成可视化文档、报告或演示素材的开发者。特别是前端开发者、文档工程师和全栈开发者，在构建教学演示、数据可视化报告、技术文档或项目展示时，能大幅提升制品质量和交付效率。
建议配合Pi代理的上下文管理功能使用，将生成的制品作为项目上下文的一部分传递给代理，实现更精准的代码生成。注意：该工具专注于制品生成与验证，不包含复杂的排版引擎或动态图表库，如需高级交互图表建议先在外部分析工具中生成后再嵌入。
核心特点
同类Skill多聚焦于代码生成或文档撰写，而本Skill专为Pi编码代理设计，提供从脚手架到验证再到预览的完整制品生命周期管理，且所有输出均为便携式Markdown/HTML包，无需额外依赖即可分享。
注意事项
不适合需要高交互性富媒体（如3D场景、实时数据流）或复杂后端渲染的场景。
常见问题
如何安装pi-artifacts？
运行 `npm install -g @jakeryderv/pi-artifacts` 全局安装，或 `npx @jakeryderv/pi-artifacts` 直接使用。
生成的制品能否在浏览器中直接打开？
可以。`pi-artifacts preview` 会启动本地服务器，你也可以将输出的HTML文件直接拖入浏览器，所有资源已内联打包。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/jakeryderv-pi-artifacts-jakeryderv/raw/index.md 读取 @jakeryderv/pi-artifacts 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/jakeryderv-pi-artifacts-jakeryderv/raw/index.md（查看排版版本）