导出代码(HTML、React、Tailwind)

把单个页面或整个项目导出为可上线的前端代码。

最后更新

uxmagic.ai/dashboard/react-component-library
React 组件库,展示可以直接复制进代码库的组件。
The React component library, ready to copy into a codebase.

可以导出什么

  • 单个页面,导出为 HTML 或一个 React 组件。
  • 整个项目,导出为一个多页面的 React 项目,组装好并打包下载。

样式用的是 Tailwind CSS,你的项目主题会表达为设计令牌,所以代码里带着和画布上同一套体系。

导出单个页面

  1. 选中页面。
  2. 导出 → 代码。
  3. 选 HTML 或 React。
  4. 复制,或者下载。

导出整个项目

项目导出以后台任务运行 — 它会生成每一个页面,然后把它们组装成一个项目结构。项目越大耗时越久;你可以看着进度,完成后下载。

代码是什么样的

是真实、可读的前端代码:语义化标记、Tailwind 工具类、用于颜色和字体的主题令牌,以及通过网址引用你项目素材存储里的图片。

有两件事要提前规划:

  • 素材默认是远程的。 上线前把它们下载到你的仓库里,别让线上站点依赖 UXMagic 的素材网址。
  • 它是前端。 没有数据层、路由或状态管理 — 需要你自己接进应用里。

响应式

导出的代码对应你导出的那个页面,按那个页面的宽度。如果你生成过独立的移动端和桌面端变体,就两个都导出,在你的断点处合并。见响应式与设备变体。

直接进仓库

你可以不下载,直接把导出的代码推到 GitHub — 见GitHub 同步。

这篇文章有帮助吗?

相关文章

Read this in your language