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，但也有列外，归属影响率
  • 如上大概若干个参数，根据某种适用的算法公式填入参数，经过大量数据练习后得出每个参数的合适值