花了点本领研究了一下，有一些本色很有风趣，共享给天下。

脚色与定位

不同于许多提醒词的单一定位，Claude Design要完成的任务是详细的，是以并未固定为单一脚色。

两个要点：

一方面建树脚色的专科巨擘，另一方面建立陈述关系，防御模子自作东张。

反复强调HTML，HTML是器具亦然托福物，但绪论和输出形状会变化。LLM被赋予的脚色包括：动画师、UX联想师、幻灯片联想师、原型联想师等等。

这安妥Claude Design的定位，通过HTML来终了许多视觉使命。

六步使命流

这份提醒词界说了一个6步使命流

第一步：先问明晰再脱手

提醒词条目AI在初始前必须搞明晰：输出时局、保真度、有盘算数目、敛迹，以及波及的联想系统、UI kit和品牌。

这少量应该是开端于Claude Code的AskUserQuestion tool，亦然Claude Design的中枢体验之一，在初始脱手前，先通过发问来明确需求。

第二步：信得过读完贵府，别假装读过

条目AI探索用户提供的资源。完好阅读联想系统界说以及联系考虑文献。

这少量主如果为了防御AI偷懒。

"如果信得过的数据源就在咫尺，却只是依靠讹诈才略的锤真金不怕火数据悲伤来构建讹诈才略，这种作念法是偷懒的，况兼会产生千人一面的仿成品。"

AI锤真金不怕火数据里见过许多UI，会酿成一种「印象派」的复原方式-节略像，但嗅觉透彻分歧。款式token值分歧，间距分歧，字体weight分歧。唯有信得往日读文献，才气作念到像素级准确。

第三步：制定揣度，不祥建立待办清单

第四步：建立文献夹结构，并把资源复制到刻下目次

第五步：考证闭环-最精密的联想

两层考证（done的console检查+verifier的视觉检查），别离处分不同类型的bug，互不干涉，互不重叠。

第六步：极其节略地讲求，只说明慧事项和下一步

托福圭臬

除了几个旧例的防呆联想，还有几个细节可以说一下。

文献弗成太大。扶助1000行就要拆成多个小文献。这不是代码洁癖，是因为AI修改大文献时更容易出错，小文献更容易定位问题。

播放进程要握久化。但凡幻灯片、视频类的托福物，必须用localStorage保存刻下位置。用户刷新页面后能回到正本的位置。这是一个很小但很关切的章程，诠释提醒词的制定者果然在用这个家具，知说念「迭代过程中时常刷新」是委果场景。

款式弗成已然发明。优先用品牌/联想系统里的款式；如果太受限，用oklch界说协调色；临了才斟酌从零造色。三级优先级写得很明晰，因为AI最容易犯的错即是「以为这个蓝色可以」然后唾手用了一个跟品牌透彻不搭的款式。

先厚实，后输出在向现存UI添加本色时，条目先厚实它的视觉话语，然后再去匹配案牍立场、配色、口吻、悬停和点击景况、动画立场、暗影、卡片、布局模式、密度等。条目AI把不雅察到的东西用想考过程说出来。

不要过度依赖截图Claude更擅长基于代码复刻或裁剪界面，而不是只看截图。条目AI在拿到源数据时，应重心探索代码和联想盘曲文，而不是过度依赖截图。

一些禁用持久不要使用scrollIntoView，它可能滋扰Web讹诈。必要时使用其他DOM改换步调；禁用Emoji，唯有在联想系统自己使用emoji时才用。

使命流以外，How to do design work增强

提醒词里有一段有利说How to do design work，开云·体育(sprot)官方网站有点鞭辟入里的嗅觉。

在我看来这里的本色和前边有些重复，但在和AI相同之后，发现这段是用来增强细节，首要的事情讲三遍，即是这种嗅觉。

再次强调，每次联想任务的输出是一个HTML文献，但这个文献要承载多个有盘算。提醒词把场景分红两类：

纯视觉探索（款式、字体、静态布局）-用design canvas，把多个选项并列摆在一块画布上

交互经过或多有盘算场景-作念成可点击的hi-fi原型，通过Tweaks切换不同版块

明确条目给出3个以上的变体，沿多个维度探索：

先给保守有盘算，再给斗胆有盘算。指标不是给出「最好的阿谁谜底」，而是让用户从变体里找到嗅觉，然后混搭。

把通用联想经过说了一下，此次是5步。

发问。

查找现存UI kit，并网罗盘曲文；复制通盘联系组件，阅读通盘联系示例。如果找不到，商讨用户。

初始写HTML文献时，先写一些假定、盘曲文和联想reasoning，就像你是别称junior designer，而用户是你的manager。先放占位联想。尽早展示文献给用户。

编写React组件并镶嵌HTML文献。尽快再次展示给用户。补盘曲一步漠视。

使用你的器具检查、考证并迭代联想。

条目AI要扎根已有盘曲文，不要从零初始。必须先找到现成的UI kit、联想系统、不祥截图，然后「活在这个品牌的视觉话语里」作念联想。如果找不到，要主动问用户要。虚构生成的UI不管多缜密，跟委果家具放在全部齐会衰颓逊色。

给模子的一些tips：

CSS、HTML、JS和SVG尽头雄伟。用户世俗不知说念它们能作念到什么。给用户惊喜。

如果莫得图标、钞票或组件，就画占位符。在高保真联想里，占位符比灾祸地硬画委果本色更好。

那些「退却」清单：被踩过的坑

提醒词有一段「反AI俗套」的章程，列了一堆退却事项：

不要用渐变配景

不要用emoji（除非品牌本来就用）

不要作念「圆角+左边框accent色」的卡片

不要用SVG画插图（用占位符代替）

不要反复用Inter、Roboto、Arial

这些禁令背后的逻辑是：AI的锤真金不怕火数据里充满了立场重迭的UI，这些元素在数据里出现频率极高，是以AI会不自愿地反复输出。不显式退却，就会握续看到归并套「AI联想感」。

问问题的艺术：为什么条目至少问10个问题？

提醒词在商讨用户问题这件事上尽头执着，有单唯一节有利明确发问这个事，致使章程了最低数目：10个

这乍看很蠢-10个问题，用户不烦死？

但背后的逻辑是：AI的默许倾向是少问多作念。问少了显得更「高效」更「干练」，用户短期体验更好。但联想使命的返工老本极高。一朝标的错了，背面作念的通盘事情齐要重来。

10个问题的章程，是在用数字下限抗争模子的短期趋奉倾向。

skill部分

Claude Design领有以下内置手段

手段 用途 Animated video 基于本领线的动效联想 Interactive prototype 带委果交互的讹诈 Make a deck HTML幻灯片演示 Make tweakable 添加联想内Tweak控件 Frontend design 莫得现存品牌系统时细目审好意思标的 Wireframe 用线框图和故事板探索多种想法 Export as PPTX(editable) 导出原生文本和时局，可在PowerPoint中裁剪 Export as PPTX(screenshots) 导出扁平截图，像素准确但不可裁剪 Create design system 创设立计系统或UI kit Save as PDF 导出印刷级PDF Save as standalone HTML 导出可离线使命的单文献HTML Send to Canva 导出为可裁剪Canva联想 Handoff to Claude Code 生成诱惑派遣包

临了：这份提醒词可以怎么用

这份系统提醒词的限定密度很高，内部有许多Claude团队的最好试验，有使命流，也要许多避坑的认识，你可以去原版多看几遍，查缺补漏开云体育，也可以让AI把这些限定提纯一下，算作你以后作念Design的限定，不祥skill。