SuperAPI AI 工具集

website-to-design-md

设计与创作

查看项目

更新于 10-16 03:14

技能介绍

用途:把在线网站转成可复用的 design.md 或 DESIGN.md 设计文档,并生成配套 HTML 预览页,作为设计板供快速查看配色、字体、间距、组件线索和原始 Markdown 源码。目标不是克隆网站,而是提取足以让其他智能体复现其设计语言、内容语气和交互手感的信息。

主要能力:检查页面范围与用途;桌面优先并兼顾平板、移动端;缓慢滚动全页以捕捉延迟动画、吸顶 UI 和渐进展开;提取渲染 HTML、关键节点 outerHTML、根 CSS 变量、可读样式表规则、代表组件计算样式与 CTA 文案;提取颜色与角色、明暗主题、字体层级、间距节奏与网格、圆角语言、边框、阴影与层次、图像与图标风格、动效风格;梳理导航、公告栏、Hero、按钮、卡片、徽章、表单、标签页、手风琴、表格、页脚等组件在默认、悬停、选中、聚焦、禁用、吸顶、展开以及明暗模式下的状态;记录滚动、悬停、点击和主题切换引起的变化;提取标题风格、CTA 措辞、句子密度、信任信号等品牌语气。

使用方式:始终优先使用 agent-browser,执行 agent-browser open、agent-browser wait,并以 agent-browser eval 作为主要提取手段;若不可用,先帮助安装或加入 PATH,并用 agent-browser --help 验证。默认输出 DESIGN.md,预览文件默认同名加 -preview.html;多个 URL 分别检查,仅在视觉语言一致时合成为一套设计系统。最终文档按 assets/DESIGN.template.md 组织,可选通过 scripts/render-design-preview.mjs 生成预览。

限制:不以截图作为默认证据来源,除非用户明确要求或 DOM 证据不足;不静默切换到 Playwright 或 Chrome CLI;不静默降级为静态 HTML 抓取;不凭猜测编造隐藏页面或不可见状态;推断项需明确标注;安装失败时说明缺失并停止。脚本与模板目录的具体内容资料未完整给出。