软件创新开发日志 #3关于原型设计工具

写在前面

本文章为学校课程【软件开发与创新】的作业文章，存在一定程度的简写/概括/作业模板等

利益相关本人并非PM也并不会UI设计只会画点小破画甚至不怎么会平面设计，本文的很多内容都是东找西找材料以自己（作为一个全栈？工程师）的视角写下的

如果你也是全栈或者是完全独立的开发者，也许你在视觉设计上可以从本文找到一点点灵感

---

关于原型设计本身

在介绍原型设计的工具之前，想先再次介绍一下原型与原型设计本身

我们可以将原型理解为是一个产品在外观上的草稿——外观的含义包括界面、操作流程、交互效果等

由于在实际开发过程中，也许甲方简单一句说想改一个按钮的样式，前端工程师就要忙活一亿年，不能指望甲方（或者产品经理之类的人）能够理解代码设计上的原理，因此原型设计能够极大降低产品修改的成本，毕竟我们在一开始就敲定所有的外观样式会比后面在代码屎山上雕花明显更优

或许说，原型就是建筑上的设计图纸

那么顺理成章的，原型设计就是设计原型的过程，一般来说包括

• 页面布局设计
• 按钮摆放
• 页面跳转
• 用户操作流程
• 动画交互
• 功能模拟

诸如此类

顺带一提，原型设计与ui设计又有所不同，原型设计可能更在乎用户的整体操作逻辑是否顺畅——当然美观也是提升用户体验的一部分——而ui设计可能更在乎一页上的每个内容是否配色好看，边距是否恰当等等

我们还会将原型分为[hl]低保真原型[/hl]与[hl]高保真原型[/hl]，低保真原型基本是草稿、线框图以及简单页面流程；高保真流程更接近真实产品体验、一般可交互、带动画效果

一般来说，原型设计的流程是下面这样的：

1. 需求分析
2. 页面规划
3. 绘制线框图
4. 添加交互
5. 团队评审
6. 交付开发

在了解了原型设计的概念以后，我们再来看现代的原型设计工具的不同特点，以及如何挑选自己喜欢的（？）原型设计工具

关于原型设计工具们

在本文中，我们会将原型设计工具分为：传统原型工具以及AI生成型原型工具

如果从使用原型设计的选择上，我们理应考虑如下的因素

（以下内容摘自该篇知乎文章）

1. 学习成本：需不需要先学习一段时间工具怎么用，才能开始画？

2. 空白恐惧感：打开工具之后是面对空白画布，还是有现成的模板或者组件能用？

3. 是否贴合产品经理工作流：从需求分析到画原型页面，走到方案评审的整条链路顺不顺？

4. 修改成本：改一个页面，是可以局部快速调整，还是牵一发动全身修改麻烦？

5. 是否能独立完成：不靠老PM、不挨骂，能不能自己独立把这个需求交付完成？

再结合上面说的原型设计的概念，我们再来慢慢看各个原型设计工具

Axure

说到原型设计工具，绕不开的就是Axure——也许曾经的环境下，Axure始终占据着无可动摇的地位，但现在是agent时代，或者干脆再早一点，有各种更多元化的替代，使得PM们不一定会直奔Axure而是开始动摇

但无论如何，Axure的强大是毋庸置疑的，因为它非常的“原型设计工具”——因为很多别的原型设计工具实际上只是在做一些简单的模拟交互，重点都在视觉设计上

但是Axure考虑到更多原型设计的过程，更加”规范化“，它具有——

• 极强的交互表达能力：变量、条件判断、动态面板、复杂状态逻辑，直到今天依然是行业标杆。
• 本地端+文件掌控感：对很多大厂、涉密项目、政企项目来说，本地文件就是安全感。
• 多年积累的用户基础和方法论：很多产品经理的“原型思维”，本身就是在Axure里被训练出来的。

（以上内容摘自该篇知乎文章）

然而大多数专业的东西伴随的代价是——难上手、难用，这也对应了上面说的学习成本问题

就我个人来说，自己打开Azure以后、要么初始教程文档太长纯文字（虽然官网有一个core training），要么就是直接新建空白项目、直接面对的就是纯白的页面，也没有完整组件库。可能使用别的更简单的工具的人已经在处理添加交互、Azure用户还在吭哧吭哧画线框图

