稳定渲染器无 AI本地预览调试导出

CSS 阴影预览

CSS 阴影预览帮你在发布前把请求、URL、CSS 或颜色片段转成可检查的预览。

示例

CSS 阴影源码

阴影预览就绪

预览结果会显示在这里。

下一步可以继续

把当前预览结果带到相关工具里继续转换、排查或导出。

HTML 沙箱预览

在禁用脚本的沙箱中预览 HTML 组件、邮件片段和落地页区块。

打开

CSS 渐变预览

预览 CSS linear、radial、conic 和 repeating 渐变，并提取色标。

打开

Base64 图片预览

预览 Base64 图片字符串和 data URL，并分析 MIME 类型和体积。

打开

使用方法

1先加载示例，确认输入格式和预览结构。
2替换成自己的 cURL、URL、CSS 或颜色 token。
3检查解析结果、视觉输出、参数列表或对比度提示。
4把源码和截图一起放进文档、工单或 PR，方便团队复现。

常见场景

调试 AI 生成的请求命令、URL 参数和视觉 CSS 片段。为 README、博客、支持回复和 PR 描述生成可复现截图。在发布前发现明显的参数、阴影、颜色和可读性问题。

常见问题

这些工具会调用 AI 吗？

不会。P1 的这些预览工具默认在浏览器本地解析和渲染。

能替代真实运行环境吗？

不能。它们适合快速预览和调试，最终仍应以真实 API、浏览器和设计系统为准。

CSS 阴影预览是 DiagramPreview P1 预览工具集的一部分。

它面向 AI 生成之后、正式发布之前的检查环节，把文本片段变成可以审阅的结构和视觉输出。

适合配合 HTML、CSS、JSON、Base64、API 和配置预览工具一起使用。

Demo：预览多层 box-shadow

Box shadow 会影响深度和质感，预览能比较 card、button、modal、popover 的阴影。

先用一个小而完整的示例确认结构，再粘贴完整生产内容。
检查预览是否清楚展示 ownership、结构、标签和风险字段。
保留源码和导出结果，方便后续 reviewer 复现。

box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 12px 28px rgba(15,23,42,.14);