sketch2code

布局问题,机器学习 * 识别文档流是absolute/relative/fixed * 绝对定位时识别x/y/z * 识别盒模型,margin/padding/border/w/h/min-w/min-h * 识别float和块级 * 识别overflow和滚动 * 识别块级的flex * 识别行内元素,单行/多行,影响文字换行或隐藏,影响文档沿主轴扩展 * 识别列表,列表的排列方式和class规律,如单双行 * 识别dom层级和成组,将原先杂乱的图层变为规律的dom * 将上述所有关联组成神经网络决策,可能不同的类型组成一种,最后多种神经网络合并 * 合并拼图(类似sprite),机器学习 * 组内元素未必按图层顺序依次排列,根据x/y识别临近以及可合并还是被分开 * z轴则是按图层顺序排列,分析遮挡判断是否同组 * 组与组之间递归判断 * 重复可利用的图像拆分和重组 * 将上述所有关联组成神经网络决策 * 导出图层,纯技术问题。node只能读取.sketch的json,无法还原图层图像本身;sketch插件可调用软件api导出部分图层图像,但只能本地运行。

Usage no npm install needed!

<script type="module">
  import sketch2code from 'https://cdn.skypack.dev/sketch2code';
</script>

README

yellow-diamond

前提,隐藏文字后输出css+image,然后补充文字

  • 布局问题,机器学习
    • 识别文档流是absolute/relative/fixed
    • 绝对定位时识别x/y/z
    • 识别盒模型,margin/padding/border/w/h/min-w/min-h
    • 识别float和块级
    • 识别overflow和滚动
    • 识别块级的flex
    • 识别行内元素,单行/多行,影响文字换行或隐藏,影响文档沿主轴扩展
    • 识别列表,列表的排列方式和class规律,如单双行
    • 识别dom层级和成组,将原先杂乱的图层变为规律的dom
    • 将上述所有关联组成神经网络决策,可能不同的类型组成一种,最后多种神经网络合并
  • 合并拼图(类似sprite),机器学习
    • 组内元素未必按图层顺序依次排列,根据x/y识别临近以及可合并还是被分开
    • z轴则是按图层顺序排列,分析遮挡判断是否同组
    • 组与组之间递归判断
    • 重复可利用的图像拆分和重组
    • 将上述所有关联组成神经网络决策
  • 导出图层,纯技术问题。node只能读取.sketch的json,无法还原图层图像本身;sketch插件可调用软件api导出部分图层图像,但只能本地运行。

例:识别绝对定位

  • 其他图层排列比较规律,从上到下,此图层比较突兀,突兀率多少
  • 其他图层按文档流毗邻,此图层单独提出和别的覆盖冲突,冲突率多少
  • 如上大概若干个参数,根据某种适用的算法公式填入参数,经过大量数据练习后得出每个参数的合适值

例:识别dom层级和成组

  • dom按照方块排列,画在同一组内的更可能属于同一dom内,但也有列外,同组影响率
  • 每个元素是个小方块,然后自底向上合并,dom下的子dom在同一个大方块内,同属于一个大方块的更可能是同一dom的child,但也有列外,归属影响率
  • 如上大概若干个参数,根据某种适用的算法公式填入参数,经过大量数据练习后得出每个参数的合适值