组件
Component
中级通用组件（Component）是把一块界面及其相关行为组织在一起的单元，例如商品卡片。它让你能用同一套结构展示不同商品，也方便在一处修改样式或交互，减少多个页面各写一遍带来的不一致。
你可能会说：「商品列表和收藏页都有商品卡片，我想改一次样式，两边就能一起更新。」
读之前建议先了解
动手看看数码商店的商品卡片
本周精选
卡片变体
三件商品的内容不同，但都按图片、名称、价格和操作区这套结构展示。切换卡片变体、拖动圆角，再悬停卡片或用 Tab 聚焦按钮，看看它们怎样一起变化。
默认卡片适合日常商品列表：信息够用，购买入口清楚，不用额外标记分散注意力。
要点组件怎样帮你组织界面？
- 1
把一起变化的部分放在一起
比如商品卡片有图片、名称、价格和收藏按钮。它们通常一起出现，也常被一起调整。把这块界面做成组件，你和 AI 讨论改动时，就能明确指出要改哪一部分。
- 2
用不同数据生成相同结构
同一个商品卡片组件可以接收不同的图片、名称和价格，再展示成多张卡片。这样做的好处是，调整价格的位置时，你不用逐张修改；数据也不必写死在界面结构里。
- 3
让交互和边界说得清楚
组件不只是外观，还可以处理自身的交互，例如收藏按钮被点击后的显示变化。你需要和 AI 说清楚数据从哪里来、点击后通知谁；否则界面看着对，行为可能和产品流程脱节。
容易混淆的地方
组件不是某个 HTML 标签：一张商品卡片可能由图片、文字和按钮等多个元素组成。组件也不等于整个页面；页面可以由多个组件组合而成。组件不一定要重复出现才有价值，关键是这块界面是否有清楚的职责和改动边界。
什么时候用
适合用
- 商品列表、收藏页都展示商品卡片时，用同一个组件接收不同数据，统一调整外观和交互。
- 做 AI 聊天工具时，把消息气泡做成组件，让用户消息和助手消息共用结构、按类型显示差异。
- 后台多处需要筛选条件区时，用组件集中处理输入、重置和提交，减少各页面行为不一致。
不适合用
- 只做一篇静态说明页，正文没有独立交互或需要单独维护的区块时，用语义清楚的 HTML 排版即可，不必为每段文字建组件。
- 需求是收到支付回调后更新订单，没有要展示的界面时，处理的是后端逻辑；用服务或函数组织代码，而不是界面组件。
练一练选一个答案，看看解释
你在做电商网站，首页和收藏页都有商品卡片，展示的数据不同，但布局和收藏操作相同。你会怎么向 AI Agent 描述实现方式？
让 AI 帮你做复制给 AI Agent 直接用
请把首页和收藏页重复的商品卡片提取为一个组件，接收图片、名称、价格和收藏状态等数据。保留两页各自的数据获取方式；说明收藏操作由组件处理什么、页面接手什么，并检查改动后两处展示是否一致。