Back to Plugins
Sloth D2C 设计稿转代码

Sloth D2C 设计稿转代码

D2C-设计稿转码,A2D(AI生稿)

Plugin Preview

Sloth D2C 设计稿转代码 preview

About this plugin

Sloth D2C design-to-code plugin is an intelligent tool for front-end development and design teams, supporting rapid conversion of design drafts into production-level HTML/React code, as well as AI-generated pages in the target style from text/images plus prompts and translating them into Figma nodes.


Sloth D2C 设计稿转代码插件,面向前端开发与设计团队的智能化工具,支持设计稿快速转生产级HTML/React代码,及文本/图片+Prompt输入AI生成目标风格页面并转译至Figma节点。


Sloth D2C MCP tool obtains transcoding data pushed by plugins. It intercepts basic settings such as page configuration framework selection, conversion rate, color format, image storage, and prompt word editing. It also supports advanced settings such as selection grouping, component mapping, and module marking to generate prompt words to guide the Agent to generate and write target code.


Sloth D2C MCP 工具,获取插件推送的转码数据,通过拦截页面配置框架选择、转换倍率、颜色格式、图片存储、提示词编辑等基础设置,同时支持圈选分组、组件映射、模块标记等高级设置,以生成提示词指导 Agent 生成目标代码并写入。


Core Capabilities:

① High-fidelity reproduction, with styles and layouts precisely matching the design drafts, reducing coding and review costs;

② Code closely resembles manually written code, supporting technical features such as TailwindCSS, automatic Flex layouts, and row/column grouping;

③ Supports online editing of generated code (image grouping, source code adjustments, etc.);

④ Deep collaboration with Sloth D2C MCP, breaking the limitations of RESTful APIs through configuration interception and data pushing, maximizing fidelity.


核心能力:

① 高保真还原,样式布局精准匹配设计稿,降低编码与走查成本;

② 代码贴近人工编写,支持TailwindCSS、Flex自动布局、行列分组等技术特性;

③ 支持生成代码在线二次编辑(图片编组、源码调整等);

④ 深度协同Sloth D2C MCP,通过配置拦截及数据推送突破RESTful API限制,最大化还原度。

Plugin Details

Version31
CreatedApril 26, 2025
Last UpdatedJanuary 8, 2026
CategoryAccessibility tools
Creatorbrightmao
Stats70 installs, 76 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Network Access:

    MyPlugin queries user custom llm api for generating code.

  • Editor Types:
    figma
  • Allowed Domains:
    • *