画原型耗时费力？Trae的定制化Skills能让效率提升10倍！本文以HR SaaS系统为例，完整演示如何从零创建专属原型生成技能——从系统设计规范学习到交互细节调试，揭秘如何用AI工具实现2分钟生成可交互HTML原型的秘密。更关键的是，这套方法论可复用于需求文档、上线公告等任何标准化工作场景。

如何用Skills高效完成产品工作？发布后，收到不少伙伴的关注，其中最关注的问题就是“能把对应Skills分享出来吗？”

我理解大家的想法，只是恐怕要让这些伙伴失望了。

原因很简单：我所写的Skills都是专属定制，适用于我自己，却未必适合你。比如我的需求文档、上线公告的格式，是我自己的格式；我的产品方案设计、需求工作量评估是完针对HR SaaS产品所定制。

退一步讲，我更主张“授人以鱼不如授人以渔”，提供给你一个价值不大的Skills，不如教会你创建自己专属的Skills。

前面的文章可能更偏向“炫技”（重点放在效果呈现），而没有从0到1手把手教的感觉，可能会让你无从下手，今天我就聚焦一个Skills——画原型，期望帮你写出自己的第一个稳定、可用、专属的Skills。

首先，我还是带你看看效果，让你对这个产出结果有所感知。

下面左侧的原型，是我花了2个小时（包含思考时间）用Axure画的原型，而右图是我花2分钟写，20分钟左右调试后的Skills画的原型。

原型效果对比图1

原型效果对比图2

相信你可以看出来效果的差异（即优质），也能感受到效率的提升（即高效），不再赘述。

下面我就把这个过程完整给你“还原一下”——从写到调试，再到输出结果的过程。

以前一直懒得用AI绘制原型，一方面是因为感觉它不够聪明，觉得不了解我们系统的设计风格，很难输出符合预期的结果；另一方面是觉得在现有系统上迭代功能，绘制原型的工作量不大，自己画就画吧，觉得与其投时间“磨刀”，不如直接“砍柴”，本质还是是路径依赖，不愿变化。

昨晚下班时，忙完了一天的工作，又把工作量评估的Skills调整了下，突然就想试下“画原型”的Skills，看看是否如大佬们所说“Coding就是现阶段的通用人工智能”，用HTML轻松绘制出来一个网页。

如何从0到1创建一个画原型的Skills？

前提条件：

• AI工具：Trae国际版（付费模式）。国内版的免费模式也可行，唯一区别是模型不同，效果可能会有差异，但不影响整体使用；
• 背景：基于现有成熟HR SaaS系统，如何快速生成对应原型，而不是面对一个全新系统；

第一步：创建Skills。

我在Trae里输入了下面这句话：

“帮我生成一个Skills，目标是绘制原型，要求是根据附件中所提供的系统截图设计规范、样式、主题颜色，100%还原设计的方式设计原型。”

小提示：原型不是高保真图，这里100%还原目的是给它一个参考，确保原型图跟系统设计规范基本一致，减少后续改动量，适用于已有成熟系统情况下的设计；如果是全新系统，也可以要求它遵循Ant Design风格输出，而不给它系统截图，效果应该也不会太差。

同时，跟提示词一起，附件里附上现有系统的4张截图（重点说三遍，重点说三遍，一定要有截图，它们分别代表：列表页面（如下图）、新增页面、报表页面、排班页面，它们比较典型、常用，目的是让Skills把现有系统的设计规范、样式等写到Skills里，相当于让它学习我们系统的设计规范。

小提示：原计划是把这个提示词截图也贴出来，结果发现昨天晚上的聊天记录，已超过长度被Trae压缩，无法有效找到了。

系统参考图-列表页面

大概1分钟左右，它生成后，你就可以进入调试阶段（是的，不要怀疑，前后不到2分钟就创建了一个画原型的Skills）。

第二步：调试Skills。

这是最关键的环节，创建后，需要你进行调试效果。

你可以注意看下Skills文件里（如下图），它实际把原系统的视觉规范、主题颜色、交互形式，都已写到技能里，相当于完成了“预训练”，确保后续输出原型时，基本符合你们系统规范。

Skills文件的核心示意图

下面让它开始真正干活，我给它输入的提示词是：

“在现有系统功能的基础上（即附件截图），输出两张原型图：图一是在“按周循环”的基础上，新增支持添加多周（最多4周），同时，支持开关控制“自动跳过法定公休日”；图二是新增一种新的循环模板（即按天循环），支持用户配置最多31天，最少1天的循环模板，每天都支持添加班次，并支持开关控制“覆盖已有排班”，支持“法定节假日排班规则”可选“排班”、“跳过”、“顺延”，且提示语图标；支持“法定公休日排班规则”可选“排班”、“跳过”、“顺延”，且提示语图标。”

画原型V1.0

附件里是现有系统的原图（如下图），属于我需要让它修改的原图，它的“按周循环”模式，是不支持多周循环（比如大小周）；也不支持“按天循环”模式。

系统原图

结果，它给我输出了两个全是HTML的代码片段，而不是可预览的原型，这显然不符合预期。

我就跟又它说：

“更新下原型绘制技能，要求是直接输出可预览的html文件，而不是给我一段代码片段。”

完成后，它自动在输出要求里，明确约束了输出HTML的原型文件（如下图），确保输出结果可轻易被预览、使用。

第一次调试

然后把同样提示词再发一遍给它，让它重新执行，完成后，它给了下面两个HTML的原型文件。

第二次调试结果

预览时，发现结果还是不理想，我就又跟它说：

