sketch2code

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