Blog

文章

D2C:前端的自我革命

这半个月一直在研究Figma-to-Code的技术方案,关注主流的D2C(Design to Code)方法。市面上多是基于Figma插件,通过API获取设计信息,转换为DSL,再生成多端代码。也研究了视觉识别算法的应用,但在还原度和一致性上不够成熟。总结出D2C的三步核心逻辑:解析设计稿,转换为DSL,生成端代码。当前技术挑战在于设计稿的还原度,尤其是复杂交互、自适应布局等。通过Dify、MCP、LLM组合,我们实现了从设计稿到组件的端到端链路。技术限制仍在解析复杂结构、视觉细节上。对比使用了Claude 4和Gemini 2.5 Pro模型,发现其在准确性和结构还原上表现优秀。D2C常见问题包括:无用图层提高解析成本、复杂图层导出难度大、缺乏响应式布局信息。近期参与了内部会议,得知Figma官方将发布更优的MCP方案,可能替代现有工作。但这段经历仍充实有收获,加深了对设计到代码转换技术的理解。

·/,,,