“按天循环的添加模式，建议跟现有系统保持一致（即底部增加添加按钮，超过31天后才隐藏）。同时，法定节假日排班规则跟公休日排班规则，不适合平铺的形式，而是采取下拉单选，让它们跟覆盖已有排班成一行，确保基本的美观度。”

经过这么两轮调试，最终它给我的结果，就已经符合我的预期。

原型1是在原有系统支持“按周循环”的基础上，新增支持“多周循环”模式，而不仅仅是单周循环（如下图）。

原型图2：按周循环支持多周设置

原型2是在原有系统基础上，新增支持“按天循环”模式的原型（如下图）。

原型图1：新增按天循环模式

这个技能从创建到调试完成，最终花了大概不到30分钟。

第三步：复用Skills。

紧接着，我又让它帮我画另一个原型设计图，提示词是：

“在现有“按班组排班”的页面右上角，新增一个“操作”下拉框，支持用户选择“循环排班”、“排班记录”，当点击“排班记录”后，进入一个二级列表页面，列表元素包含：班组名称、开始循环日期、截止循环日期（可不设置，不设置代表无限循环）、循环模板（即关联了哪个循环模板）、操作（编辑、删除）；点击“循环排班”，则弹窗或右侧边抽屉的方式，让用户添加对应循环排班，最上面是一段提示语，下面的元素包含：班组名称（下拉单选，支持用户选择排班班组名称）、开始日期（日期控件，默认是今天，必填）、截止日期（可不填，不填默认就是无截止时间，需要提示语）、循环模板（下拉单选，必填），确定、取消”

新需求绘制

我附件里的系统原图，它的排班页面是没有“操作”相关按钮的（如下图）。

系统原图

大概不到1分钟，它给我输出了两个HTML文件路径，显然跟我预期的三张图不符。

原型V1.0

我就跟它说：

“你好像少了一个页面，就是创建循环排班的页面。”

第一次调试

它并没有直接给我生成三个原型，而是在理解需求的情况下，给我把第三个抽屉弹窗直接内嵌到“创建循环排班HTML”文件里。换句话说，它创建的原型是具有交互能力的原型，而不仅仅是静态图。

第二次调试

对应原型结果如下：

原型-按班组排班-新增操作按钮群

我点击“循环排班”，它自动弹出下面的抽屉页：

循环排班

我点击“排班记录”，它自动跳转至下面页面：

循环排班记录

点击“新建循环排班”，结果它又重复创建了一个对应详情页，跟“循环排班”属于同样功能，却采取不同交互，我就又调试了一下。

重复创建循环排班页面

我给它输入了以下提示词：

“1、“操作按钮”期望不跟“保存”、“班组管理”在一行，而是在它们上一行的右上角（即操作按钮不仅适用于“按组排班”页面）；2、“排班记录”页面属于详情页面，你需要记住我们详情页面是没有左边菜单栏，而是全屏页面的设计规划，麻烦调整下。同时，“新建循环排班”跟“循环排班”是同一个功能，不要单独再创建一个详情页面，而是复用“循环排班”的左侧抽屉即可。”

第三次调试

完成后，已经符合预期，我就直接使用了。

原型-循环排班

原型-排班记录

在“排班记录”页面，点击“新建循环排班”效果如下：

新增循环排班

如何从0到1创建自己的第一个Skills？

第一，选择一款适合自己的入门工具。市面上优秀的AI产品，基本都已支持Skills模式，第一次尝试，推荐用扣子的“扣子编程”，或 Trae IDE 国内版。它们的产品上手容易，成本几乎为零，还有丰富的教程。

第二，梳理自己的工作流，选择一个环节开始。

以产品经理为例，核心工作流可能包括：需求管理 → 需求优先级判断 → 产品规划 → 竞品调研 → 客户需求调研 → 设计产品方案 → 评估工作量 → 画原型 → 写需求文档 → 评审 → 项目进度管理 → 上线 → 上线培训 → 写上线公告 → 收集反馈等。

每个环节都可以设计1-2个SKills，用它来辅助你高效完成对应工作，“贪多嚼不烂”，最理性、最合理的方式，分阶段、分步骤进行改造，核心理念就是“先僵化，后固化，再优化”。

最开始可以选择一个环节，最好符合经常做、重复做、事务性的环节（俗称可标准作业流程（SOP））。比如写需求文档、写上线公告、评估工作量等，或制作50家客户案例等；

第三，必须具备明确的标准。把经验、方法论、流程等，固化为一个个的Skills。

你所选择的环节，需要把过往的经验、流程、方法论等，对应输出为一个Skills，需要你具备定义标准的能力（即判断它的输出是好，是坏，需要你自己有标准）。

• 一份好的需求文档的标准
• 一个好的解决方案的标准
• 一个需求的优先级标准
• 一份竞品调研报告的标准
• 一个需求评估结果的标准

等等。

第四，合理利用参照物。

比如客户案例PPT中，我会提供现有标准的PPT模版，让它100%进行还原；或画原型时，我会提供现有系统的关键页面的截图，让它进行1000%还原等。

当你给它提供一个明确的参照模板时，相当于给对它进行了一次“预训练“，提前学会了对应内容，确保输出结果更符合预期。

小作业

临渊羡鱼，不如退而结网。纸上得来终觉浅，绝知此事要躬行。

无论我如何苦口婆心地说，分享再详细的教程，不如你动手一次。

你准备好写自己的第一个Skills了吗？我很好奇你会选择哪个环节，也期待你分享使用后的感受。