com-pick icon

com-pick

by jiongxiaosu0830 · Developer Tools
Manifest V3 Free
View in Chrome Web Store Data as of 16 Oct 2026

在网页上直接采样 UI 组件:hover 高亮、点击选中,提取视觉、状态和通用交互,一键复制到 Figma 或 AI。

Users
153
+53 in 30 days
Rating
5.0 / 5
unchanged in 30 days
Ratings
8
0 in 30 days
Store rank
#71K
#60K among extensions
Version
0.2.3
updated 7 Sep 2026

Users

monthly, 1 months
076153Sep 2026Oct 2026Oct 2026
Latest, 16 Oct 2026: 153 usersMove the mouse over the chart for any month

Ratings count

monthly, 1 months
048Sep 2026Oct 2026Oct 2026
Latest, 16 Oct 2026: 8 ratingsMove the mouse over the chart for any month

The Chrome Web Store rounds user counts down to the leading digit, so the user line moves in steps. The ratings count is exact and is the better signal of real adoption.

About com-pick

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.

Growth

WindowUsersChangeRatingsRating
7 days+24+18.6%00.00
30 days+53+53.0%00.00

Version history

2 versions recorded
0.2.37 Sep 2026
0.2.12 Sep 2026

Details

Category
Developer Tools
First seen
2 Sep 2026
Size
6.0 MB
Languages
zh-CN
Pricing
Free
Privacy policy
gist.github.com
Extension ID
cchdkjmgocbgjbnpndhgmcnpjmklcflc

Permissions and risk

Moderate riskimpact 1, likelihood 3
Permissions
activeTabscriptingclipboardWrite

Alternatives to com-pick

Extensions that rank for the same store searches or share the Developer Tools category, ordered by users