SuperAPI AI 工具集

site-teardown

前端与建站

查看项目

更新于 10-16 09:50

技能介绍

用途:把目标网站逆向拆解成可执行的搭建蓝图,覆盖技术栈、视觉特效实现方式、完整设计系统以及逐节构建计划,目标是让使用者不看原站也能复刻。触发场景包括分析某站如何搭建、逆向或解构页面、克隆其设计与动画、了解所用技术栈或库,以及弄清某个具体特效的实现。也可用 /site-teardown 或 /site-teardown [URL] 触发。

主要流程:第一步获取HTML,用户直接粘贴源码最完整,否则用WebFetch抓取并保留类名、元素层级、资源路径、SVG、meta与内联脚本样式;第二步从HTML定位主JS与CSS文件,跳过统计、Cookie、验证码与CDN第三方脚本;第三步抓取主JS,按HTML中的关键类名动态补充提示词,提取滚动、鼠标、点击、时间线、视差、加载动画等实现代码;第四步抓取主CSS,提取颜色、字体、关键帧、变量、断点、布局与遮罩等设计系统信息;第五步合并为Markdown,默认存到 research/YYYY-MM-DD-{site-slug}-teardown.md,无该目录则存当前目录。

输出模板:包含技术栈证据表、颜色与字体、间距与响应式策略、效果清单(实现方式与可克隆性)、重点特效实现细节、所需素材、推荐技术栈与 npm install 命令、逐节构建顺序和注意事项。

要求与限制:优先使用用户粘贴的HTML,因WebFetch可能摘要细节;区分“源码确认”与“推断”;特效说明要具体到配置参数;素材建议给出数量、类型与来源方向;注意高级插件、授权与性能问题。该技能本身不提供实际站点数据,效果受目标站反爬、代码混淆与动态渲染影响;资料未提供收费、平台支持与具体命令用法等信息。