当然我们并不是要说Axure现在有多落伍多难用，所以，如果你未来持续做的项目是做复杂逻辑验证，Axure仍然是功能强大的工具，但是需要你花费比较大的学习成本去熟练掌握它

要说的话，可能Axure之于原型设计相当于Adobe Illustrator之于平面设计，你可能在某个团队里用不到，但你一定要会、要有

甚至可以说，如果想要“取代Axure”，那么这样的一款原型工具应该有下面的特点——或者说Axure本身就具有如下的优点：（以下内容摘自该篇知乎文章）

1. 基础原型能力：要看从线框图到高保真是不是都能扛得住。
2. 看高级交互能力：这是Axure的核心优势，支持不支持变量？有没有逻辑判断？能不能做函数运算？如果只能做简单的页面跳转，那不叫抗衡，那叫降级。
3. 组件与模板资源：Axure有深厚的产品经理积累，有很多第三方资源可用。咱们干活图的是效率，组件库、素材多不多，直接决定了下班时间。
4. 本地化与数据安全：很多国企、金融项目是不允许上公有云的，有没有私有化部署能力，是决定能否像Axure一样进驻大企业的关键。
5. 云端协作与效率：Axure顺应团队协作需求推出Cloud云服务，但同时这是Axure的弱项，也是其他原型设计软件的机会。重点要看多人协作是否顺畅，能不能适配当下快节奏的产品流程。

---

下面来简单介绍一下Axure本体的使用

让我们以Axure这个示例文档为例，除了普通的组件库以及一些基础的样式以外，我们注意到它在右侧有一栏Interactions以及对应的一个[hl]New interaction[/hl]按钮，这里就是主要编辑交互的地方

例如我们选中示例文件中的这个Launch按钮，可以看到右侧有一个已经写好的interaction——它几乎是用自然语言描述的，类似于搭积木一样区编写交互逻辑。此处的interaction绑定了上方的一个star部件，在“click or tap”点击的时候会让star在2000ms内旋转360度

Axure还有另外一个有趣的思想，对于很多其他的原型工具：页面 ≈ 图片，但Axure这里 [hl]页面 ≈ 小程序[/hl]。Axure包含一个变量机制，因此它更贴近于[hl]高保真原型[/hl]的要求，更像在模拟成品开发的流程，这一点是对开发者友好的

我们写好的所有交互在编辑区是看不到效果的——Axure还为我们提供了实时预览的通道。在窗口右上角有一个小三角Preview按钮，点击后会在浏览器内给出一个页面，在这里我们就可以预览我们编写的任何交互了

从开发者的角度来想——这样预览还有一个神秘的好处，那就是我们可以f12直接把网页扒下来，它提供了框架源代码，而由于现代agent发展迅速，对于更喜欢vibe coding的开发者们、可以直接把写好的原型对应的html交给agent直接生成对应的页面，大大缩短了开发流程

Figma

figma真的能算是原型开发工具吗....

相比其他的原型设计工具，figma在美术方面似乎更胜一筹。并且除了原型设计以外，figma更多的用处可能是平面设计、ui设计、海报设计等等

figma提供了非常多的模板——就比如我们打开figma的官网，下面会展示很多用户上传的模板

这得益于figma有着较好的社区生态Figma Community

用户可以“remix”其他用户上传的项目模板，这克服了axure中的“白板恐惧”，从某种意义上也降低了学习成本，因为这意味着你可以从其他人的项目中获取灵感

figma提供了较好的mcp接口，以及它的AI也是在2025年推出了FigmaMake的生成界面能力，总体上还算比较好用（主要更偏向于UI设计）

并且更有趣的是，figma在remix其他人的项目时，若对方使用了agent辅助，还会显示对方与ai的对话（prompt）过程，prompt大开源，上下文继承，这是对agent协作非常友好的

对于新手PM来说，figma确实是一个很好上手的选择，并且有很多设计师会选择使用figma做ui设计等，这样对接也会变得更简单——但它毕竟出身于ui设计，上文中我们也对比了ui设计和原型设计的区别，因此可能在流程以及思维习惯上会有所差别。

