加载中

基于真实组件的可点击原型

基于您真实组件库构建的可点击 HTML 原型。

15 分钟设计Claude Cowork
加载中

设置

试用插件

Design 插件自带已配置好的 /design-handoff,可以读取流程描述和组件库,并生成一个已连接好交互的可点击 HTML 构建。如果您的管理员负责管理插件,而该插件尚不可用,请跳过此步骤;下面的内容都不需要它。

DesignAccelerate design workflows — critique, design system management, UX writing, accessibility audits, research synthesis, and dev handoff. From exploration to pixel-perfect specs.
添加
/design-handoffGenerate developer handoff specs from a design.
在 Cowork 中打开
/ux-copyWrite or review UX copy — microcopy, error messages, empty states, CTAs.
在 Cowork 中打开

连接您的工具

当 Claude Cowork 直接与您的系统协作时,它会更加强大。您可以控制权限和访问。了解工具访问权限。

在 Cowork 中导航到自定义 → 连接器进行设置。

Figma
读取已发布的组件和变量,以便原型使用真实的组件库。
连接
GitHub
拉取设计系统包,使生成的标记与工程团队发布的内容保持一致。
连接
Google Drive可选
读取流程描述,并将原型链接写回项目文档。
连接

设置您的工作文件夹

将您要使用的文件(流程描述或规格说明、组件库导出文件、您的 tokens、示例内容)拖到您机器上的一个文件夹中,然后让 Cowork 指向该文件夹。Cowork 会从中读取内容,并将原型 HTML 写回到一个子文件夹中。如果您经常制作原型,可以从该文件夹创建一个 Cowork 项目,这样您的组件库和约定就会一直保留。

Prototypes / Invite-Flow
invite-flow-spec.docxApr 26, 202631 KB
tokens.jsonApr 20, 202618 KB
design-system.cssApr 20, 2026142 KB
在 Cowork’s 聊天栏中:Prototypes / Invite-Flow

提示

将此内容复制到 Claude Cowork 中

构建此文件夹中流程的可点击 HTML 原型,仅使用我们设计系统库中的组件。连接好导航,使用真实的占位数据,并将其写入 prototype/index.html,以便我可以在浏览器中点击浏览。

Prototypes / Invite-Flow

为什么这样有效

提示词

将其限制在您自己的素材范围内。 不要凭空设计 UI;一切都要对应到真实的组件库。

提示词

描述每个交互应该做什么。 点击要真正产生跳转;用户测试的是一个流程,而不是图片。

提示词

要求提供真实的示例内容。 不要用 lorem ipsum 占位文本;屏幕内容要读起来像真正的产品。

来源

直接提供源文件。 Tokens 和 CSS 会原样进入原型。

获得更好的草稿

练习

添加一个示例以供参照。 将您喜欢的示例放入文件夹,Cowork 会匹配您的结构和风格。

练习

要求它标记不确定的地方。 添加"标记出你不确定的任何内容",这样您在审阅草稿时就知道先看哪里。

让 Cowork 为您所用

插件中的 /design-handoff 只是一个通用的起点。一旦第 2 步生成了一个您真正会拿给参与者看的构建版本,就告诉 Cowork 写出您自己的技能版本。加入您的组件命名方式、您的数据样例、您的交互约定,以及您的原型一直所在的外层页面。只需几分钟的对话,此后该技能就会按照您的标准运行。

把我们在这个任务中目前所做的内容做成一个技能,或者根据我的反馈编辑 /design-handoff 技能。

Prototypes

让它可重复执行

以 artifact 形式分享

需要通过邮件传来传去的原型很快就会过时。让 Cowork 将其发布为 artifact,这样每位审阅者和测试参与者都只需一个链接——重新运行该技能(或将其设为定时任务)即可刷新。

将该原型发布为 artifact。在角落添加一个小的"v2、v3"版本标记。

Prototypes / Invite-Flow

每次规格变更时重新构建

规格一旦变动,原型应该自动跟进,而不需要您再提出请求。在提示中输入 /schedule,或在 Cowork 侧边栏中打开已计划,将自定义技能设置为每天早上根据文件夹中的内容重新构建。

/schedule 工作日每天早上 7 点,检查 Prototypes/Invite-Flow 是否有变更,并重新运行 /design-handoff,重新构建 prototype/index.html 并更新版本标记。

Prototypes
定时任务活跃
每日原型重建

每个工作日早上 7 点,检查项目文件夹中规格或组件库是否有变更,重新运行 /design-handoff,并以更新后的版本标记重新构建可点击的 HTML。

工作日早上 7 点 · 检查 Prototypes/Invite-Flow 是否有变更在 Cowork 中打开

与您的团队成员分享

您自定义的 /design-handoff 现在已经带有您的组件映射、您的数据样例,以及您的外层页面。分享它,让团队中的任何设计师都能以同样的方式从规格说明走到可点击的构建版本,概念测试也不再需要等待那个懂得手动连接框架的人。

早期概念测试会有什么变化