设置
试用插件
Design 插件自带已配置好的 /design-handoff,可以读取流程描述和组件库,并生成一个已连接好交互的可点击 HTML 构建。如果您的管理员负责管理插件,而该插件尚不可用,请跳过此步骤;下面的内容都不需要它。
/design-handoffGenerate developer handoff specs from a design./ux-copyWrite or review UX copy — microcopy, error messages, empty states, CTAs.连接您的工具
当 Claude Cowork 直接与您的系统协作时,它会更加强大。您可以控制权限和访问。了解工具访问权限(在新标签页中打开)。
在 Cowork 中导航到自定义 → 连接器进行设置。
设置您的工作文件夹
将您要使用的文件(流程描述或规格说明、组件库导出文件、您的 tokens、示例内容)拖到您机器上的一个文件夹中,然后让 Cowork 指向该文件夹。Cowork 会从中读取内容,并将原型 HTML 写回到一个子文件夹中。如果您经常制作原型,可以从该文件夹创建一个 Cowork 项目(在新标签页中打开),这样您的组件库和约定就会一直保留。
提示
将此内容复制到 Claude Cowork 中
构建此文件夹中流程的可点击 HTML 原型,仅使用我们设计系统库中的组件。连接好导航,使用真实的占位数据,并将其写入 prototype/index.html,以便我可以在浏览器中点击浏览。
为什么这样有效
将其限制在您自己的素材范围内。 不要凭空设计 UI;一切都要对应到真实的组件库。
描述每个交互应该做什么。 点击要真正产生跳转;用户测试的是一个流程,而不是图片。
要求提供真实的示例内容。 不要用 lorem ipsum 占位文本;屏幕内容要读起来像真正的产品。
直接提供源文件。 Tokens 和 CSS 会原样进入原型。
获得更好的草稿
添加一个示例以供参照。 将您喜欢的示例放入文件夹,Cowork 会匹配您的结构和风格。
要求它标记不确定的地方。 添加"标记出你不确定的任何内容",这样您在审阅草稿时就知道先看哪里。
让 Cowork 为您所用
插件中的 /design-handoff 只是一个通用的起点。一旦第 2 步生成了一个您真正会拿给参与者看的构建版本,就告诉 Cowork 写出您自己的技能版本。加入您的组件命名方式、您的数据样例、您的交互约定,以及您的原型一直所在的外层页面。只需几分钟的对话,此后该技能就会按照您的标准运行。
把我们在这个任务中目前所做的内容做成一个技能,或者根据我的反馈编辑 /design-handoff 技能。
让它可重复执行
以 artifact 形式分享
需要通过邮件传来传去的原型很快就会过时。让 Cowork 将其发布为 artifact,这样每位审阅者和测试参与者都只需一个链接——重新运行该技能(或将其设为定时任务)即可刷新。
将该原型发布为 artifact。在角落添加一个小的"v2、v3"版本标记。
每次规格变更时重新构建
规格一旦变动,原型应该自动跟进,而不需要您再提出请求。在提示中输入 /schedule,或在 Cowork 侧边栏中打开已计划,将自定义技能设置为每天早上根据文件夹中的内容重新构建。
/schedule 工作日每天早上 7 点,检查 Prototypes/Invite-Flow 是否有变更,并重新运行 /design-handoff,重新构建 prototype/index.html 并更新版本标记。
每个工作日早上 7 点,检查项目文件夹中规格或组件库是否有变更,重新运行 /design-handoff,并以更新后的版本标记重新构建可点击的 HTML。
与您的团队成员分享
您自定义的 /design-handoff 现在已经带有您的组件映射、您的数据样例,以及您的外层页面。分享它,让团队中的任何设计师都能以同样的方式从规格说明走到可点击的构建版本,概念测试也不再需要等待那个懂得手动连接框架的人。