因此它可以说不是最适合“原型设计”的，但它确实是非常易于上手的

墨刀

如果你在谷歌搜索“原型设计”，现在跳出来的第一个站点就是[hl]墨刀[/hl]

墨刀是一个国产原型设计工具，在语言上天然地比上面两款工具更优，也许是国内在造神AI吧....总之一打开官网就是大大的 AI驱动的原型设计 ，很明显，墨刀接受AI的渗透远大于上面两款原型设计工具，并且似乎更愿意提供一个“一键式”的原型设计工具

——从这一点上来说，使用agent协助的学习成本更是进一步降低，PM只需要了解原型设计本身的概念以及要求，就可以快速产出原型

墨刀的原型功能比较全，提供现成的组件库和模板资源，也支持变量、函数等高级交互功能，虽然也有逊色于axure的地方例如高级交互，但对于很多小项目或者微型项目需要快速产出原型，上面的功能也算够用

除了和axure类似的正常的原型设计流程以外，墨刀还提供一个团队空间以实现团队协作开发。它相当于合并了原型设计工具本体以及项目管理工具，它在需求、原型、设计到交付都能覆盖，所以属于综合能力强的那一类

当然，国产软件的通病就是——贵。在小红书上可以看到层出不穷的讨论墨刀究竟有多贵的帖子......对于很多企业来说，价格就是拒之门外的第一步，为了压低成本，领导们完全是更希望能够增加学习成本而降低经济成本——也就是说领导们可能在这一层就会让PM转而去使用axure而非要充会员的墨刀

Google Stitch

在Google I/O 2025大会上，发布了全新的UI设计工具：Stitch，其前身是Galileo AI

在agent时代下，如果你决定让agent加入工作流，那么何不拥抱直接使用自然语言来完成原型设计呢？

上面我们提到了墨刀的缺点就是贵，那么完全免费的stitch就直接杀死了比赛——它唯一的缺点就是中国大陆无法使用

它抛弃了任何原型设计的传统流程，或者说，如果你将采用自然语言生产，那么这些规范就都是可有可无的存在

我们先简单概括一下stitch的优点，然后我们将会以本次项目为例，使用stitch完成一次原型设计并展示stitch的工作流程

stitch的优点有：

• 免费，最朴实无华的优点，即便是使用agent也是全部免费无限量的
• 无限画布：
  • 传统纯agent模式下，用户只能和一个对话框交互，然后获得一张普通的图片或者代码——但是stitch提供了一个无限画布，每次生成是在无限画布上生成一个页面，用户可以直观的管理这些页面并选择页面进行核查、重绘、导出等
  • 同时，用户也可以上传配色、组件等等到画布中，使得生成的内容可组织可链接
• 多种类导出
  • DESIGN.md：DESIGN.md是一套设计的规范，它除了给人类审查用以外，更多的功能是给外部agent时保持风格一致。这就比让agent去读css和html更佳规范
  • HTML：stitch可以直接导出html，结合上面的DESIGN.md，可以让本地agent几乎无损的还原出生成的原型；并且由于交给agent处理，不管是使用哪种前端框架都可以自如地生成
  • 原生导出Figma：这是最屌的一点——如果仍然想要回归传统原型设计流程，可以让stitch生成初步的草稿后导回figma，然后让设计师和PM再在更规范的figma里完善剩下的流程，这样就能无缝接入传统的原型设计流程
• 设计稿快速转换为原型：stitch支持用户上传线框图、设计草稿等，让stitch还原成原型形式，大大加快了设计速度
• 设计一致性：上面说的DESIGN.md一般用于外部，在stitch内部，每个项目都会给出一个配色方案和组件风格，并且以此为基准生成（虽然有时不稳定）

原型设计实践

下面以课程里《智绘社团》这个项目来展示一下，使用stitch完成原型设计的流程

不过在使用工具之前，我们也会花费一些时间来进行前置的分析准备——实际上，使用原型设计工具只是原型设计的一环

原型设计的流程参照了这篇文章

梳理业务流程

首先我们应该梳理业务流程，回想一下，社团负责人或宣传同学平日里准备一次活动宣传物料时，通常会遇到下面几种场景：

