com-pick
Overview
在网页上直接采样 UI 组件:hover 高亮、点击选中,提取视觉、状态和通用交互,一键复制到 Figma 或 AI。
Com-Pick(网页组件采样器)——在任意网页上,把看到的好组件变成自己的。 Com-Pick (Web Component Sampler) — turn any great component you see on any webpage into your own. 看到喜欢的按钮、导航或卡片?点一下工具栏图标进入采样模式: Spotted a button, navbar, or card you like? Click the toolbar icon to enter sampling mode: 1. 悬停——橙色虚线框自动圈出组件边界,类型一眼识别(按钮、导航、卡片…) Hover — an orange dashed outline auto-traces the component's boundary, and its type is identified at a glance (button, navigation, card…) 2. 点击选中——视觉样式、UI 状态与通用交互一次抓全 Click to select — visual styles, UI states, and common interactions are captured in one go 3. 一键输出——粘贴到 Figma 是「可编辑的真实图层」;或复制为 AI 任务书,交给 Claude、Cursor、Codex 等秒级重建 One-click output — paste into Figma as truly editable layers, or copy it out as an AI task brief for Claude, Cursor, Codex, and more to rebuild in seconds 亮点一览: • 视觉 1:1 提取——颜色、圆角、阴影、渐变、字号、间距均来自浏览器计算样式,忠实还原 1:1 visual fidelity — colors, corner radii, shadows, gradients, font sizes, and spacing all come straight from the browser's computed styles, faithfully reproduced • UI 状态全抓——Normal / Hover / Pressed / Focus / Disabled 逐个收录 Complete UI states — Normal / Hover / Pressed / Focus / Disabled, each captured one by one • 通用交互不丢——下拉、手风琴、页签切换等通用行为一并记录 Common interactions preserved — dropdowns, accordions, tab switching, and other standard behaviors are recorded along the way • 常见区块全覆盖——导航栏、Hero、功能卡、信任条、CTA、评价、FAQ、表单… Broad section coverage — navbar, hero, feature cards, trust bar, CTA, testimonials, FAQ, forms… • 采集深度自选——仅外观 / 外观+交互组件,按需取舍 Capture depth, your choice — appearance only, or appearance + interactive components; keep exactly what you need 安全干净: 不注入跳转、不请求接口、不上传任何数据,分析全程在你的浏览器本地完成;插件仅申请 activeTab 权限,只有在你主动点击图标时才在当前页面工作。 No redirects injected, no API calls, no data uploaded — all analysis happens locally in your browser. The extension requests only the activeTab permission, and it only works on the current page when you actively click its icon. 适合设计师、前端开发者与所有 vibe coding 玩家——把网上的好设计,变成你的设计稿与代码。 Made for designers, front-end developers, and every vibe coder — turn great designs on the web into your design files and code.
0 out of 5No ratings
Details
- Version0.2.1
- UpdatedSeptember 3, 2026
- Offered byjiongxiaosu0830
- Size5.97MiB
- Languages中文(中国)
- Developer
Email
jiongxiaosu0830@gmail.com - Non-traderThis developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.
Privacy
com-pick has disclosed the following information regarding the collection and usage of your data. More detailed information can be found in the developer's privacy policy.
com-pick handles the following:
This developer declares that your data is
- Not being sold to third parties, outside of the approved use cases
- Not being used or transferred for purposes that are unrelated to the item's core functionality
- Not being used or transferred to determine creditworthiness or for lending purposes