HTML 页面
自动结构解析
转成可标注设计稿
MarkupFlow
Desktop software for annotated design delivery
把 HTML 与 Figma 一键转成可标注、可服务的设计稿。
面向桌面软件团队的设计交付工作台。把 HTML 页面、Figma 设计稿与标注设计稿统一到一个可追溯的产物里，并通过 MCP 对外提供结构化设计数据。
HTML 输入 · Figma 输入 · 标注输出 · MCP 数据服务
Live product flow
Figma 稿件
统一图层与组件
输出标注设计稿
设计标注
结构化数据整理
通过 MCP 对外服务
TRANSFORM
ANNOTATE · SERVE
Annotated Design Output
输出可交付、可协作、可编排的标注设计稿，让设计资产既能给人看，也能给系统读。
Spec + Layers + Annotation
页面结构、组件层级、尺寸标注、命名语义与交互说明，被统一为一个可共享的设计资产。
Layer Mapping
Measurement Notes
MCP Ready
Capabilities
一个桌面软件，完成三类设计资产转换。
从已有页面、设计稿到结构化标注资产，再把标注资产变成对开发工具友好的 MCP 数据接口。
INPUT 01
HTML 转标注设计稿
解析页面结构、组件层级和主要视觉区域，生成可交付、可复查的标注设计稿。
INPUT 02
Figma 转标注设计稿
统一图层命名、组件映射与尺寸说明，把视觉稿整理成更适合团队交付和协作的标注产物。
OUTPUT 03
标注设计稿提供 MCP 数据服务
把标注设计稿中的页面结构、组件信息、尺寸标注与语义说明，通过 MCP 方式提供给开发与自动化工具。
MCP Data Service
标注设计稿不只是交付物，它还是一个可查询的数据源。
通过 MCP，把页面结构、组件映射、尺寸说明与语义标注供给给开发工具、自动化脚本和设计校验流程。
适合桌面端研发、设计校对、交付验收与自动生成场景。
Service payload examples
Page Structure
sections · slots · layout hierarchy · screen regions
Component Map
component ids · variants · reusable blocks · states
Measurement Notes
sizes · spacing · alignment · annotation notes
Interaction Semantics
events · behavior notes · delivery hints · developer hooks