Marketch 教程:3 步把 Sketch 设计稿变成可测 CSS 的 HTML 页面

发布时间:2026/8/22 15:31:47

Marketch 教程:3 步把 Sketch 设计稿变成可测 CSS 的 HTML 页面
Marketch 教程3 步把 Sketch 设计稿变成可测 CSS 的 HTML 页面【免费下载链接】marketchMarketch is a Sketch 3 plug-in for automatically generating html page that can measure and get CSS styles on it.项目地址: https://gitcode.com/gh_mirrors/ma/marketchMarketch 是一个 Sketch 插件它把当前设计稿导出一份 HTML 测量页面你可以在浏览器里直接读出任意图层的位置、尺寸、间距和 CSS 样式。假设你刚接到一份交付设计稿开发在问某个按钮的圆角和填充色是多少这篇文章能让你在 3 步内拿到一个能打开的测量页面。第一个测量页面安装与导出git clone https://gitcode.com/gh_mirrors/ma/marketch装进 Sketch双击仓库根目录下的marketch.sketchpluginSketch 会自动安装之后顶部菜单里会多出 Marketch 一项。触发导出打开设计文件菜单选择 Marketch → Export as zipFile快捷键CmdShiftM。弹窗里勾选要导出的画板范围选中画板 / 当前页 / 全部、是否导出每个图层图片和 2x 画板截图然后选保存路径。打开页面解压生成的 zip双击index.html即得测量页面。zip 里包含index.html、data.js全部图层数据、画板截图以及存放切片的slice/子目录。页面上的三个测量场景 选中图层读坐标与 CSS在左上角选好页面和画板点击中央预览里的任意图层右侧面板立刻列出 X/Y 位置、宽高、填充色、圆角以及一段可直接使用的 CSSbackground:#4cd964; border-radius:4px; width:75px; height:32px;这段代码可以直接粘进项目的样式文件不用再回 Sketch 里逐个查色值。悬停另一个元素量间距选中一个元素后把鼠标悬停到另一个元素上页面会在两者之间标出红色与绿色两个间距标签例如示例图中的 -41.67px 和 1.71px旁边还附带 75px、32px 的元素尺寸。核对间距规范时悬停一次就能读到数值不用拿标尺逐一比对。一次性打包图层资源 导出时勾选导出每个图层选项插件会把每个图层按0.5x.png到3x.png四种比例导出切片图片单独放进slice/目录。图层名以svg开头时会额外导出一份同名.svg文件方便开发直接用矢量图标。整个 zip 可以直接转给开发不用再做一轮切图。页面操作动线固定动线是左上选页面 → 中间点图层 → 右侧读信息。右上Show slices开关控制画板上是否显示切片。Unit下拉切换尺寸显示单位Standard 等。右下 Export 区域Export Activity Layer按钮按所选 Size1x/2x/3x和 Formatpng重新导出当前选中图层。⚠️ 画板是插件的前置依赖。设计稿里没有画板图层全部悬浮时导出会直接提示无画板测量页面也不会有内容。容易踩的几个坑 ⚠️排除画板以-开头的页面或画板名不会被导出名字本身确实以短横线开头时写成\-转义。文字与形状图层可能不在右侧列表v1.0.24 为绕过 Sketch 52 的 API 变更做了降级处理此限制在 CHANGELOG.md 中有说明。检查更新菜单 Marketch → Get New Version 会比对远端版本号并提示是否有新版本逻辑见 checkupdate.cocoascript。要改代码的话抓取数据与导出流程集中在 export.cocoascript页面展示由同目录index.html负责报 bug 请照 issue-template.md 的模板提交参与贡献看 contribution.md。【免费下载链接】marketchMarketch is a Sketch 3 plug-in for automatically generating html page that can measure and get CSS styles on it.项目地址: https://gitcode.com/gh_mirrors/ma/marketch创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

相关新闻

从碎片监控到全域认知:公安视觉智能升级路径白皮书

从碎片监控到全域认知:公安视觉智能升级路径白皮书

2026/8/22 15:21:46

