Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add DongLiStudio/personal-agent-foundation --skill visual-iteration-workflowgit clone --depth 1 https://github.com/DongLiStudio/personal-agent-foundationWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/donglistudio/personal-agent-foundation/visual-iteration-workflow)<a href="https://agentmods.dev/skills/donglistudio/personal-agent-foundation/visual-iteration-workflow"><img src="https://agentmods.dev/badge/skills/donglistudio/personal-agent-foundation/visual-iteration-workflow.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00159 | $0.01166 |
| Opus 5 | $0.00079 | $0.00583 |
| Sonnet 5 | $0.00032 | $0.00233 |
| Haiku 4.5 | $0.00016 | $0.00117 |
Grade A, and why
visual-iteration-workflow scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
视觉迭代工作流
使用这个 Skill 作为视觉设计迭代的路由和安全收尾流程。它的核心作用不是替代 impeccable，而是在用户正在看页面、想改某个具体视觉位置时，提醒 Agent 优先考虑浏览器里的点选式迭代。
判断规则
同时满足以下条件时，优先使用 Impeccable Live Mode：
- 任务涉及 UI/UX、视觉设计、布局、间距、字体、颜色、动效、响应式、文案位置或组件外观。
- 目标是可以在浏览器中打开的 Web 页面或应用界面。
- 用户指向可见位置，例如“这里”“这个位置”“点选修改”“现场看看”“生成几个版本”，或在看完预览后要求局部视觉调整。
以下情况使用普通文件编辑：
- 任务是纯后端、纯数据、纯 CLI，或无法通过浏览器视觉检查。
- 用户只是要先做一个大范围初稿，而且还没有可预览页面。
- Live Mode 需要明显额外配置，而用户明确想要快速静态改动。
- 目标是纯原生
ios、android或adaptive项目，并且没有 Web 预览。
推荐流程
- 检查当前会话是否可用
impeccableSkill。可用时，使用它的 Live Mode 说明；在运行 live 命令前读取SKILL.md和reference/live.md。 - 如果用户正在浏览器里看页面，且要改具体视觉问题，优先建议 Live Mode，而不是直接 patch 文件。
- 如果用户同意，或用户本来就要求点击式编辑，从最小且正确的项目根目录启动 Live Mode，不要从过大的父级通用工作区启动。
- 如果 Impeccable 提示缺少上下文，只在相关页面/产品目录内创建或更新
PRODUCT.md、DESIGN.md和.impeccable/live/config.json。不要把通用父项目污染成某个具体产品的上下文。 - 当
file://页面无法稳定加载注入脚本或浏览器事件时，优先用本地 HTTP 预览地址。 - 进入 Live poll loop，等待用户提交
generate、steer、accept、discard或exit事件。 - 处理
generate时，生成多个有差异但保持品牌一致的变体。除非用户明确要求偏离原风格，否则保留现有设计身份。 - 用户
accept后，必须先完成 cleanup，再继续 poll：把被接受的 CSS 合入正式源码，移除impeccable-carbonize标记，移除data-impeccable-*包装，删除未接受变体的死代码，并在需要时运行live-complete.mjs。 - 用户结束后，停止 live helper，移除注入脚本，停止本次临时启动的预览服务器，并确认源码中没有 live 标记残留。
安全检查
最终源码中不得留下：
impeccable-livelive.jslocalhost:8400impeccable-carbonizeimpeccable-variants-startdata-impeccable-variant- 临时
@scope变体 CSS
不要做宽泛的进程清理。只停止本次启动的 live helper 和临时预览服务器。如果启动了临时服务器，记录端口，收尾时只停止监听该端口且确认为本次预览用途的进程。
如果 Live Mode 改动了生成文件、临时 wrapper 或 fallback 文件，先按 Impeccable 的 fallback/accept cleanup 规则清理，再向用户报告完成。
对用户的沟通方式
当适合 Live Mode 时，直接简短说明：
这个适合用 Impeccable Live Mode：你在页面上点具体元素、写修改意见，我生成几个变体，你接受后我再写回源码并清理临时标记。
Live 会话中保持操作型更新：说明 helper 已启动、正在等待点击事件、变体已生成、正在清理接受后的临时标记、Live Mode 已停止。
回退方案
如果 Impeccable 不可用，退回最佳浏览器检查流程：打开或 serve 页面，观察可见问题，修改源码，刷新验证，并说明本次未使用 Live Mode 的原因。
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 64 lines · 159 tokens per session scan A fffed77d1725
visual-iteration-workflow is a skill published in the GitHub repository DongLiStudio/personal-agent-foundation (11 stars, last pushed 21d ago), licensed Apache-2.0. It adds 159 tokens to every session and 1,166 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
reveal-hover-effect
Build cursor-following spotlight reveals that expose a second aligned image through a soft radial mask. Use for hover-to-color, before-and-after, x-ray, material, texture, product-detail, and illustrated hero effects where a desaturated or embossed base image should remain visible while another treatment follows an…
frontend-visual-qa
Audits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find…
better-colors
Helps you build a color system and answer anything about color in your project. You can generate palettes, use semantic tokens, convert between formats, check contrast and more.
prototype-web
A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.