PxCook 点击设计稿即可生成代码前端,高效智能的设计研发工具,智能标注软件。...
版权声明:本文为博主原创文章,未经博主允许不得转载。
目录(?)[+]
PxCook 像素大厨
设计师一键拖拽上传后,可智能标注。然后程序员点击pxcp即可生成css xml swift objective-c还有NativeReact的代码了。支持画板解析、项目
字多不看的话
(走心要听:
这次3.0版本相比于之前更加高效,易用。支持 Win & Mac ,并且是支持PS和Sketch全平台。
拖拽即用和一键流的理念我想都明白它易用性的含义。不但体现在设计稿导入上,智能标注和生成代码也是一样。
开发模式 : 直接生成前端代码
PxCook3.0可以通过的顶部tab切换角色——设计和开发两个角色。
点击顶部的tab按钮能切换到程序猿模式
在这一模式下,CSS XML Objective-C Swift ReactNative 等前端代码可以点击直接生成。包括多种开发语言下的尺寸文字、阴影渐变等所有元素。
CSS 支持点击生成
XML 点击生成
OC 点击生成
Swift,Yes
ReactNative,生成支持
直接生成代码至少每周为团队节省数小时甚至更多的工作时间。
对项目的支持
什么是项目?
项目是个方便设计管理标注的杂货箱,某个psd/sketch中的某一个画板,某个没有画板的单独psd/sketch,某个老的pxc格式文件或某个和文件没有关联的单独标注png……这些文件类型不同,但是可能和某个界面或某个功能、版本相关,这些都可以整理到一个项目内。
项目列表展示
智能标注
流畅的智能标注是2016年上线以来口碑最好的功能,他的易用性体现在对于设计师的交互简单
这回的大版本保留了智能标注,并增加了画板的支持。
画板支持
小解释画板是个什么。PS自2015起推出了画板功能,可以说是ui设计师最常用的分类/汇总功能(Sketch一直支持)。同时也是我们2个种子用户群呼声最高的。
上图是Ps和Sketch的画板
(而以下,PxCook3.0已经支持导入和分别显示画板了。
PS拖入:直接将psd拖拽进来即可,记得要勾选要导入哪些画板。
Sketch导入:通过插件快速上传
角色切换 — 设计师模式
设计模式下可以标注。无论是交互友好的智能标注还是手动加距离/文字/坐标都是可以的。
它主要包括:
- 元素间的尺寸可以拖动直接生成
- 元素内间距也能一键生成
- 字体信息标注(字号字体颜色是否加粗等)一键流
- ……
设计师想要的,PxCook基本都想了, 毕竟用户反馈收集是一直在做的。
一些使用说明
首先,智能标注隶属于那个像灯泡的按钮,在点击图层元素后,子图标才会置为可点击状态。包括宽高、文字信息等。内间距则需要按住ctrl依次点中两个图层元素后再点。
切图在顶部。
字体单位的显示选择在设计页和项目页顶部,#Hex和ARGB等。
PxCook 3.0 获取途径:
前往官网下载:
http://www.fancynode.com.cn/pxcook
Sketch上传插件 获取途径:
前往官网:
http://www.fancynode.com.cn/flavor
其实这个插件也是个大杀器,对效率提升也非常之大叫作Flavor [Flavor - Sketch插件味增,给你的设计加点料]
问题反馈与联系
任何问题反馈欢迎来提
官方微博:@Fancynode
qq用户群:555201284
转载于:https://blog.51cto.com/9095332/1963449
PxCook 点击设计稿即可生成代码前端,高效智能的设计研发工具,智能标注软件。...相关推荐
- Deco 智能代码体验版正式上线啦,快来体验设计稿一键生成代码~
Deco 是什么?- Deco 智能代码项目是我们团队在「前端智能化」方向上的探索,其聚焦设计稿一键生成多端代码这一切入点,实现将 Sketch/Photoshop 等设计稿进行解析并直接生成多端代码 ...
- 京东Deco 智能代码体验版正式上线啦,快来体验设计稿一键生成代码~
点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 Deco 是什么? - Deco 智能代码项目是我们团队在「前端智能化」方向上的探索,其聚焦设计稿一键生成多端代码这一切入点,实现将 Sk ...
- 设计稿自动生成可用页面的展望
这篇文章只打算描述我加入支付宝之后,在设计稿生成代码这个方向上自己做的尝试和看到的团队中的尝试.不谈行业历史,不争论方向.文章以现状的形成和我的想法演进为主脉络,文末会提到我所看到的新契机.所以读者如 ...
- 新一代纯前端控件集 WijmoJS 2018V2发布,提供 Web 设计器,可动态设计页面并生成代码...
概述 作为一款纯前端控件集,WijmoJS 秉承"快如闪电,触控优先"的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进.除在全球率先支持 An ...
- GPT-4 手画设计稿 直接生成前端页面
1.演讲者直接手画了一个设计稿 2.输入指令:用html/js把这个原型稿变成彩色网站,填充 2 条真实的笑话 3. 网站代码自动生成 不少所谓的大V在朋友圈噱头喊着前端要失业XX,其实本质上对事物的 ...
- [附下载]功能最强、高效易用的AI自动标注软件免费用了,兼容LabelImg格式xml,支持各种yolo、ssd、rcnn已训练模型以及OCR、形状匹配、轮廓匹配等各种定位方式来自动生成标注文件
你将收获 掌握自动标注软件在Windows下系统配置方法 掌握利用灵活搜索来自动生成标注文件的方法 掌握利用训练好的网络模型来自动生成标注文件的方法 掌握利用OCR文字识别来自动生成标注文件的方法 适 ...
- 研发提效:通过设计稿自动生成前端代码
今天抱着听不懂来见识的心态参加了全球架构师峰会,没想到还是大部分内容还是听得懂的.高手们都是可以用简单的话语讲透复杂的事情. 一天下来听了8位大佬分享,收获很多,今天就给大家分享其中一个(其他的写篇文 ...
- idea 2021版本不重新启动项目,点击刷新按钮即可刷新代码
idea 2021.3版本怎么可以项目利用debug启动,修改代码后,不重新启动项目,直接点击刷新按钮,就可以实现项目的刷新. 步骤: ①:点击下面 ②搜索update,选择Update classe ...
- ui设计稿psd文件,前端怎么抠图,怎么高度还原ui稿-- pxcook像素大厨,
百度搜索像素大厨, https://www.fancynode.com.cn/ 下载一个像素大厨, 并把项目的psd文件拖入pxcook, 如图: 抠图用的是photoshop,photoshop需装 ...
- [CodeX] 输入文本即可生成代码
★★★ 本文源自AI Studio社区精品项目,[点击此处]查看更多精品内容 >>> 请点击此处查看本环境基本用法. Please click here for more detai ...
最新文章
- 微信小程序插件功能页开发详细流程
- CIO和CTO到底有什么不同?
- MySQL第3天:MySQL的架构介绍之linux版安装
- asm和file system之间数据文件的转换
- Learning Modern 3D Graphics Programming笔记
- Charles4.1最新版破解
- con 元器件符号_altium designer常用元件电气符号和封装形式
- 如何从零配置腾讯云cdn加速服务?
- Intellij IDEA 插件下载慢或无法查询
- signature=32d532a97f37c02b1149992578cf4af9,~(11)C-CFT PET功能显像Parkin基因缺陷少年型帕金森病患者脑多巴胺转运体...
- 解决双屏切换为单屏,打开的软件窗口无法显示问题
- java inputstream read_Java学习之输入输出流
- [转载]JS和AS交互 作者:ludanlove
- 推荐一个开源低代码开发平台 Corteza
- 思科互联网络综合应用课程实验
- python 二维坐标多边形 计算多边形中心点,以及距该中心点最远的距离
- innoDB可重复读级别是否可以隔离幻行读
- 【数据分析报告】中国上海电动汽车行驶和充电行为分析
- 台湾新代数控系统数据采集CNC系列
- 第三次自考总结——时间管理和学习知识
热门文章
- Moldflow 2018模流分析从入门到精通pdf txt mobi读书笔记
- 《阿米巴经营》第一章读后感1200字
- 计算机主板南桥的作用,电脑主板上的南北桥芯片的位置和作用介绍
- am335x LCD调节背光
- 0成本开发一个外卖返利领劵小程序|外卖返利系统
- js 分析——百度模拟登录(一)
- 2020年浙江大学金融考研经验分享
- Android 实现远程控制(类似QQ的远程协助)
- C++类的声明和类的实现分开写(.hpp和.cpp)
- n1怎么进入线刷模式_中国移动N1 M821线刷刷机教程_移动M821线刷包_救砖包