用途
design-iterator 是一个 UI/UX 设计迭代技能，用于对网页组件进行系统化、渐进式的视觉优化。当设计改动经过 1-2 次尝试仍不理想时，可主动使用它，通过多轮「截图—分析—改进」循环，把普通界面逐步打磨为更专业的成品。
主要能力
- 迭代循环：每轮执行截图、分析、实现、记录、重复五个步骤。
- 聚焦截图：只截取正在处理的目标元素或区域，而非整页，以减少干扰、保持上下文聚焦。
- 设计分析维度：视觉层级（标题字号与字重、色彩对比、留白、区块分隔）、现代设计模式（渐变背景、微交互与悬停态、徽章与标签样式、图标处理、圆角一致性）、排版（字体搭配、行高与字距、文字颜色变化、斜体强调）、布局改进（主视觉卡片、网格排布、交替模式、响应式断点）、细节打磨（阴影深度与颜色、动画元素、社会证明徽章、信任标识、编号或标签项）。
- 竞品研究（按需）：可访问 2-3 个竞品网站，截图相关区块，提取其具体技法并应用于后续迭代。
- 设计技能整合：当用户提及某种设计风格（如 Swiss、极简、Stripe 风格等）时，会检查上下文中已加载的设计技能指令，并在所有迭代中应用其网格系统、排版规则、色彩理念、布局原则与需避免的反模式。
使用方式
- 确认目标组件/文件路径、迭代轮数（默认 10）以及可选的竞品网站。
- 用 agent-browser 以有头模式打开浏览器并设置合适视口：
agent-browser --headed open [url]。推荐视口尺寸：小组件（按钮、卡片）800x600；中等区块（主视觉、功能）1200x800；整页区块 1440x900。 - 获取元素引用：
agent-browser snapshot -i，找到目标元素的 ref（如 @e1、@e2）。 - 聚焦元素：
agent-browser scrollintoview @e1，然后截图：agent-browser screenshot output.png。 - 分析并实施改动，再次截图（如 output-v2.png），重复循环。
示例工作流：
1. agent-browser open [url]
2. agent-browser snapshot -i # Get refs
3. agent-browser screenshot output.png
4. [analyze and implement changes]
5. agent-browser screenshot output-v2.png
6. [repeat...]
每轮输出格式：
## Iteration N/Total
**What's working:** [Brief - don't over-analyze]
**ONE thing to improve:** [Single most impactful change]
**Change:** [Specific, measurable - e.g., "Increase hero font-size from 48px to 64px"]
**Implementation:** [Make the ONE code change]
**Screenshot:** [Take new screenshot]
规则：如果无法找出一个明确的改进点，说明设计已完成，应停止迭代。
适用场景
- 设计经过 1-2 次尝试仍未达到预期，需要系统性渐进优化。
- 需要对特定组件或区块进行精细化打磨。
- 需要参考竞品技法来提升设计。
- 用户指定了某种设计风格，希望在整个迭代过程中贯彻。
限制与准则
- 每轮只做 1-2 处小而具体的改动，绝不更多；改动应可度量（如「标题字号从 24px 增至 32px」）。
- 不要撤销前几轮的良好改动；早期迭代聚焦结构，后期聚焦打磨。
- 始终保留现有功能，并考虑可访问性（对比度、语义化 HTML）。
- 如果某处看起来已经不错，就不要动它。
- 避免过度工程：只做直接要求或明显必要的改动，不添加功能、不重构、不做超出要求的「改进」；不为一次性操作创建辅助函数或抽象；不为假设的未来需求设计。
- 在提出代码修改前，必须阅读并理解相关文件，不得臆测未检查的代码。
- 前端美学方面：避免通用「AI 味」审美，选择独特字体、统一色彩主题、有节制的动效与有氛围的背景，避免过度使用的字体（Inter、Roboto、Arial、系统字体）、陈词滥调的配色（如白底紫色渐变）和千篇一律的布局。
暂未提供
关于该技能的收费、价格、平台支持范围等具体信息，资料中暂未提供。