场景一：想要生成一张活动海报，但风格还没想好（或者有了风格目标）
社团下周要举办招新宣讲会，宣传同学知道需要一张海报，但对配色、版式、标题表达还没有明确想法。于是，他进入“智绘社团”，选择“生成海报”，填写活动名称、时间、地点、主办方、报名方式等基本信息，再浏览系统提供的风格选项和模板示例。看到某个模板是“青春活力风”比较适合招新场景，他选中该风格，让系统生成海报。生成后，他查看画面效果、文字是否完整、活动信息是否准确，满意后导出海报。

场景二：想要生成一篇活动推文，并且主题和语气比较明确。
社团准备发布一篇公众号推文，宣传部长已经想好这次推文要突出“社团成果展示”和“招新吸引力”，整体语气希望正式中带一点活泼。于是，他进入“智绘社团”，选择“生成推文”，填写活动背景、目标读者、重点内容和发布平台，再选择“公众号推文”格式。系统根据输入内容生成标题、导语、正文结构和结尾引导。用户阅读后，对部分表达进行修改，确认内容符合社团调性后导出。

场景三：既想做海报、也想写推文，但只有一个大致活动想法。
社团临时决定举办一次校园摄影活动，负责人只确定了活动主题和大致时间，还没有想好宣传口号、视觉风格和推文结构。于是，他进入“智绘社团”，创建宣传任务，输入活动主题、对象、时间范围和活动亮点。系统根据活动类型推荐适合的海报风格和推文框架，并分别生成海报初稿和推文初稿。用户在预览页面比较不同版本，选择最合适的一组方案，再进行少量修改，最后导出海报与推文。

实际上，无论用户面临哪种场景，都要经过四个过程：从一个入口进入系统、经过一个内容引导的过程、决策是否采用生成结果和完成最终输出。

入口

入口要能包容以上三种宣传场景：

• 有明确产出目标，想生成一张海报；
• 有明确产出目标，想生成一篇推文；
• 有大致活动想法，希望同时获得海报和推文方案；

内容引导

从入口到生成具体内容初稿，都可以视为内容引导过程。对于不同宣传场景，其引导形式有所差异：

• 对于想生成海报且风格明确的用户，系统需要提供清晰的信息填写入口，让用户快速输入标题、时间、地点、主办方、报名方式等关键内容，并按指定风格生成；
• 对于想生成推文的用户，系统需要引导用户补充活动背景、目标读者、重点信息、语气风格和发布平台，生成标题、导语、正文和结尾引导；
• 对于只有大致活动想法的用户，系统需要提供任务式引导，把活动主题、对象、时间、亮点等信息转化为海报和推文的生成条件

决策

浏览完生成结果的版式、文案、风格、信息完整度等详细情况之后，用户会做出使用决策。可以放弃当前结果，重新调整活动信息或风格偏好；也可以保留当前结果，并对标题、正文、配色、图片、排版等细节进行修改；如果生成内容符合预期，用户就会确认采用

输出

决定采用并完成必要修改之后，用户进入最终输出过程。对于海报，用户可以导出图片；对于推文，用户可以复制正文或导出为文档；对于同时生成海报和推文的任务，用户可以分别导出对应需要的内容

输出完成后，系统保存历史版本和用户修改记录，方便后续继续编辑或复用同类活动宣传内容

拆分核心页面

暂且不考虑常规的注册和登录，从智绘社团的业务流程中，可以拆分出一些核心页面

入口

入口即首页。首页相当于用户进入系统后的工作台，需要让用户快速开始一次内容生成任务。因此首页需要包含三个部分：海报生成入口、推文生成入口、历史任务入口

• 海报生成入口用于承接“我想生成一张海报”的场景；
• 推文生成入口用于承接“我想生成一篇推文”的场景；
• 历史任务入口用于承接“继续编辑上次内容”或“复用同类活动”的场景。

内容引导

从首页进入具体生成任务后，需要分别设计独立的内容引导页面。

