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

如何用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的原型文件。

帐号		自动登录	找回密码
密码			立即注册

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

全部评论 0

热文

微淘公众平台:22个自媒体平台+注册入口226热度

小红书发力店播，谁拿到了红利？225热度

怎么提高四象限图时间管理225热度

巧用视频号分享员玩法，直播流量翻倍221热度

聪明大脑如何匹配现实需求？218热度

《欢乐钓鱼大师》拿下畅销榜TOP6的实力是什么217热度

《庆余年》广告推广为啥这么多解析209热度

抖音生服又出手了，这4条红线千万别碰208热度

“剧王”《庆余年2》：一个超级IP的诞生186热度

千问宣布春节期间已完成2亿笔真实订单178热度

移动飞信晨曦版，联通电信用户可注册175热度

媒体推广渠道40个平台值得收藏173热度

京东2025年营收超1.3万亿活跃用户突破7亿172热度

“狼性”刘强东越来越焦虑了169热度

小崔读书汇抛弃微博去今日头条怎么看168热度

文玩电商头部平台分化剩余玩家面临挑战167热度

内部营销有哪些营销模式165热度

装饰互联网公司是做什么的165热度

TOB客户私域运营渠道整理与反哺163热度

微信朋友圈广告、微信视频号广告投流158热度

所属版块