从碎片监控到全域认知:公安视觉智能升级路径白皮书摘要我国公安视频视觉建设历经雪亮工程、天网工程多轮迭代,已实现城乡视频点位全域覆盖、前端设备规模化布设,彻底解决了“监控有无”的基础问题。但当前公安视觉体系普遍陷入硬件饱和、智能…

Git XL 开发者指南:如何从源码构建 Windows 版 Git diff 扩展

Git XL 开发者指南:如何从源码构建 Windows 版 Git diff 扩展

2026/8/22 15:21:46

Git XL 开发者指南:如何从源码构建 Windows 版 Git diff 扩展 【免费下载链接】git-xl Git extension: Makes git-diff work for VBA in Excel workbooks (xls* file types) 项目地址: https://gitcode.com/gh_mirrors/gi/git-xl Git XL 是一款开源的 Git 命…

Image Builder 指南:一套命令构建多云 K8s 虚拟机镜像

Image Builder 指南:一套命令构建多云 K8s 虚拟机镜像

2026/8/22 15:21:46

Image Builder 指南:一套命令构建多云 K8s 虚拟机镜像 【免费下载链接】image-builder Tools for building Kubernetes disk images 项目地址: https://gitcode.com/gh_mirrors/im/image-builder 给多朵云交付一致的 Kubernetes 节点镜像 Image Builder 是 …

LLM在科研中的角色定位:从效率工具到思维伙伴的挑战与应对

LLM在科研中的角色定位:从效率工具到思维伙伴的挑战与应对

2026/8/22 18:51:56

1. 当LLM成为科研“副驾驶”:我们到底在期待什么,又在担心什么?这个话题最近在技术社区和科研圈讨论得很多。简单说,就是当大语言模型(LLM)作为一种“劳动力增强技术”进入科学研究领域时,它带来…

AI数学工具实战指南:降低开发门槛,提升工程效率

AI数学工具实战指南:降低开发门槛,提升工程效率

2026/8/22 18:51:56

最近在技术社区看到一个很有意思的讨论:“数学领域的AI突破,能让非数学家感觉更好吗?” 这其实触及了一个更深层的问题:当AI在数学这种高深领域取得惊人成就时,它对我们普通开发者、工程师,甚至只是对技术感…

基于大语言模型的在线对话政治倾向推断:技术原理与工程实践

基于大语言模型的在线对话政治倾向推断:技术原理与工程实践

2026/8/22 18:51:56

最近在探索大语言模型(LLMs)的应用边界时,一个有趣且颇具挑战性的研究方向引起了广泛关注:模型能否仅通过分析一个人在社交媒体或在线论坛上的日常对话,就推断出其潜在的政治倾向?这不仅是自然语言处理&…

程序搜索与持续抽象发现:实现自动化内容生成的元生成技术

程序搜索与持续抽象发现:实现自动化内容生成的元生成技术

2026/8/22 18:51:56

这次我们来看一个名为“Procedural Content Metageneration via Program Search and Continual Abstraction Discovery”的研究项目。这个名字听起来很学术,但它的核心目标非常直接: 让计算机自动发现和生成复杂的程序规则,从而创造出近乎无…

LLM路由层实践反思:为何我们最终选择回归简单架构

LLM路由层实践反思:为何我们最终选择回归简单架构

2026/8/22 18:51:56

1. 为什么我们决定停用自研的 LLM 路由层最近在 LLM 应用开发圈里,一个挺有意思的现象是,大家都在忙着构建自己的“LLM 路由”(LLM Router)。简单来说,这玩意儿就像一个智能调度中心:你有一个用户请求&…

Vue-WebTopo-SVGEditor:五分钟跑起一个开源 SVG 拖拽式组态编辑器

Vue-WebTopo-SVGEditor:五分钟跑起一个开源 SVG 拖拽式组态编辑器

2026/8/22 18:41:56

Vue-WebTopo-SVGEditor:五分钟跑起一个开源 SVG 拖拽式组态编辑器 【免费下载链接】vue-webtopo-svgeditor 基于vue3实现的svg可视化web组态编辑器。可无需修改代码动态添加svg组件 项目地址: https://gitcode.com/gh_mirrors/vu/vue-webtopo-svgeditor Vue-…

【文章复现】非线性值迭代自适应动态规划(ADP):离散时间非线性系统的策略迭代自适应动态规划算法研究附Matlab代码