• 对于海报生成，需要一个海报信息填写页。用户在这里填写活动名称、时间、地点、主办方、报名方式等信息，并选择或填写风格偏好
• 对于推文生成，需要一个推文信息填写页。用户在这里填写活动背景、目标读者、重点内容、语气风格和发布平台等信息
• 对于想同时生成海报和推文的用户，可以在首页选择“创建宣传任务”，进入宣传任务填写页。该页面统一收集活动主题、对象、时间、亮点和需要生成的内容类型，再分别进入海报或推文生成流程
• 对于风格还没想好的用户，还另外需要一个风格选择页。系统展示若干常用风格、模板示例和推荐方向，帮助用户确定海报或推文的表达方式

决策

用户提交信息后，系统生成初稿。用户需要查看生成结果，并决定是否采用、修改或重新生成。因此需要一个生成结果预览页

在生成结果预览页中，海报用户查看版式、配色、图片、文字信息是否准确；推文用户查看标题、导语、正文结构、表达语气和结尾引导是否合适

如果用户希望调整内容，需要进入内容编辑页。海报编辑页支持修改标题、时间地点、主办方、配色和图片；推文编辑页支持修改标题、段落、语气和重点内容

输出

用户确认采用并完成修改后，进入最终输出流程

对于海报，需要一个海报导出页，支持导出图片或 PDF

对于推文，需要一个推文导出页，支持复制正文或导出为文档

为了便于用户查看和复用往期内容，还需要一个历史任务列表页。用户可以在这里查看过去生成的海报和推文，继续编辑、重新生成或复制同类任务

核心页面列表

这样，我们得到了 9 个 MVP 核心页面：

1. 首页
2. 海报信息填写页
3. 推文信息填写页
4. 宣传任务填写页
5. 风格选择页
6. 生成结果预览页
7. 内容编辑页
8. 导出页
9. 历史任务列表页

由于首版我们只重点完成“海报生成”和“推文生成”两个核心能力，因此社团认证、多人协作、数据统计、老师审核、商家运营等功能我们本次先不展示

梳理每个页面的信息结构

接下来，我们需要梳理每个页面的信息结构，即页面的全部元素及元素之间的逻辑关系

绘制原型界面

直到这一步，才有原型工具的参与

在绘制前，我们可以确定一下美术风格，例如我们从小红书上找到了这样一版配色，而ui风格交由stitch自己设计就好

再加上前面的分析，我们整理一下要交给stitch的prompt就可以让它生成初版了

[collapse title=一个prompt参考]

你现在需要完成一个web项目的设计，项目标题为《智绘社团——面向校园社团的AIGC一站式内容工厂》，配色请参考我发出的参考图（绿色和蓝色较清新的颜色）

ui风格以青春、活力为主题风格，适配学生的使用习惯

下面是页面设计描述，根据下面的信息完成初版设计，每一页给出可以生成与交互的原型：

1. 首页

首页包含三个主要信息区块：顶部信息区、生成入口区、任务管理区。

顶部信息区包含：社团名称、当前身份、最近编辑提示。
生成入口区包含：生成海报、生成推文、创建宣传任务。
任务管理区包含：历史任务列表、继续上次编辑、复用同类任务。

2. 海报信息填写页

海报信息填写页包含三个主要信息区块：基础信息、视觉素材、生成设置。

基础信息包含：活动名称、活动时间、活动地点、主办方 / 联系方式。
视觉素材包含：上传 Logo、上传活动图片。
生成设置包含：海报尺寸、风格偏好、生成海报按钮。

3. 推文信息填写页

推文信息填写页包含三个主要信息区块：内容信息、表达设置、操作区。

内容信息包含：活动主题、活动背景、目标读者、重点内容。
表达设置包含：发布平台、语气风格、篇幅长度。
操作区包含：生成推文按钮、保存草稿按钮。

4. 宣传任务填写页

宣传任务填写页包含三个主要信息区块：活动信息、生成范围、操作区。

活动信息包含：活动主题、活动对象、时间 / 地点、活动亮点。
生成范围包含：海报、推文、风格推荐。
操作区包含：生成宣传任务按钮、保存草稿按钮。

5. 风格选择页

风格选择页包含三个主要信息区块：推荐风格、风格分类、模板示例。

推荐风格包含：根据活动自动推荐、最近使用风格。
风格分类包含：青春活力、正式简洁、科技感、文艺清新。
模板示例包含：海报模板预览、推文结构预览、确认风格按钮。

