@eliemessiecode/pi-render
为pi-coding-agent提供HTML页面浏览器渲染与自动保存功能
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：@eliemessiecode/pi-render。 它的用途是：为pi-coding-agent提供HTML页面浏览器渲染与自动保存功能 完整的 Skill 内容见：https://321skill.com/skills/eliemessiecode-pi-render/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我生成一个带按钮和样式的登录表单HTML，并在浏览器中打开预览。”，它会先生成完整的HTML、CSS代码，然后自动调用此Skill在浏览器中渲染出可交互的表单页面，同时将代码文件保存到你的项目目录中。
介绍
该Skill是专为pi-coding-agent设计的扩展工具，旨在解决AI辅助编码时HTML代码预览不便的问题。它允许开发者将生成的HTML代码直接在浏览器中渲染成交互式页面，并提供实时预览，无需手动创建和刷新文件。
使用方式非常简单，在pi-coding-agent环境中，当AI生成HTML代码片段或完整页面后，调用此Skill即可自动在默认浏览器中打开渲染结果，并同时将HTML文件保存到本地指定目录，方便后续查看和修改。
它非常适合前端开发者、全栈工程师、以及任何需要快速原型设计和预览HTML/CSS/JavaScript效果的编程学习者。在需要即时验证UI效果、演示代码成果或进行教学展示时尤为高效。
建议在开发初期或进行快速迭代时使用，以提升视觉反馈效率。请注意，它主要服务于预览和保存，复杂的后端逻辑或需要服务器端渲染的场景仍需结合其他工具完成。
核心特点
专为pi-coding-agent深度集成，实现AI生成HTML代码后的一键浏览器渲染与自动本地保存，无需手动操作文件或刷新页面。
注意事项
不适合需要复杂服务器端交互、数据库操作或非静态页面的全栈应用开发场景。
常见问题
如何安装并使用这个Skill？
在支持pi-coding-agent的环境中运行安装命令，之后在对话中提及渲染HTML即可触发。
保存的HTML文件在哪里？
文件会自动保存到运行环境的当前工作目录或指定的输出文件夹中。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/eliemessiecode-pi-render/raw/index.md 读取 @eliemessiecode/pi-render 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/eliemessiecode-pi-render/raw/index.md（查看排版版本）