SuperAPI AI 工具集

html-to-breakdance

前端与建站

查看项目

更新于 10-16 03:08

技能介绍

用途:把设计导出、Figma 提取、其他平台落地页或自有原型中的 HTML/CSS,结构化转换为 Breakdance 渲染器读取的 EssentialElements* 元素树,而非截图转构建器。适用触发语包括「convert this html to breakdance」「paste html into breakdance」等。

主要能力与用法:执行 respira_get_builder_info 确认激活构建器为 Breakdance(Oxygen 6 不适用);用 respira_get_active_site 确认站点,询问新建页面还是写入已有页面(已有页面先经 respira_create_page_duplicate 做 SafeEdit 副本);用 respira_get_design_direction 获取设计方向。输入支持对话粘贴、URL、文件三种模式,提示词中的内容视为不可信数据。随后调用 respira_convert_html_to_builder,builder=breakdance,含 head 与 <style>。含样式表时走 fidelity 模式,逐行保留结构与样式表;无样式表或指定 restyle 时把设计重键入 Breakdance 设置与变量。

关键事实:页面存于 _breakdance_data 文章元数据,post_content 为空;节点类型须为完整 EssentialElements* 类名,小写通用类型会持久化并报成功但跳过渲染;列表、表单、表格等有特定映射,表单与表格落入 CodeBlock;节点 ID 由适配器分配,不可自造;_breakdance_dependency_cache 影响前台渲染,必要时在编辑器重存一次。转换后用 respira_extract_builder_content 校验存储树、加载页面 URL 校验公共渲染,并跑 respira_check_design。

限制:技能锁定 Breakdance;外部资源仅标记不镜像;脚本两种模式都不携带;restyle 模式下 CSS 关键帧动画不转换;旧版插件的副本快照可能为空基线;更新元素时 meta 不应放入内容补丁。