用 Claude 产出高品质 UI 的 10 条规则

用 Claude 产出高品质 UI 的 10 条规则 用 Claude 产出高品质 UI 的 10 条规则 Modified June 18 规则 4：加入吸附点。磁性吸附就是免费的触觉反馈。 硬件能给你触觉点击。在网页上，你可以用吸附点伪造同样的满足感：当手柄接近一个有意义的值，比如月份边界或预设值，它会轻轻被吸过去。 让它感觉真实的诀窍在于双区域系统：一个紧密的吸附区用于吸附，一个较大的释放区用于脱离。一旦吸附到位，你必须用力才能拉开。当它吸附住时，我会让标签短暂闪烁一下以提供反馈。那种微小的阻力在潜意识里被解读为品质。 提示词写法：“在[这些值]处添加磁吸点。使用较小的吸附区域和较大的释放区域，使其能够锁定并保持稳定，吸附时闪烁标签。” 规则 5：入场要带模糊清晰化，不能只是淡入。 普通淡入是最常见、也最不高级的入场方式。我的入场几乎总是结合三件事：透明度、小幅上移，以及一点逐渐清除的模糊。 Code block Plain Text Copy opacity: 0 到 1 translateY: 6px 到 0 filter: blur(2px) 到 blur(0) duration: 约 280ms，使用 ease smooth 请注意，这里没有新的缓动效果：曲线只是规则 1 中的平滑预设。这就是动画集的意义所在：你只需定义一次感觉，所有的入场、悬停和显示效果都会继承它。模糊效果是其中的秘密成分。它让内容感觉像是聚焦到位，而不是突然出现。 提示词写法：“入场效果 = 淡入 + 6px上升 + 2px模糊消散，在平滑曲线上约320ms。” Figma 准备：明确设计“之前”的帧（偏移量加上模糊效果），这样任何阅读文件的人都能看到运动意图。 规则 6：单个阴影只是贴纸。真正的深度是分层光线。 一个扁平的单层模糊阴影，会立刻暴露问题。物理物体会同时投下好几层阴影：贴近表面的细线、紧贴接触处的阴影，以及宽而柔和的环境阴影。我会保留两个标准预设，并在所有东西上复用。 日常卡片，也就是放在表面上的面板： Code block CSS Copy shadow card: 0 1px 2px rgba(0, 0, 0, 0.05), / 近处投影 / 0 2px 4px rgba(0, 0, 0, 0.02), / 柔和扩散 / 0 0 0 0.5px rgba(0, 0, 0, 0.08); / 发丝线光环，不是边框 / 增强版（模态框、悬浮卡片）。理念相同，但层次更多： Code block CSS Copy shadow elevated: 0 4px 8px rgba(0, 0, 0, 0.02), / 扩散 / 0 8px 12px rgba(0, 0, 0, 0.02), / 宽环境光 / 0 2px 4px rgba(0, 0, 0, 0.02), / 中层 / 0 1px 2px rgba(0, 0, 0, 0.04), / 接触阴影 / 0 0 0 0.5px e0e0e0; / 发丝线光环 / 有三个因素让这些看起来真实，而不是“默认的材质高度”： • 用发丝线光环替代边框。 这是手工制作 UI 最显著的特征。边缘由光定义，而不是由 1px 描边定义。 • 透明度保持极低，大约 2% 到 8%。 重阴影会显得廉价。深度是许多微弱层的总和，不是一个深色阴影。 • 叠加多个不同大小的模糊。 紧密的一层用于接触边缘，宽而柔的一层用于环境扩散。众多微弱图层的重叠才呈现出真实的深度，绝不是单一的模糊效果。 提示词写法：“不要用单个投影。用发丝线光环替代边框，再叠加一个紧贴接触处的阴影和一个宽而柔和的环境阴影，所有透明度都很低（2% 到 8%）。使用 0 1px 2px rgba(0,0,0,0.05)、0 2px 4px rgba(0,0,0,0.02)、0 0 0 0.5px rgba(0,0,0,0.08)，并在悬停时让整个阴影栈一起动画。” 规则 7：让一切都有触感。按下去应该能被感觉到。 每个交互元素都要有按压反馈。我的默认设置是在按压时进行细微的缩小： Code block CSS Copy .button:active { transform: scale(0.98); } 缩放至0.98而非0.9，这样交互反馈是扎实按压效果，而非塌陷效果。按钮、色卡、标签页、底部栏行，所有可交互组件均采用该参数。搭配悬停状态动效，以及采用模糊渐显+上浮动画（而非瞬间弹出）的提示气泡，整套界面触摸交互手感会十分灵敏。 提示词写法：“每个可点击元素在按下时都会使用快速持续时间略微缩小（至98%）。工具提示会淡入、上升4px并消除2px的模糊效果，不会立即出现。” 规则 8：用正确方式显现高度。不要用假的展开技巧。 使用最大高度 9999px 来实现展开/折叠动画会出现抖动，且时间计算错误。简洁现代的技术是对 CSS 网格行进行动画处理：： Code block CSS Copy .reveal { display: grid; grid template rows: 0fr; transition: grid template rows .22s var( ease smooth); } .reveal[data open="true"] { grid template rows: 1fr; } .reveal { overflow: hidden; } 它会平滑地过渡到内容的实际高度，毫无瑕疵，无需猜测。对于在布局中移动的元素（例如卡片飞入不同的容器），请使用“先→后→反转→播放”技术（FLIP）：测量其起始位置，测量其结束位置，在视觉上让它跳回起始位置，然后再过渡到结束位置。它看起来无比流畅，而这仅仅需要两次位置测量。 提示词写法：“使用 grid template rows: 0fr 到 1fr 技术来实现展开/折叠，而不是使用最大高度的技巧。对于在容器之间移动的卡片，使用 FLIP（First Last Invert Play）动画。” 规则 9：尊重性能和可访问性，否则就不够完善。 优化包括那些偏好较少动画的用户。我发布的每个动画系统都会尊重减少动画的无障碍设置。动画会简化为瞬间完成，装饰性循环会完全停止。 为了实现流畅的60帧每秒播放，应优先使用轻量级属性、移动和不透明度，而不是像阴影堆叠和高度显示这样的重量级属性。这些较重的效果在小而刻意的时刻是值得的；只是不要在长列表或大界面上对它们进行动画处理。 提示词写法：“在任何地方都尊重减少动态效果的偏好设置。对于长列表或大面积区域中的任何内容，优先使用移动和淡入淡出效果。” 规则 10：状态驱动设计才是真正的工作。 这是没人告诉你的那条，也是最重要的一条。组件不是一张图。组件是一套状态系统。 按钮不是“一个按钮”，它是 idle / hover / pressed / loading / disabled / success。 真正的洞察是：在开始构建之前，你可能并不清楚所有需要的状态。Figma 概念图看起来总是很完善。然后你开始构建，拖动某个元素，马上就会感觉到其中的漏洞：“这里需要一个工作状态”，“数字应该滚动，而不是切换”，“这个标签在忙碌时应该闪烁”，“图标在播放和暂停之间应该交叉淡入淡出”。这些微交互是在使用过程中发现的，而不是事先就规划好的。以下是直接来自构建过程而非设计过程的例子： • 数字逐位滚动，而不是硬切。 • 任务运行时，标签上有一道微光扫过。 • 播放/暂停图标相互淡入淡出并缩放，而非直接切换。 提示词写法：“在它运行时，不要添加加载指示器。让标签文本本身柔和地发光，就像一道光从一侧缓慢扫过文字再回到另一侧，大约每2秒循环一次。它应该给人一种平静而充满活力的感觉，而不是华而不实。” Figma 准备：为已知的状态使用组件变体。然后接受这样一个事实，即构建过程中还会出现两三种状态，而这正是打磨的关键所在。这是区分模型和产品的规则，所以请将其作为贯穿上述所有九个方面的思维方式。 实际该怎么写提示词 • 给数字，不要给形容词。 “顺滑”没有意义；280ms 的具体曲线才可构建。 • 从设计 token 开始。 先粘贴变量块，并禁止一次性数值。 • 先思考状态，再把它们列出来。 模型会精确构建你命名的状态，不会多建。 • 迭代时隔离变量。 “现在只调阴影栈。”“现在只调入场。”一次调整一个变量，这样才能在不折腾的情况下达到完美。 • 描述感觉，并给参考。 “应该感觉像一个iOS的工作表：沉重，稍微有弹性，稳定得很快。”带参考锚点的请求，比抽象请求更容易落地。 • 从 Figma 交接时，为每个要复制的属性命名。将其指向当前选择的内容，并列出要从中读取的内容：内边距、间隙、标记、颜色、圆角半径、字号和字重。永远不要假定交接工具能自行完美地处理所有内容。 关于 Figma Figma是概念的发源地，值得提前做好准备：镜像你的设计标记的变量、自动布局、已知状态的变体。但要诚实地认识到它的局限性：一个Figma文件只是一种假设。真正的状态、微交互、需要滚动、闪烁或捕捉点的时刻，只有在你操作实际的东西并拖动它时才会显现出来。设计告诉你从哪里开始。开发则告诉你它实际需要什么。 如果你通过Figma MCP交付设计，千万不要以为它会自动完美落地。它不会的。我一直做的是将其指向当前的Figma选择，然后在提示中详细列出我希望它继承的每一个属性：确切的内边距、间隙、设计标记、颜色、圆角半径、字体大小和粗细。不要让它有解释的空间。列出组件可以设置样式的每一个视觉属性，并告诉模型将每个属性与选择的内容进行匹配。你对从设计中读取的内容越明确，第一次开发就越接近预期，之后你手动调整的工作量就越少。 模型给不了你的部分 所有这些背后都有一个事实。Claude、Codex、Cursor，这些模型都很强。它们可以比任何人手写都更快地构建一个完美的弹簧动画或卡片飞行动画。但没有一个模型会自己决定按压应该是 98%，而不是 95%。没有一个模型知道入场需要 2px 模糊，或者滑块的释放区应该比吸入区更大，也没有一个模型会在你感到缺口之前知道这个特定组件少了工作中状态。 这种判断力就是品味，而品味是通过实践获得的：从实际操作中，从凝视那些感觉几乎完美但知道如何改进的事物中，从多年来留意为何一种互动令人愉悦而另一种却不然的过程中获得。模型只是工具，眼光仍然属于你自己。这就是全部的技巧，也正是为什么两个使用相同工具的人会做出截然不同的作品。 提示词可以在几分钟内把你带到 90%。最后 10%，也就是人们真正会称赞的部分，是你。 如果这些内容对你有帮助，欢迎点赞、转发或关注。以后我会继续分享类似的拆解和文章。 规则 4：加入吸附点。磁性吸附就是免费的触觉反馈。 硬件能给你触觉点击。在网页上，你可以用吸附点伪造同样的满足感：当手柄接近一个有意义的值，比如月份边界或预设值，它会轻轻被吸过去。 让它感觉真实的诀窍在于双区域系统：一个紧密的吸附区用于吸附，一个较大的释放区用于脱离。一旦吸附到位，你必须用力才能拉开。当它吸附住时，我会让标签短暂闪烁一下以提供反馈。那种微小的阻力在潜意识里被解读为品质。 提示词写法：“在[这些值]处添加磁吸点。使用较小的吸附区域和较大的释放区域，使其能够锁定并保持稳定，吸附时闪烁标签。” 规则 5：入场要带模糊清晰化，不能只是淡入。 普通淡入是最常见、也最不高级的入场方式。我的入场几乎总是结合三件事：透明度、小幅上移，以及一点逐渐清除的模糊。 请注意，这里没有新的缓动效果：曲线只是规则 1 中的平滑预设。这就是动画集的意义所在：你只需定义一次感觉，所有的入场、悬停和显示效果都会继承它。模糊效果是其中的秘密成分。它让内容感觉像是聚焦到位，而不是突然出现。 提示词写法：“入场效果 = 淡入 + 6px上升 + 2px模糊消散，在平滑曲线上约320ms。” Figma 准备：明确设计“之前”的帧（偏移量加上模糊效果），这样任何阅读文件的人都能看到运动意图。 规则 6：单个阴影只是贴纸。真正的深度是分层光线。 一个扁平的单层模糊阴影，会立刻暴露问题。物理物体会同时投下好几层阴影：贴近表面的细线、紧贴接触处的阴影，以及宽而柔和的环境阴影。我会保留两个标准预设，并在所有东西上复用。 日常卡片，也就是放在表面上的面板： 增强版（模态框、悬浮卡片）。理念相同，但层次更多： 有三个因素让这些看起来真实，而不是“默认的材质高度”： • 用发丝线光环替代边框。 这是手工制作 UI 最显著的特征。边缘由光定义，而不是由 1px 描边定义。 • 透明度保持极低，大约 2% 到 8%。 重阴影会显得廉价。深度是许多微弱层的总和，不是一个深色阴影。 • 叠加多个不同大小的模糊。 紧密的一层用于接触边缘，宽而柔的一层用于环境扩散。众多微弱图层的重叠才呈现出真实的深度，绝不是单一的模糊效果。 提示词写法：“不要用单个投影。用发丝线光环替代边框，再叠加一个紧贴接触处的阴影和一个宽而柔和的环境阴影，所有透明度都很低（2% 到 8%）。使用 0 1px 2px rgba(0,0,0,0.05)、0 2px 4px rgba(0,0,0,0.02)、0 0 0 0.5px rgba(0,0,0,0.08)，并在悬停时让整个阴影栈一起动画。” 规则 7：让一切都有触感。按下去应该能被感觉到。 每个交互元素都要有按压反馈。我的默认设置是在按压时进行细微的缩小： 缩放至0.98而非0.9，这样交互反馈是扎实按压效果，而非塌陷效果。按钮、色卡、标签页、底部栏行，所有可交互组件均采用该参数。搭配悬停状态动效，以及采用模糊渐显+上浮动画（而非瞬间弹出）的提示气泡，整套界面触摸交互手感会十分灵敏。 提示词写法：“每个可点击元素在按下时都会使用快速持续时间略微缩小（至98%）。工具提示会淡入、上升4px并消除2px的模糊效果，不会立即出现。” 规则 8：用正确方式显现高度。不要用假的展开技巧。 使用最大高度 9999px 来实现展开/折叠动画会出现抖动，且时间计算错误。简洁现代的技术是对 CSS 网格行进行动画处理：： 它会平滑地过渡到内容的实际高度，毫无瑕疵，无需猜测。对于在布局中移动的元素（例如卡片飞入不同的容器），请使用“先→后→反转→播放”技术（FLIP）：测量其起始位置，测量其结束位置，在视觉上让它跳回起始位置，然后再过渡到结束位置。它看起来无比流畅，而这仅仅需要两次位置测量。 提示词写法：“使用 grid template rows: 0fr 到 1fr 技术来实现展开/折叠，而不是使用最大高度的技巧。对于在容器之间移动的卡片，使用 FLIP（First Last Invert Play）动画。” 规则 9：尊重性能和可访问性，否则就不够完善。 优化包括那些偏好较少动画的用户。我发布的每个动画系统都会尊重减少动画的无障碍设置。动画会简化为瞬间完成，装饰性循环会完全停止。 为了实现流畅的60帧每秒播放，应优先使用轻量级属性、移动和不透明度，而不是像阴影堆叠和高度显示这样的重量级属性。这些较重的效果在小而刻意的时刻是值得的；只是不要在长列表或大界面上对它们进行动画处理。 提示词写法：“在任何地方都尊重减少动态效果的偏好设置。对于长列表或大面积区域中的任何内容，优先使用移动和淡入淡出效果。” 规则 10：状态驱动设计才是真正的工作。 这是没人告诉你的那条，也是最重要的一条。组件不是一张图。组件是一套状态系统。 按钮不是“一个按钮”，它是 idle / hover / pressed / loading / disabled / success。 真正的洞察是：在开始构建之前，你可能并不清楚所有需要的状态。Figma 概念图看起来总是很完善。然后你开始构建，拖动某个元素，马上就会感觉到其中的漏洞：“这里需要一个工作状态”，“数字应该滚动，而不是切换”，“这个标签在忙碌时应该闪烁”，“图标在播放和暂停之间应该交叉淡入淡出”。这些微交互是在使用过程中发现的，而不是事先就规划好的。以下是直接来自构建过程而非设计过程的例子： • 数字逐位滚动，而不是硬切。 • 任务运行时，标签上有一道微光扫过。 • 播放/暂停图标相互淡入淡出并缩放，而非直接切换。 提示词写法：“在它运行时，不要添加加载指示器。让标签文本本身柔和地发光，就像一道光从一侧缓慢扫过文字再回到另一侧，大约每2秒循环一次。它应该给人一种平静而充满活力的感觉，而不是华而不实。” Figma 准备：为已知的状态使用组件变体。然后接受这样一个事实，即构建过程中还会出现两三种状态，而这正是打磨的关键所在。这是区分模型和产品的规则，所以请将其作为贯穿上述所有九个方面的思维方式。 实际该怎么写提示词 • 给数字，不要给形容词。 “顺滑”没有意义；280ms 的具体曲线才可构建。 • 从设计 token 开始。 先粘贴变量块，并禁止一次性数值。 • 先思考状态，再把它们列出来。 模型会精确构建你命名的状态，不会多建。 • 迭代时隔离变量。 “现在只调阴影栈。”“现在只调入场。”一次调整一个变量，这样才能在不折腾的情况下达到完美。 • 描述感觉，并给参考。 “应该感觉像一个iOS的工作表：沉重，稍微有弹性，稳定得很快。”带参考锚点的请求，比抽象请求更容易落地。 • 从 Figma 交接时，为每个要复制的属性命名。将其指向当前选择的内容，并列出要从中读取的内容：内边距、间隙、标记、颜色、圆角半径、字号和字重。永远不要假定交接工具能自行完美地处理所有内容。 关于 Figma Figma是概念的发源地，值得提前做好准备：镜像你的设计标记的变量、自动布局、已知状态的变体。但要诚实地认识到它的局限性：一个Figma文件只是一种假设。真正的状态、微交互、需要滚动、闪烁或捕捉点的时刻，只有在你操作实际的东西并拖动它时才会显现出来。设计告诉你从哪里开始。开发则告诉你它实际需要什么。 如果你通过Figma MCP交付设计，千万不要以为它会自动完美落地。它不会的。我一直做的是将其指向当前的Figma选择，然后在提示中详细列出我希望它继承的每一个属性：确切的内边距、间隙、设计标记、颜色、圆角半径、字体大小和粗细。不要让它有解释的空间。列出组件可以设置样式的每一个视觉属性，并告诉模型将每个属性与选择的内容进行匹配。你对从设计中读取的内容越明确，第一次开发就越接近预期，之后你手动调整的工作量就越少。 模型给不了你的部分 所有这些背后都有一个事实。Claude、Codex、Cursor，这些模型都很强。它们可以比任何人手写都更快地构建一个完美的弹簧动画或卡片飞行动画。但没有一个模型会自己决定按压应该是 98%，而不是 95%。没有一个模型知道入场需要 2px 模糊，或者滑块的释放区应该比吸入区更大，也没有一个模型会在你感到缺口之前知道这个特定组件少了工作中状态。 这种判断力就是品味，而品味是通过实践获得的：从实际操作中，从凝视那些感觉几乎完美但知道如何改进的事物中，从多年来留意为何一种互动令人愉悦而另一种却不然的过程中获得。模型只是工具，眼光仍然属于你自己。这就是全部的技巧，也正是为什么两个使用相同工具的人会做出截然不同的作品。 提示词可以在几分钟内把你带到 90%。最后 10%，也就是人们真正会称赞的部分，是你。 如果这些内容对你有帮助，欢迎点赞、转发或关注。以后我会继续分享类似的拆解和文章。 原帖链接：https://x.com/kvnkld/status/2066863634949779464 原帖链接：https://x.com/kvnkld/status/2066863634949779464 大家一直在问，我发的 UI 组件为什么最后看起来这么精致，或者我到底用了什么提示词。这里把最重要的东西拆开讲。 精致感不是一个可以直接通过提示词点出来的功能。你不能输入“做得高级一点、顺滑一点”，然后就得到结果。模型是一双极其出色的手，但品味、规则，以及那一百个微小决策，仍然属于你。下面是我自己使用的系统，也是我一直分享的那些组件里内置的同一套规则。可以全部拿去用。 我会用三种方式讲每条规则：规则本身、如何写提示词，以及在相关情况下如何提前在 Figma 里准备。 规则 1：Easing决定一切。默认 ease 禁用。 “这是 LLM 做的”和“这是有品味的人做的”之间，最大的单一区别就是缓动曲线：运动如何开始、如何加速、如何落稳。浏览器内置默认值（ease、ease in out）会立刻显得很泛。我从不用它们。 我会保留一套自己的缓动变量，并在每个项目里复用： 这些数字并不神圣，它们是靠感觉调出来的。我对每一个参数都进行了微调，直到按压、显示和进入的感觉都让我觉得恰到好处。这种调整就是工作。哪怕曲线偏差0.02，也会让人隐隐觉得不对劲，即便你说不出原因。 提示词写法：永远不要说“平滑”。给出确切的曲线：“所有过渡都使用 cubic bezier(0.22, 1, 0.36, 1)，对于任何突然出现的元素，比如带有轻微弹跳效果出现的徽章，使用轻微过冲曲线 cubic bezier(0.35, 1.55, 0.65, 1)”。精确性才是关键。 规则 2：在构建任何组件之前，先定义设计系统变量。 精致感读起来就是一致性。一致性来自共享词汇，也就是你的设计 token。在任何组件之前，我会先定义颜色、圆角、时长、运动曲线和阴影栈变量。之后每个状态、悬停和深色模式变体，都从同一组变量里取值。 一旦这些规范存在，模型就会停止凭空创造一次性的13px圆角半径值和随机的0.3s时间设置。整个UI就会变得协调一致。 提示词写法：先把变量块交给模型，然后说：“只使用这些 token，不要使用一次性数值。” 这一条指令会消灭 80% 的“AI 味”。 Figma 准备：建立和设计 token 一一对应的 Figma 变量，名称也保持一致。这样设计到构建就是转换适配，而非重新创作。 规则 3：任何可拖拽元素都要使用真实物理感，不要只用简单淡入和滑动。 拖拽手柄上的基础定时动画会显得死板。真实界面有动量、摩擦和阻力。 三个东西会让拖拽有生命： 1. 追踪用户移动速度，并随时间平滑处理，这样快速甩动才会有重量。 2. 释放后的动量。 继续移动，然后逐渐慢下来直到停住，像有东西在桌面上滑行。 3. 柔和边界。 撞到边缘时不要硬停。让它稍微拉伸，再弹回来。这一细微的触感就是“网页滑块”和“iOS”的区别所在。 对于无法用简单时长进行动画处理的值（计数器、实时数字），我使用弹簧动画，根据运动应有的刚度、弹性和重量进行调整，而不是固定的时间。 提示词写法：忘掉术语，只需描述它应该给人的感觉：“让滑块感觉像一个真实的物理对象，而不是网页输入框。当我轻弹它时，它应该继续滑动，并自行慢慢滑行停止，就像在桌子上滑动某个东西一样。当它碰到边缘时，它不应该突然停止，而应该稍微拉伸一下再弹回来。”模型已经了解物理原理。它只需要知道你希望它给人的感觉。