TypeUI 微交互：113 个 AI 就绪的 UI 交互提示（Show HN 评论）

TypeUI 发布了一个包含 113 个交互式 UI 微交互模式的目录，每个模式都配有一个可复制的实现提示，旨在交给 AI 编码助手。Show HN 帖子获得了 50 分和 20 条评论，讨论中的主要观点是这些示例看起来很有前景，但发布时缺乏设计型产品所期望的精致度。

该目录位于 typeui.sh/micro-interactions，分为 12 个组件类别。它既是一个提示库，也是一个组件画廊：每个条目都展示了一个实时行为，并提供了一个可复制的实现提示。

TypeUI 的微交互库实际包含的内容

TypeUI 的微交互页面列出了 113 个交互式示例，按 UI 界面分组。每个示例都提供了实时预览和可复制的生成实现提示，以“TypeUI Creative”为名进行营销。

页面上的 12 个类别是：

• 按钮 — 确认、撤销、复制反馈、加载状态、上传进度，包括按住 1.2 秒确认的模式。
• 输入框 — 密码可见性、自动保存、验证、格式化、字符计数和建议，包括一个电子邮件域名建议，提示“您是指 gmail.com 吗？”以及大写锁定检测开关。
• 选择控件 — 复选框、切换开关和单选按钮，用于显示设置、更新总计、筛选结果以及启用或禁用操作（例如，读取、编辑和管理权限单选按钮）。
• 模态框 — 确认、验证、拖动关闭和未保存更改处理，强调键盘焦点保持。
• 抽屉 — 边缘手势、关联背景和扩展面板，提供指针和键盘替代方案。
• 工具提示 — 悬停卡片、链接预览和共享悬停延迟。
• 通知 — 撤销操作、异步结果和滑动关闭。
• 步骤导航 — 进度、验证、返回已完成步骤和剩余时间（例如，“剩余时间 2 分钟”）。
• 列表 — 重新排序、固定、归档、插入和预览项目。
• 滑块 — 范围选择、吸附点、工具提示、擦洗和前后对比，包括在 0、25、50、75 和 100 处定义的停止点。
• 卡片 — 展开详情、翻转内容、显示操作、滑动和共享元素过渡。

评论者确认这些模式有用，但尚未达到生产就绪

在 Hacker News 上测试过这些示例的评论者报告了具体的行为错误，而不是风格上的分歧，这使得批评异常具体。

评论者 pftburger 称赞了几个效果——操作滑出、墙壁揭示和滑出揭示——然后列出了缺陷：

交换图标状态主题预览切换器会级联元素亮度，而不是让它们一起淡出。

确认揭示的弹簧在每第三或第四次点击时出现问题，这很奇怪。

卡片：堆叠卡片循环。当您点击“下一步”时，它不会抽出最上面的卡片。

共享元素展开选项：当您最小化时，弹簧阻尼将组件推出容器外部。

滑动关闭导致容器暂时显示滚动条。

评论者 cosmotic 在前几个示例中指出了三个交互设计问题：

心形图标的切换动画在添加和移除时移动方向相同（令人困惑）

按住触发指示器在触摸屏上被手指遮挡

移除按钮确认可能被双击意外确认

手指遮挡问题是一个触摸人体工程学问题：按住确认的提示如果将其进度指示器渲染在用户自己的指尖下方，则无法在手势进行中传达进度。

最严厉的评估来自 xhayden，他质疑该目录是否展示了任何 AI 模型无法一次性生成的内容：

其中很多都相当粗糙，似乎没有以一致性进行设计。我认为如果我给 Opus 5.5 指令来制作几乎任何这些组件，它都可以一次性生成。

该评论还提出了两个产品设计要点。首先，验证码示例动画化了数字之间的过渡，但没有动画化勾选图标的更新。其次，个人简介字符计数器只允许超出限制 20 个字符，xhayden 认为这违背了目的：超出计数器的意义在于让用户输入完整文本，然后编辑缩减。评论还指出，复制提示需要创建账户，并且没有明显的路径来解释自定义选项。

Fe2O3 指出了营销框架，观察到引用自 shadcn 的推荐语“这是我最近使用的资源之一”对于一个其全部工作在于视觉精致的目录来说，是一个奇怪的头条背书。

并非所有评论都是批评性的。cpan22 简单写道：“这些看起来很棒。”

定价和访问权限受到审查

两位评论者引用了访问提示的价格，但他们给出的数字并不一致，因此两者都不应被视为官方数字。

• tintor 将报价总结为“网页上的按钮每月 30 美元？”
• xhayden 引用了“最低每月 10 美元”，并认为许多免费组件网站提供类似输出。

评论者 jonshariat 提出了一个关于商业模式的实用问题：如果这些模式在公共浏览器中渲染，代理可能可以检查并重现它们，那么使用 TypeUI 的 MCP 集成是否比抓取预览产生可衡量的更好输出？目录页面本身没有记录 MCP 设置或提示自定义选项。

替代工作流程：结构化设计工具加代理

评论者 totetsu 描述了一种竞争方法，该方法结合了结构化设计工具和代理访问，而不是提示目录。该设置将 Penpot 运行在 Fly.io 上，并将其连接到 MCP 服务器和浏览器使用工具，然后添加图像生成和代码执行，将生成的 PNG 转换为 SVG。所述目标是获得“结构化 UI 设计工具和灵活自适应聊天界面的两全其美”。

这是该线程浮现的核心架构张力：一个固定的 113 个精选提示目录提供了一致性，但限制了自定义，而驱动真实设计工具的通用代理提供了灵活性，但不保证每个组件的质量。

值得了解的跨平台动画注意事项

一位评论者 deburo 反驳了动画看起来卡顿的说法，将问题归因于 Chrome 如何将 CSS prefers-reduced-motion 媒体特性映射到 Windows 的“动画效果”辅助功能设置。在 Windows 中禁用动画效果的用户会看到网页上的运动减少或消失，这看起来像是一个损坏的组件，而不是有意的辅助功能行为。

本次报道总结

TypeUI 的微交互库将 113 个 UI 行为模式打包为可复制的 AI 实现提示，涵盖按钮、输入框、选择控件、模态框、抽屉、工具提示、通知、步骤导航、列表、滑块和卡片。Hacker News 的回应认为概念有价值，但执行未完成，引用了具体的弹簧和布局错误、触摸目标疏忽、示例中状态覆盖不一致（如验证码和字符计数器），以及提示前的付费墙。