argent-lens

GitHub

用于在 Argent Lens 中为 UI 元素生成多个视觉设计变体,捕获真实截图并供人类用户进行选择确认。适用于需要 A/B 测试或设计选项决策的场景。

packages/skills/skills/argent-lens/SKILL.md software-mansion/argent

触发场景

请求屏幕或组件的设计替代方案 产生多个候选外观并需人工确认

安装

npx skills add software-mansion/argent --skill argent-lens -g -y
更多选项

非标准路径

npx skills add https://github.com/software-mansion/argent/tree/main/packages/skills/skills/argent-lens -g -y

不安装直接使用

npx skills use software-mansion/argent@argent-lens

指定 Agent (Claude Code)

npx skills add software-mansion/argent --skill argent-lens -a claude-code -g -y

安装 repo 全部 skill

npx skills add software-mansion/argent --all -g -y

预览 repo 内 skill

npx skills add software-mansion/argent --list

SKILL.md

Frontmatter
{
    "name": "argent-lens",
    "description": "Propose multiple visual design variants for on-screen elements and let the human pick in the Argent Lens window. Use when the user asks for design alternatives \/ options \/ A-B choices for a screen or component, or any time you have produced more than one candidate look for an element and want a human decision before committing."
}

Prerequisite: feature flag. This workflow is gated behind the argent-lens flag (off by default). Run argent enable argent-lens once before using it. If propose_variant comes back not-found, the flag is off; enable it and retry.

1. Overview

You implement several candidate designs, capture each one running on the device, and stage them with propose_variant (non-blocking, once per variant). The Argent Lens window opens on its own and shows each element as a card beside the live device stream; the human picks per element, may pin comments, and presses Complete. await_user_selection is the single blocking call that returns their decision. Both tools' descriptions cover their parameters and return shapes.

Resolve a simulator/emulator first (argent-ios-simulator-setup / argent-android-emulator-setup) and, for React Native, argent-react-native-app-workflow to run the app and reload the bundle.

2. Workflow

Step 0: Plan the variants

Decide, before touching code, exactly which elements you are redesigning and the distinct variants for each. Write them down (e.g. "Search field: Filled / Outlined / Pill", "Primary CTA: Solid / Gradient"). Each variant must be a single, self-contained change you can apply, screenshot, and revert independently. Vague or overlapping variants produce useless proposals.

Step 1: Get a precise matcher

For each element, run describe on its screen and read its exact identifier / label / role. Prefer match: { by: "identifier", … } (stable testID), then an exact label; the default text match is fine only when the element's visible text is unique. A wrong match makes the card point at the wrong element or float unanchored.

Step 2: For each variant: build → navigate → screenshot → propose → revert

  1. Build the variant in code.
  2. Apply it on the device. Reload the RN bundle (debugger-reload-metro) or rebuild as needed so the running app shows this variant.
  3. Navigate to it (argent-device-interact): a screenshot is only meaningful if the element is on screen.
  4. Screenshot. Call screenshot and pass the returned path straight through as variant.previewImage. NEVER hand-crop, resize, re-encode, or copy the screenshot to another folder: that double-crops against the preview window's own cropping and writes the image where the server won't serve it ("No preview"). If you suspect the variant didn't apply (no visible change vs. the previous capture), compare with the previous path (shasum -a 256): byte-identical captures mean the variant is not on screen yet. Fix that; never propose anyway.
  5. Propose with element, match, udid (the device you captured on) and previewImage, plus a summary and code/filePath when useful. The tool auto-captures the crop frame by describing the device at propose time, so propose right after the screenshot, while the variant is still on screen. Pass variant.frame only to override that, e.g. when the element can't stay on screen at propose time.
  6. Revert the change before building the next variant.

Step 3: Await the human's decision

After every variant for every element is staged, call await_user_selection once. A pending result is normal: the proposals stay live, call it again. In an argent lens session that tool is hidden: end your turn instead, and the user's choice arrives as a message.

Step 4: Apply the outcome

Implement the chosen variant for every selected element, treat every annotation and the global comment as a change request, and report what you applied and what was skipped. If the human commented but skipped a variant, the comment still matters; act on it.

3. Rules

  • One variant = one real, distinct screenshot. Every previewImage must show that variant actually running on the device, captured after it was applied: no mockups, no un-built ideas, never the same path (or byte-identical captures) for two variants. If you can't produce visibly different captures (the app is read-only, accessibility is broken so you can't navigate, the bundle won't hot-reload), STOP and tell the user instead of staging duplicates.
  • At least two variants per element. If you only have one look for an element, produce a real alternative or don't propose that element at all; a lone variant isn't a choice.
  • One variant on screen at a time. Apply → screenshot → propose → revert, so screenshots never bleed together.
  • Re-proposing starts a fresh round. Calling propose_variant after a round was consumed begins the next round and clears the previous round's elements; stage a full set each round.

版本历史

  • b965c94 当前 2026-11-07 15:13
  • f0e04a6 2026-10-19 02:08

    将工具描述和技能文档中的破折号替换为冒号、逗号等标点,以统一文本风格。

  • bc04c3b 2026-07-06 19:59

同 Skill 集合

packages/skills/skills/argent-android-emulator-setup/SKILL.md
packages/skills/skills/argent-create-e2e/SKILL.md
packages/skills/skills/argent-create-flow/SKILL.md
packages/skills/skills/argent-device-interact/SKILL.md
packages/skills/skills/argent-ios-device-interact/SKILL.md
packages/skills/skills/argent-ios-device-setup/SKILL.md
packages/skills/skills/argent-ios-simulator-setup/SKILL.md
packages/skills/skills/argent-metro-debugger/SKILL.md
packages/skills/skills/argent-native-profiler/SKILL.md
packages/skills/skills/argent-react-native-app-workflow/SKILL.md
packages/skills/skills/argent-react-native-optimization/SKILL.md
packages/skills/skills/argent-react-native-profiler/SKILL.md
packages/skills/skills/argent-screen-recording/SKILL.md
packages/skills/skills/argent-screenshot-diff/SKILL.md
packages/skills/skills/argent-test-ui-flow/SKILL.md
packages/skills/skills/argent-tv-interact/SKILL.md
packages/skills/skills/argent-qa-e2e/SKILL.md
packages/skills/skills/argent-qa-flows/SKILL.md
packages/skills/skills/argent-settings-permissions/SKILL.md

元信息

文件数
0
版本
b965c94
Hash
32c1bd3a
收录时间
2026-07-06 19:59

首页 - Wiki
Copyright © 2011-2026 iteam. Current version is 2.156.0. UTC+08:00, 2026-11-10 08:57
浙ICP备14020137号-1