Semi Design 设计转代码 - 社区版

Created by the ByteDance - Douyin FE and UED team. Official supports D2C with Semi UI, one-click conversion of design drafts into front-end codes.

FeaturesCode Generation. Supports React + SCSS, React + Tailwind, React + @emotion/css, abstract code output JSON SchemaSandbox Preview. Supports preview code in CodeSandboxComponent Support. Provides a set of out-of-the-box UI Kits that can be recognized by D2C and strictly aligned with the code（semi-design）, and support marking third-party component librariesImage Export. Supports custom image upload interfaceDev Mode Support. Supports developer to use plug-in transcoding without editing permission of design draftHow to useInstall pluginSelect a layer and start transcoding. (If you don't have editing permission, you can use the plugin in Dev Mode)Draft inspectsCopy and paste, save code file to local or preview code in sandboxTipsFor better layout effect, please use Auto LayoutThe CSS class name in the code is named after the layer nameTry to keep the layer structure as simple as possible to avoid overlapping layersAdvanced usageMark component library. Use plug-ins to mark components or component sets to realize D2C identification of third-party component libraries.

LimitationsRadial, Angular, Diamond Linear are not supportedSupportOfficial Website - Feedback - 中文站点Follow usTwitter - Medium - Dev.to - Bilibili