# HTML Preview

> 使用 Markdown `html:preview` 围栏输出轻量静态 HTML/CSS 可视化。当普通 Markdown 难以清晰表达数值对比、层级关系、流程、时间线、关键指标或布局示意，或用户明确要求可视化 HTML 预览时使用。询问 HTML 源码、教程示例或可复制代码时不要使用。

- Skill: `gabrielmoreira/html-preview` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gabrielmoreira/html-preview`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gabrielmoreira/html-preview/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: gabrielmoreira (https://skillmd.com/u/gabrielmoreira)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/gabrielmoreira/html-preview

---


# HTML Preview

将 Markdown 作为回答主体。只有可视化能明显降低理解成本时，才补充一个
`html:preview` 静态组件；标题、列表、表格或代码块已经足够清楚时，继续使用普通 Markdown。

按以下顺序输出：

1. 先用普通 Markdown 写结论和必要解释。
2. 顶格写开始围栏 ```` ```html:preview ````。围栏最多只能有 3 个前导空格，否则前端会把它当作源码。
3. 在围栏内写自包含的静态 `<style>` 和语义化 HTML。
4. 顶格写结束围栏 ```` ``` ````。
5. 在围栏后用普通 Markdown 补充背景、风险、完整明细和来源。

## 内容边界

- 只输出静态 HTML/CSS，不编写 JavaScript，不使用表单、iframe、object 或 embed。
- 可以引用公开、稳定、无需登录的 HTTPS 图片或字体，但核心信息必须在外链失败时仍然可读。
- 不引用内网、临时地址、鉴权资源或包含用户凭证的链接。
- 不把组件当成完整网页或正文容器；不要制作导航栏、页脚、登录态、复杂按钮、营销页 Hero 或多屏页面。
- 不在组件中放长段叙事、完整报告、长表格或长列表。背景、推理、风险、明细和来源放在普通 Markdown 中。
- 用户询问 HTML 源码、教程示例或需要复制代码时，使用普通 `html` 代码块，不使用 `html:preview`。

## 布局约束

- 面向默认 `800px × 360px` 尺寸设计，并允许容器宽度变化；前端最高显示到 `700px`，超出后在预览内部滚动。
- 使用 `max-width: 100%`、`box-sizing: border-box`、弹性网格、换行和适度间距保持响应式。
- 不写死整体画布高度。核心信息应在默认尺寸内无需滚动即可读；放不下时减少内容。
- 最多展示 1 个短标题、3–5 个关键指标或一组简短对比。数据超过 6 项时，汇总为趋势、区间、异常点或 Top 3。
- 文字以短标签、数字、单位、状态词和极短备注为主；单条说明尽量不超过 20 个中文字符。
- 外层已经提供圆角、边框和裁切。不要再给最外层添加卡片壳、页面背景、大圆角、阴影、厚边框或额外外边距。
- 保持克制和可读，优先使用紧凑指标组、摘要表、对比条、状态标签、时间轴或简单关系图。

## 失败处理

如果内容无法在上述静态、安全和篇幅边界内表达，改用普通 Markdown，并明确说明限制。不要输出残缺围栏、不可访问资源或依赖脚本才能理解的预览。