6. 生成结果预览页

生成结果预览页包含三个主要信息区块：结果展示、质量信息、决策操作。

结果展示包含：海报预览、推文预览、版本切换。
质量信息包含：生成说明、信息完整度、风格匹配度。
决策操作包含：重新生成、进入编辑、确认采用。

7. 内容编辑页

内容编辑页包含三个主要信息区块：海报编辑区、推文编辑区、编辑操作区。

海报编辑区包含：标题文字、时间地点、配色 / 图片、版式调整。
推文编辑区包含：标题、导语 / 正文、结尾引导、语气优化。
编辑操作区包含：保存修改、预览修改结果、进入导出。

8. 导出页

导出页包含三个主要信息区块：海报导出、推文导出、保存记录。

海报导出包含：导出 PNG、导出 PDF、文件预览。
推文导出包含：复制正文、导出文档、排版预览。
保存记录包含：保存到历史任务、生成版本号、返回首页。

9. 历史任务列表页

历史任务列表页包含三个主要信息区块：筛选区、任务列表区、任务操作区。

筛选区包含：搜索任务名称、内容类型筛选、创建时间筛选。
任务列表区包含：任务名称、内容类型、创建时间、历史版本。
任务操作区包含：继续编辑、复用任务、重新导出。

[/collapse]

很快它就按照要求给出了多张设计初稿，由于是国外的应用因此在没有额外prompt的情况下，会出现大量英文，我们可以先从一个页面入手、进一步修改至合格的原型

选中一个页面，上方的generate中提供了多个进一步修改的选项

例如，我们可以先让它补充缺失状态、animate动画和无障碍功能审核

在无障碍功能审核中，stitch会给出一段无障碍审计，例如：

我已完成对《智绘社团》首页（动态版）的无障碍审计。

通过对页面 HTML 结构和样式的深度分析，我生成了一份详细的无障碍审计报告（见 无障碍审计报告 - 智绘社团首页）。

审计核心发现：

• 键盘可访问性：核心生成入口卡片目前缺乏键盘聚焦支持，这对依赖键盘或辅助技术的用户是一个阻碍。
• 色彩对比度：页面中存在一些对比度不足 4.5:1 的次要文案，可能会影响低视力用户的阅读体验。
• 语义化标签：建议将通用的 div 容器替换为更具描述性的语义化标签（如 main, nav），以优化屏幕阅读器的解析。

我已在报告中按优先级列出了改进建议。您是否需要我立即根据这些建议优化首页的代码？

随后，我们根据agent的引导，点击应用“优化无障碍设计”，就会再进一步修改布局与配色设计

在完成这些修改后，假设我们已经对外观设计大致满意——我们就可以点击上方的即时原型，生成一个类似于axure提供的preview一样的原型，可以测试交互以及动画

例如，在原型编辑器中，将鼠标hover到“开启创作”下的三个card上，会展示对应的浮动动画。页面也可以正常滑动，和正常的web应用体验几乎一致

并且，我们还可以像普通原型设计环节中一样，将需要交互的部分与其他screen连接，这样就能测试整个交互流程了

导出

假设我们已经通过stitch完成了原型设计，我们可以选择多种导出形式

例如我们前面提到的，我们可以导出为figma项目，在figma中进一步设计——选择Figma导出后，stitch会将figma项目的信息写入你的剪切板，只需要在figma项目中ctrl+v即可

当然，stitch也可以直接导出DESIGN.md和html，用于agent参考

例如，下方给出了本项目的DESIGN.md，比较长请谨慎点开

[collapse title=DESIGN.md]

---

name: AIGC Content Factory

colors:

surface: '#fbf9f8'

surface-dim: '#dbd9d9'

surface-bright: '#fbf9f8'

surface-container-lowest: '#ffffff'

surface-container-low: '#f5f3f3'

surface-container: '#efeded'

surface-container-high: '#eae8e7'

surface-container-highest: '#e4e2e2'

on-surface: '#1b1c1c'

on-surface-variant: '#46483e'

inverse-surface: '#303030'

inverse-on-surface: '#f2f0f0'

outline: '#76786c'

