Back

基于AI的Web原型设计工作流(上) | Zero Yue

June 1, 2025

3 min read

基于AI的Web原型设计工作流(上)

传统设计流程的痛点

在AI出现之前,常见传统的设计流程是这样的:

这就产生了四个拖慢了产品发布进度的痛点:

AI赋能下的新流程实践

我用了以下步骤:

  1. 借助 Dia 这款工具对竞品网页展开全面细致的总结。通过 Dia,能够从各个维度剖析竞品网页的布局、元素呈现等方面,为后续工作提供坚实基础

    竞品分析

  2. 进一步向 AI 进行询问,旨在归纳出常见的信息架构。这一步骤可以借助 AI 的强大分析能力,从海量信息中提炼出具有普遍性的信息架构模式,为自身的设计提供可借鉴的框架

    AI信息架构归纳

  3. 利用 Claude4 来生成线框图以及大纲,能够依据前面总结的信息架构,勾勒出清晰的线框图,同时给出详细的大纲,为后续的设计指明方向

    Claude4线框图

  4. 在 Figma 网页转设计稿,在此基础上完成原型的设计和内容的填充,确保设计稿既符合整体思路,又能满足具体的设计要求

    Figma原型设计

  5. 结合网页的设计趋势,以LOGO主题色为基调拓展,初步完成原型设计:

    主题色原型


后续将继续分享AI驱动下的高效Web原型设计落地实践与更多实操细节


END