Swift Web Studio 应用图标Swift Web Studio 应用图标

Swift Web Studio

在浏览器中设计 SwiftUI,保留 Swift 代码。

可视化编辑、Swift 代码编辑器与交互式设备预览,汇聚于同一个工作区。从模板或你自己的 Swift 文件开始,打磨设计,再导出项目进行原生开发。

Swift Web Studio

大多数设计工具画的是应用的图片。Swift Web Studio 编辑的是应用本身:画布上的每一处改动,都是对 Swift 源代码的改动,所以交付的就是代码。

看看亮点。

  • 用 Swift 来设计。在画布上编辑文本、颜色、间距、布局和交互,Swift 源代码随之同步更改。

    Swift Web Studio
  • 可复用的设计。组件支持输入参数和已保存的变体,还有共享的颜色、间距和文本样式。

    Swift Web Studio
  • 真实内容。编辑集合记录及其共享的行设计;尝试各种预览场景,而不改动应用数据。

    Swift Web Studio
  • 审阅与演示。对比不同设备、外观和文字大小,并检查对比度、触控目标和内容溢出。

    Swift Web Studio
  • 深入代码。Swift 编辑器支持诊断、代码补全、符号导航和重命名。

    Swift Web Studio
  • 顺利交付。导出 Xcode 项目、Swift Playgrounds 应用、Swift 包或 XcodeGen 规范。

    Swift Web Studio

一款懂 Swift 的设计工具。

  • 保留源代码的编辑。可视化改动直接作用于底层 Swift 代码;画布无法编辑的部分,依然可以在代码中编辑。

  • 组件。实例输入参数、已保存的变体,以及共享的颜色、间距和文本样式。

  • 集合。使用共享行设计的记录,以及用于试验内容的预览场景。

  • 设备预览。交互式预览,涵盖不同设备尺寸、外观和文字大小。

  • 检查。标记潜在的对比度、触控目标和内容溢出问题。

  • 演示。展示屏幕,或导出 PNG 图片和缩略图总览页。

  • 共享撤销。整理屏幕和图层,撤销与重做在两者之间通用。

  • 图像。导入 PNG 和 JPEG,并可选配深色模式变体。

  • 自动保存与归档。项目自动保存在浏览器中;随时可下载可编辑的归档文件。

深入内部。

编译器、解释器和布局包独立于 React 和 DOM。预览在 Web Worker 中运行。

编辑器
apps/webNext.js 工作区、编辑器、对话框和 Worker 宿主
语言
swift-syntax词法分析器、语法分析器、语法树和源代码编辑
swift-sema名称解析、语义分析和设计编辑
运行时
swift-runtimeSwift 解释器
swiftui-runtimeSwiftUI 状态、视图组合与交互
渲染
swiftui-layout布局与文本测量
swiftui-render-dom渲染树呈现
项目
project-model项目、文件、模板、持久化与分享
exporter项目脚手架,以及 ZIP 导入与导出
shared · sim-shell共享类型与设备规格

预览解释的是 Swift 和 SwiftUI 中受支持的一个子集。它不运行 Apple 的编译器,也不运行 iOS Simulator,因此导出的应用需在 Xcode 中构建并审查后再发布。

六种导出方式。

每种格式都完整保留 Swift 源代码。

  • Xcode 项目

    可直接打开的项目,用于原生开发。

  • Swift Playgrounds 应用

    在 iPad 或 Mac 上打开并运行。

  • Swift 包

    将视图直接放入现有应用。

  • XcodeGen 规范

    根据规范文件生成项目。

  • 可编辑归档

    便携的 .swiftstudio.zip 文件,包含源代码、图像、设置和设计元数据。

  • 分享链接

    不含图像的项目,可直接通过 URL 本身分享。

技术规格

技术栈
TypeScript;Next.js 工作区,包含相互独立的语言、运行时和布局包
预览
运行在 Web Worker 中的 Swift 与 SwiftUI 解释器,涵盖一个有文档说明的子集
存储
在浏览器中自动保存(IndexedDB);可编辑的 .swiftstudio.zip 归档
导出
Xcode 项目、Swift Playgrounds 应用、Swift 包、XcodeGen 规范
提示词
可选的提示词创建功能,使用你自己的服务商密钥
质量
CI 包含类型检查、lint 和单元测试;Playwright 端到端测试;包体积预算
运行
在线演示,或在本地使用 Node.js 22 和 npm 11 运行 · GitHub

更多工具