Swift Web Studio
在浏览器中设计 SwiftUI,保留 Swift 代码。
可视化编辑、Swift 代码编辑器与交互式设备预览,汇聚于同一个工作区。从模板或你自己的 Swift 文件开始,打磨设计,再导出项目进行原生开发。
编辑器:画布、Swift 代码与设备预览并排呈现截图 · 2880 × 1800
大多数设计工具画的是应用的图片。Swift Web Studio 编辑的是应用本身:画布上的每一处改动,都是对 Swift 源代码的改动,所以交付的就是代码。
看看亮点。
一款懂 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 源代码。
技术规格
- 技术栈
- TypeScript;Next.js 工作区,包含相互独立的语言、运行时和布局包
- 预览
- 运行在 Web Worker 中的 Swift 与 SwiftUI 解释器,涵盖一个有文档说明的子集
- 存储
- 在浏览器中自动保存(IndexedDB);可编辑的
.swiftstudio.zip归档 - 导出
- Xcode 项目、Swift Playgrounds 应用、Swift 包、XcodeGen 规范
- 提示词
- 可选的提示词创建功能,使用你自己的服务商密钥
- 质量
- CI 包含类型检查、lint 和单元测试;Playwright 端到端测试;包体积预算