outline-variant: '#c6c8ba'

surface-tint: '#57633a'

primary: '#57633a'

on-primary: '#ffffff'

primary-container: '#a8b685'

on-primary-container: '#3c4721'

inverse-primary: '#becc9a'

secondary: '#336381'

on-secondary: '#ffffff'

secondary-container: '#abdafd'

on-secondary-container: '#30607e'

tertiary: '#605f4d'

on-tertiary: '#ffffff'

tertiary-container: '#b2b19b'

on-tertiary-container: '#444433'

error: '#ba1a1a'

on-error: '#ffffff'

error-container: '#ffdad6'

on-error-container: '#93000a'

primary-fixed: '#dae9b4'

primary-fixed-dim: '#becc9a'

on-primary-fixed: '#151f00'

on-primary-fixed-variant: '#3f4b24'

secondary-fixed: '#c8e6ff'

secondary-fixed-dim: '#9eccef'

on-secondary-fixed: '#001e2e'

on-secondary-fixed-variant: '#164b68'

tertiary-fixed: '#e5e4cc'

tertiary-fixed-dim: '#c9c8b1'

on-tertiary-fixed: '#1c1c0e'

on-tertiary-fixed-variant: '#484836'

background: '#fbf9f8'

on-background: '#1b1c1c'

surface-variant: '#e4e2e2'

typography:

headline-xl:

fontFamily: Plus Jakarta Sans

fontSize: 40px

fontWeight: '700'

lineHeight: 48px

letterSpacing: -0.02em

headline-lg:

fontFamily: Plus Jakarta Sans

fontSize: 32px

fontWeight: '600'

lineHeight: 40px

headline-lg-mobile:

fontFamily: Plus Jakarta Sans

fontSize: 24px

fontWeight: '600'

lineHeight: 32px

body-md:

fontFamily: Be Vietnam Pro

fontSize: 16px

fontWeight: '400'

lineHeight: 24px

body-sm:

fontFamily: Be Vietnam Pro

fontSize: 14px

fontWeight: '400'

lineHeight: 20px

label-bold:

fontFamily: Be Vietnam Pro

fontSize: 12px

fontWeight: '700'

lineHeight: 16px

rounded:

sm: 0.25rem

DEFAULT: 0.5rem

md: 0.75rem

lg: 1rem

xl: 1.5rem

full: 9999px

spacing:

base: 8px

xs: 4px

sm: 12px

md: 24px

lg: 48px

xl: 80px

gutter: 20px

margin-mobile: 16px

margin-desktop: 64px

---

## Brand & Style

The design system is crafted for a campus-centric AIGC platform, focusing on the creative energy of student clubs. The brand personality is **fresh, optimistic, and effortlessly creative**. It bridges the gap between high-tech AI capabilities and the approachable, grassroots nature of university student organizations.

The visual style is a blend of **Modern Minimalism** and **Soft Tactile** elements. It utilizes generous whitespace and a "paper-like" background to evoke a sense of a blank canvas waiting for creation. By combining smooth, organic shapes with a disciplined grid, the UI feels both disciplined and expressive. The emotional response should be one of "effortless production"—making the daunting task of content creation feel as light and refreshing as the color palette.

## Colors

The palette is derived from a natural, desaturated harmony that stands out against typical high-contrast tech platforms.

* **Primary (Meizi Green):** A muted, pale green used for primary actions, success states, and key brand moments. It represents growth and freshness.

* **Secondary (Sky Blue):** A calm, scholarly blue used for secondary buttons, information callouts, and interactive links.

* **Tertiary (Cream/Paper):** The foundational background color. It is warmer than pure white, reducing eye strain during long writing or design sessions.

* **Neutral:** A deep charcoal-grey for text to maintain high legibility without the harshness of pure black.

Use the Green and Blue as semi-transparent accents (10-15% opacity) for container backgrounds to maintain a vibrant yet soft aesthetic.

## Typography

This design system uses **Plus Jakarta Sans** for headlines to provide a friendly, rounded geometric feel that matches the "youthful" requirement. For body text and functional labels, **Be Vietnam Pro** is used for its exceptional clarity and contemporary warmth.

