unslop-components 是做什么的？
AI生成的应用程序共享一个轮廓：页面标题、一行四个KPI卡片、一个表格、一个带下拉菜单的表单。它是正确的，但也是容易被遗忘的。组件应该由数据是什么来塑造，而不是由组件库提供什么来决定。
首先在基础 (unslop-foundation) 上构建：调色板令牌、图标风格、插图系统、动效语言和批准的组件表。这里的组件使用这些令牌和部件；它们不会发明颜色或样式。
禁止列表（默认外观）
首先考虑组件：命名产品的构建块，构建并审查它们，然后组合屏幕。不要交付主内容是以下任何一项的屏幕，除非数据确实如此：
- 由边框和细线分隔的行或组（用空白和色调分隔）
- 带标签的表单（字段网格加“保存”）作为编辑方式；使用
unslop-foundation/references/designer-standard.md中的编辑模式 - 一行KPI/统计卡片（使用一句话，或者将数字显示在其所测量的内容内部）
- 单元格中包含编辑下拉菜单的表格（表格用于比较多行的多个属性）
- 相同卡片的均匀网格
- 表单作为主要界面（表单用于输入数据，而不是查看数据）
- 状态显示为纯色文本或仅带名称的药丸状标签（给状态一个形状，见下文）
- 饼图用于进度指示、仪表图、作为装饰的环形图
流程（针对每个屏幕）
- 命名数据形态。 序列/旅程、整体部分、比较、关系、随时间变化、排名、位置、层级结构，或需要关注的事物流。
- 从
references/patterns.md中选择适合该形态的形式。 写一行：“这个屏幕是一个路线图，因为数据是按区域划分的有序流。” - 为每个屏幕定义一个标志性组件： 用户会记住的东西。它承载了丰富性；其余一切都是安静的文本和细线。
- 赋予状态视觉语言，至少使用两个通道（形状/填充和颜色，不仅仅是颜色），并在每个屏幕上一致使用。
- 先展示，再编辑。 默认视图是“优先阅读”。编辑操作位于更深一层（详情块、抽屉、详情页面），而不是在每一行中。
- 直接操作优于控件。 过滤器同时也是图例。点击事物本身而不是“查看”按钮。仅在拖拽能比下拉菜单更快时才使用拖拽。
- 变化密度。 一个大的时刻，一个安静的中间部分，小的支撑细节。不是五个等大的框。
- 对照下面的关卡进行检查。
审查关卡
- 屏幕的主元素不是表格、卡片网格、统计行或表单。
- 有一行理由将所选组件与数据形态联系起来。
- 状态使用形状/填充加颜色，并且在屏幕之间保持一致。
- 优先阅读：在不点击的情况下，屏幕上可见的下拉菜单或输入框不超过几个。
- 组件在 360 像素宽度下仍然正常工作（有目的地换行、堆叠或滚动），并且可通过键盘操作，焦点可见。
- 尊重减少动效偏好；没有仅为装饰而进行的动画。
- 你已查看过它：使用 Playwright MCP (
claude mcp add playwright npx @playwright/mcp@latest) 在 360 px 和 1280 px 下截取了屏幕截图。如果你无法查看，请如实说明；不要仅从代码就声称屏幕富有创意或已完成。
何时使用表格是正确的
多行、多可比较列、排序很重要（审计日志、价格列表、导出）。然后设计表格：表格数字、对齐的列、安静的规则、行悬停效果、无斑马纹或无框单元格、单元格内无控件。
文件
references/patterns.md- 数据形态到组件目录、状态语言、工作示例（产品流程的路线图）