prototype-html SKILL.md skillB
prototype-html from mingdui/ai-product-skills is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add mingdui/ai-product-skills/prototype-html@git:20261013.60e8978Pins git:20261013.60e8978 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- B, 16 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- mingdui/ai-product-skills
- Path
skills/prototype-html/SKILL.md- Versions recorded
- 1
- Latest version
- git:20261013.60e8978, committed Oct 13, 2026
- Size
- 4,028 bytes
- Repository stars
- 12
- License
- a license file GitHub does not identify
生成交互式HTML产品原型的专家技能。当用户需要创建产品原型、UI界面原型、 可交互的HTML演示页面、产品功能展示页面，或提到"原型"、"prototype"、 "产品界面"、"UI原型"、"交互原型"、"演示页面"等时使用。.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# 交互式HTML产品原型生成 根据产品需求，生成完整的、可直接运行的单文件HTML产品原型。 ## 核心工作流程 1. **理解需求** - 明确用户需要展示的产品功能和界面元素 2. **设计布局** - 规划左侧界面元素与右侧说明文档的对应关系 3. **编写代码** - 生成符合所有技术规范的完整HTML文件 4. **验证检查** - 确保所有连线正确、交互完整、响应式正常 ## 布局规范（严格执行） ### 整体结构 - **左右分栏布局** - 左侧：占页面宽度的80%-85%，展示产品主体界面内容 - 右侧：占页面宽度的15%-20%，展示对应功能的详细说明文档 - **分隔线**：左右两栏之间有清晰的垂直分隔线 - **滚动同步**：左右两栏各自独立滚动，互不影响 ### 连线功能（必须严格执行） 使用SVG技术绘制连线，确保连线清晰可见且不遮挡内容。 **连线规则：** - 选择左侧界面中2-4个重要元素增加连线指向右侧对应的功能说明 - 连线的**起始点**必须精确连接到左侧元素的右侧边缘中点 - 连线的**结束点**必须精确连接到右侧对应说明文字的左侧边缘中点 - 连线采用平滑的贝塞尔曲线，避免生硬的直角转弯 - 连线线条粗细为 2px **交互效果：** - 当鼠标悬停在左侧元素上时，对应的连线加粗并高亮显示 - 当鼠标悬停在右侧说明文字上时，对应的连线和左侧元素也会高亮显示 **连线标注：** - 每条连线旁边添加小的数字编号，与右侧说明的编号对应 ## 响应式设计规范 ### PC端 - 保持上述左右分栏布局 ### 手机端 - 自动切换为上下布局 - 上方展示产品主体界面，下方展示功能说明 - 连线功能自动隐藏 - 在每个元素下方直接显示简短说明 - 提供"切换视图"按钮，允许用户在"仅界面"和"界面+说明"之间切换 ## 技术栈要求 1. **纯前端实现**：使用纯HTML、CSS和原生JavaScript，不依赖任何外部框架 2. **样式**：使用Tailwind CSS v3，通过CDN引入 3. **图标**：使用Font Awesome图标库，通过CDN引入 4. **代码结构**： - HTML结构语义化，使用适当的标签 - CSS样式内联在`<style>`标签中 - JavaScript代码内联在`<script>`标签中 - 所有代码整合在一个HTML文件中，无需外部资源 ## 样式与视觉规范 ### 配色方案 - 如果用户指定了色系则用用户指定的色系，否则用下面默认的色系 - **主色调**：蓝色 `#165DFF` - **辅助色**：浅灰色 `#F5F7FA`、深灰色 `#333333` …
Read the whole file at its exact version.
How to install
mdr add mingdui/ai-product-skills/prototype-html@sha256:ee752a2f5ae5353fThe line at the top of this page pins the label git:20261013.60e8978, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_xlpganyw26ydpyus)
0 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 1 version of this file, committed on Oct 13, 2026.
Audit of the latest version
- fail: No script tag (matched: <script)
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (4028 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
Starting a new one? Use a template for SKILL.md on mdpantry, which passes every one of these checks and says what to change in it.
Source
mingdui/ai-product-skills · 12 stars · license a license file GitHub does not identify · pushed 2026-11-05 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_xlpganyw26ydpyus GET https://markdownregistry.com/api/v1/resolve?ref=mingdui/ai-product-skills/prototype-html GET https://markdownregistry.com/api/v1/blob/ee752a2f5ae5353f6335a3d1bfa035fb52144962c17895f829db8b1643c38d9f
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.