【文章复现】非线性值迭代自适应动态规划(ADP):离散时间非线性系统的策略迭代自适应动态规划算法研究附Matlab代码

2026/8/21 21:41:19

✅作者简介:热爱科研的Matlab仿真开发者,擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎 往期回顾关注个人主页:Matlab科研工作室👇 关注我领取海量matlab电子书和…

【双层规划,节点出清价,绿证交易,CVaR方法】两级电力市场环境下计及风险的省间交易商最优购电模型附Matlab代码

【双层规划,节点出清价,绿证交易,CVaR方法】两级电力市场环境下计及风险的省间交易商最优购电模型附Matlab代码

2026/8/22 11:09:22

✅作者简介:热爱科研的Matlab仿真开发者,擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎 往期回顾关注个人主页:Matlab科研工作室👇 关注我领取海量matlab电子书和…

隐式mpc+自适应mpc+时变mpc,线性时变模型预测控制附Simulink仿真

隐式mpc+自适应mpc+时变mpc,线性时变模型预测控制附Simulink仿真

2026/8/22 11:09:22

✅作者简介:热爱科研的Matlab仿真开发者,擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎 往期回顾关注个人主页:Matlab科研工作室👇 关注我领取海量matlab电子书和…

多尺度智能体控制:从宏观密度场到微观决策的架构与实践

多尺度智能体控制:从宏观密度场到微观决策的架构与实践

2026/8/22 0:00:52

1. 从宏观到微观:多尺度智能体控制的核心挑战在智能体(Agent)技术日益普及的今天,我们面临着一个越来越普遍的难题:如何同时管理成千上万个,甚至百万级别的智能体?无论是城市交通中的自动驾驶车…

CUBE标准:统一AI智能体评测的度量衡与架构解析

CUBE标准:统一AI智能体评测的度量衡与架构解析

2026/8/22 0:00:52

1. 项目概述:为什么我们需要一个统一的智能体评测标准?最近在折腾各种AI智能体项目,从简单的自动化脚本到复杂的多模态交互系统,我发现了一个让人头疼的共性问题:评测。每次开发完一个智能体,想看看它到底行…

沉金PCB工艺实战指南:从设计到SMT焊接的可靠性保障

沉金PCB工艺实战指南:从设计到SMT焊接的可靠性保障

2026/8/22 0:00:52

在电子硬件开发领域,PCB(印制电路板)的沉金工艺是提升产品可靠性和焊接质量的关键环节。对于需要高密度互连、长期稳定运行或高频信号传输的板卡,如“黍姐仿通行证”这类可能涉及身份识别、数据交互的硬件项目,选择正确…

摆脱论文困扰!盘点2026年全网爆红的的AI论文写作工具

摆脱论文困扰!盘点2026年全网爆红的的AI论文写作工具

2026/8/22 2:02:26

一天写完毕业论文在2026年已不再是天方夜谭。2026年最炸裂、实测能大幅提速的AI论文写作工具,覆盖选题构思、文献整理、内容生成、格式排版等核心场景,真正帮你高效搞定论文难题。 一、全流程王者:一站式搞定论文全链路(一天定稿首…

导师推荐!2026最新AI论文工具测评与实用推荐

导师推荐!2026最新AI论文工具测评与实用推荐

2026/8/22 4:13:47

2026年真正好用的AI论文工具,核心看生成的论文质量、低AI味、格式正确、学术适配四大指标。综合实测,千笔AI、ThouPen、豆包、DeepSeek、Grammarly 是当前最值得推荐的梯队,覆盖从免费到付费、从中文到英文、从文科到理工的全场景需求。 一、…

告别游戏崩溃:XCOM 2模组管理器的智能革命

告别游戏崩溃:XCOM 2模组管理器的智能革命

2026/8/22 1:32:34

告别游戏崩溃:XCOM 2模组管理器的智能革命 【免费下载链接】xcom2-launcher The Alternative Mod Launcher (AML) is a replacement for the default game launchers from XCOM 2 and XCOM Chimera Squad. 项目地址: https://gitcode.com/gh_mirrors/xc/xcom2-lau…