Headlines should use tighter letter spacing to feel "locked-in" and professional. Body text should maintain generous line heights (1.5x) to ensure readability for long-form articles. When displaying AI-generated prompts or technical metadata, a slightly reduced weight is preferred to differentiate "tooling" from "content."

## Layout & Spacing

The layout follows a **Fluid Grid** model with a soft 8px rhythm.

* **Desktop:** A 12-column grid with a maximum content width of 1280px. Use wide 64px margins to create a "gallery" feel for poster previews.

* **Tablet:** An 8-column grid with 32px margins.

* **Mobile:** A 4-column grid with 16px margins.

Spacing between unrelated sections should be aggressive (`xl`) to promote the "fresh" and "open" brand feel. In sidebars and tool panels, use `sm` and `md` spacing to keep controls compact and accessible.

## Elevation & Depth

Hierarchy is established through **Tonal Layers** and **Ambient Shadows**.

Avoid heavy, dark shadows. Instead, use "Soft Tints"—shadows that take a fraction of the Primary or Secondary color (e.g., a shadow with 4% Meizi Green instead of pure Black).

* **Level 0 (Base):** The Cream background.

* **Level 1 (Cards):** Flat white surfaces with a 1px stroke in a slightly darker version of the background color.

* **Level 2 (Hover/Floating):** Use a diffused shadow (Blur: 20px, Y: 8px) with very low opacity (5-8%) to make elements appear as if they are floating gently above the paper surface.

## Shapes

The shape language is consistently **Rounded**. This removes the "sharp edges" of technology and makes the AIGC tools feel safe and inviting.

Standard components use a `0.5rem` radius. Larger containers, such as the main AIGC canvas or poster preview cards, should utilize `1rem` (rounded-lg). For decorative elements or "New Project" buttons, use `1.5rem` or full pill shapes to draw the eye and encourage interaction.

## Components

* **Buttons:** Primary buttons use the Meizi Green with white text and a pill shape. Secondary buttons use the Sky Blue with a ghost (outline) style.

* **AIGC Input Fields:** Text areas for AI prompts should have a slightly larger border radius (12px) and a subtle 2px Primary color border when focused.

* **Cards:** Poster preview cards must have a 1:1 or 4:5 aspect ratio with a subtle Level 2 shadow. Information is tucked into a semi-transparent blur at the bottom of the image.

* **Chips:** Use for "Club Categories" (e.g., Music, Tech, Sports). These are small, pill-shaped, and use the Secondary color at 10% opacity for the background with 100% opacity for the text.

* **Article Editor:** A clean, distraction-free interface with a centered column. The "Generate AI Content" floating action button should stay in the bottom right corner, utilizing the most vibrant Primary Green.

[/collapse]

甚至，它还能给出项目的需求文档——

至此，我们使用stitch辅助完成了快速的原型设计、甚至还超额完成了设计文档、无障碍分析以及需求文档等

结语

最后，我们可以回到最开头：原型设计工具应该如何选择、原型设计工具究竟改变了流程中的什么？

如果放在过去，原型设计更多是一个高门槛专业流程——就例如大家都在推崇使用axure，PM需要学习复杂的软件操作、理解交互逻辑、绘制页面结构，再不断与开发和设计沟通修改

而现在，在 agent 的参与下，原型设计已经成为了也类似于vibe coding一样，从搭架构变成了自然描述

就比如在这次项目中，我们可以明显感受到agent对原型设计流程的改变：

它不仅帮助完成页面生成，还参与了风格统一、交互补全、无障碍分析、设计规范整理，甚至能够进一步生成 DESIGN.md、HTML 与需求文档等内容

当然，这并不意味着原型设计本身已经被 AI 替代

AI并不真正具有审美，它不过只是一个概率模型——而越有方法论、越有审美的人才更能驾驭这样的工具。就像很多人说的，知道AI画的可能不尽人意、但不知道究竟哪里不尽人意、哪里需要修改

因此与上面的说法恰恰相反，越是在 AI 能够快速生成内容的时代，开发者与产品设计者越需要具备清晰的业务分析能力、信息结构拆分能力以及用户流程设计能力——而在拥有这种能力的前提下，选择原型设计工具也将变得和“今天选用哪支笔写字”一样简单的问题