看点高级的
拿点有用的
学点真干货
找点新财路
发布
登录
注册
设计稿如何生成鸿蒙 ArkUI 代码？墨刀 D2C 打通设计到开发
墨刀modao
北京
/
UI设计师
/
268天前
/
438浏览
版权
私信
关注
设计稿如何生成鸿蒙 ArkUI 代码？墨刀 D2C 打通设计到开发
墨刀modao
关注
在鸿蒙开发中，UI 不是“写不出来”，而是
写得太慢
。设计已经评审通过，视觉规范也很明确，但落到代码还原里，ArkTS 虽然是声明式UI，语法简洁了不少，但对着设计稿一行行去敲 Row、Column、Flex，再去调间距、圆角、阴影……每一项都需要重新判断。尤其是在多设备场景下，光是一个页面的不同断点布局和组件伸缩，就要反复调试好几轮，非常耗时。
面对这种重复、耗时的 UI 还原过程，越来越多团队开始关注的问题是：
设计稿能否直接生成鸿蒙代码
。在目前能实现这一点的工具中，
产品设计协作平台墨刀的 D2C
（Design to Code）功能是一个值得关注的选项。接下来，我们就来把设计稿生成鸿蒙代码这件事聊透彻。
一、核心痛点：从设计稿到代码的“翻译”耗能
从开发视角看，鸿蒙 UI 其实并不难，ArkUI 的声明式写法也很清晰，难的是从设计稿到 ArkUI 的那一步。下面这几个典型场景，基本每个鸿蒙项目都会遇到：
结构拆解
：设计稿是标准的设计工具产物，但开发要自己拆成 ArkUI 组件结构；
样式还原
：间距、圆角、阴影、字体层级，需要逐项手动对照；
多端适配
：一套界面要跑在手机、平板、折叠屏上，布局还得重新算
频繁返工
：写完一版，设计改了几个细节，又得回头重调一遍
团队的痛点很明确，即使大家都会写 ArkUI，但巨大的成本消耗在与设计稿反复“对齐”上。所以能否让设计稿直接生成鸿蒙代码，成了越来越多团队关心的实际问题。
收藏
二、墨刀 D2C 生成鸿蒙代码的3大实用价值
墨刀 D2C 输出的不是伪代码，而是可直接在 DevEco Studio 中运行、编辑的标准 ArkTS 代码。从开发角度看，它主要解决了三个问题：
1. 输出标准的 ArkTS 语法，不是伪代码
墨刀 D2C 输出的是
标准 ArkTS + ArkUI 组件代码
，结构清晰、语法规范，变量定义、样式引用都是符合鸿蒙官方规范的。你把它复制到 DevEco Studio 里，它是能直接运行的，而且支持二次编辑，可以拆组件、调整状态、接业务逻辑或者按项目规范重构。
2. 保持设计结构，提升代码复用性
在传统流程里，设计稿和代码的组件体系是断开的。设计有设计的组件，开发要自己重新建一套。墨刀 D2C 的做法是：在生成代码时，尽量
让“设计结构”等同于“代码结构”
。设计稿中的容器、列表、卡片会被自动识别并生成对应的 ArkUI 组件（如 Flex、List），层级清晰。如果团队使用了标准化的设计组件库，生成的代码稍作调整即可作为通用业务组件复用，从源头提升了代码的可用性和一致性。
3. 支持响应式布局代码，适配多设备
鸿蒙生态主打万物互联，鸿蒙生态设备尺寸多样，手写适配逻辑复杂。但墨刀D2C在生成代码时，会根据设计元素的约束关系，自动转换为使用
相对布局和弹性布局的代码
。它可以适配不同尺寸设备，而不是写死的绝对尺寸。布局逻辑在代码层面是统一的，这点在真实项目里，后期维护成本会低很多。
收藏
三、设计稿如何生成鸿蒙 ArkUI 代码？
如果你只是想快速跑通一次流程，其实很简单，不需要额外配置环境，可直接使用代码。
第一步：切换到研发模式
。在墨刀设计中进入设计稿后，在右侧面板顶部切换到开发者模式，准备进行代码生成。
第二步：选择 ArkUI
。在代码生成选项中，找到ArkUI，选中后点击生成代码。
收藏
第三步：生成代码
。选择需要生成代码的容器，注意仅支持识别画布中的顶层容器生成结果为完整项目结构代码包，而非单一页面样式代码。生成的代码可直接下载在 DevEco Studio 中使用。
Tips
：墨刀 D2C 不仅支持墨刀内创建的设计稿，也支持导入 Figma、Sketch、Adobe XD 等外部设计文件生成鸿蒙代码。
收藏
写在最后
鸿蒙开发需求多、工期紧是常态，墨刀 D2C 的核心价值在于，它能将已确定的设计方案，直接固化为可用的代码基底，把开发者从重复的“人工翻译”劳动中解放出来。
如果你的团队正被频繁的UI返工、多端适配拖慢进度，那么“设计稿生成 ArkUI 代码”的价值可能不再是“试试看”，而是一种提升产研协作确定性和速度的务实选择。对鸿蒙开发来说，这一步，确实有很大价值。
1
阅读原文
|
举报
|
声明
收藏
分享
原创文章
UI
D2C
鸿蒙
arkui
设计稿
生成代码
墨刀
墨刀d2c
设计转代码
设计生成代码
鸿蒙ui
相关推荐
换一换
如何在WorkBuddy做产品设计？调用墨刀AI生成B端管理后台原型
315
墨刀modao
界面设计最容易漏哪些状态？AI界面设计工具提示词这样写
304
墨刀modao
设计师该怎么选AI Agent？通用、产研、编程三类AI工作台对比
367
墨刀modao
属于产设研的AI工作台来了：墨刀AI客户端，直接进入本地项目工作
476
墨刀modao
AI办公工具大爆发，设计师如何把豆包/千问/WorkBuddy接入自己的工作流？
407
墨刀modao
关注
IP形象及IP内容
7705
蔡蔡文化
Pixso 和墨刀都在开放 MCP，设计师的工作流会被怎么改？
288
墨刀modao
会员精选
⚙️工业自动化管理软件UI设计
1538
轻妙设计
推广
当AI直接生成UI界面和Vue代码，设计师和开发还会吵架吗？
418
墨刀modao
从画UI到开发：不写代码，懂设计的你也能跑出产品Demo
467
墨刀modao
从界面到可运行应用：AI正在如何改变APP开发工作流？
313
墨刀modao
评论
登录
评论你的想法~
表情
发布评论
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
你可能喜欢
换一换
2O25~26海报合集（阶段）
245
视研
一部短片的诞生
288
Z先生_SAN
ClipMind产品UXUI和品牌设计
242
FCC_Lucas
奥德赛后遗症
263
巫师光
跨境 3C 配件｜Amazon亚马逊视觉实验
248
鞋富贵
福到FuDao©️一口，福到！
143
小满设计家
相关收藏夹
换一换
关注
IP形象及IP内容
7705
蔡蔡文化
关注
科幻扁平
489
yiyi1105
关注
中国风元素插画
507
蔡蔡文化
关注
IP形象——动物类
584
奶昔窝窝儿
关注
作品集
1003
VI微娅
关注
数据可视化
495
盘底的洋葱像我
大家都在看
查看更多
IP 形象
国庆
LOGO 设计
海报设计
插画设计
壁纸图片
作品集
VI 设计
UI 设计规范
AI 绘画
表情包
PPT模板
D2C
墨刀d2c
设计’
设计in
in设计
it设计
AS设计
by设计
a设计
、设计
设计、
设计
#设计#
设计‘’
is设计
设计‘
设计
设计。
#设计
if设计
设计】
设计，
设计
@设计
an设计
设计
🤮设计
设计 、
设计／
设计|
设计.
设计
#设计
#设计
#设计
设计#
设计a
设计🔍
登录注册
1
登录即可同步推荐记录哦
收藏
登录即可加入我的收藏
评论
登录即可评论想法
分享
分享
