组件库品牌同步三法

建团队共享的组件库，三种方法按投入递增：

方法 1：Screenshots（门槛最低，任何工具通用）

• 把产品截图喂给 AI 原型工具，配固定提示词：分析截图 → 识别其中的 UI 组件（按钮/输入框/导航/卡片/弹窗/排版）→ 每个做成 React + Tailwind 自定义组件（响应式、可访问、带 props 和注释）→ 用 index 页展示组件清单，不用任何外部组件库。
• 常见坑：这些工具被调教得倾向于"复刻整页"，需要追加一句"index 页应该是组件库清单，不是页面复刻"。
• 扩充：继续贴新截图 + "Add these components as well"。
• 打磨用 reflection 提示词："List the differences between the screenshot and your implementation. How can you match the design more exactly? Don't code."

方法 2：Chrome 扩展（写作时仅 Magic Patterns 支持）

• 在真实网页上选中 UI 元素 → 抽取样式 → 直接变成可复用组件；可并发抽取多个提速。

方法 3：Code（投入最大、保真最高，产出与真产品无法区分）

• 用公司真实代码组件。需要工程配合：给前端建一个 mock 掉 API 响应的本地入口，使其不连后端即可运行，然后在 Cursor/Windsurf 里做原型。适合小公司或技术型 PM/设计师。
• 变体：Figma MCP server（Get Code / Get Variable Definitions / Get Image / Get Code Connect 四个动作），让 Cursor 自主从 Figma Dev Mode 抽设计 token 和 CSS 生成组件；有现成组件可模仿或给了明确代码格式说明时效果最好。

关键收尾动作：组件库建完就停手，fork 出新项目再使用——组件像乐高一样被自动复用。

配套小技巧：logo 别让 AI 画（必出恐怖谷版本）——贴真实图片 URL（inspect element 抓取）或 SVG 内容，或用 Brandfetch 的 embed link；占位图让 AI 从 Unsplash 按语境取。