ui-preview-loop

仓库创建 2026年7月27日最近提交 1 天前SkillHot 收录 1 天前

⬈ GitHub 仓库 ⬈ SKILL.md 原文件 ⬇ Raw 原始文件

▸ 精选理由

适合对照 mock 或做自动化视觉回归的前端流程。

▸ 风险提示

通常需访问并截图目标应用，可能涉及敏感环境或权限问题。

这个 Skill 做什么

通过截图→评审→修正循环自动验证页面视觉与布局问题。

把页面跑起来截图、评审、修正，循环直到视觉与布局符合预期。适合刚改完 UI、对齐 mock/Figma、或用户反馈“看着怪”的场景。特别之处是可视化闭环：真实渲染+截图比对，能发现只靠读代码看不到的样式问题。

▸ 展开 SKILL.md 英文原文

Runs a screenshot-critique-fix loop against the live app to verify UI changes visually. Use after implementing any UI, when matching a mock or reference image, when the user asks to preview, or to fix layout/styling issues that require seeing the rendered page.

开发编程视觉回归截图比对自动化校验通用

Stars

Forks

仓库内 Skill

积累中

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/Ludenox-GIT/portable-agent-skills/main/skills/ui-preview-loop/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/Ludenox-GIT/portable-agent-skills/main/skills/ui-preview-loop/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# UI Preview Loop

## When to use

- After implementing or modifying any UI: component, page, layout, theme, CSS, copy that renders.
- When matching a mock, Figma export, or reference screenshot.
- When the user reports a visual bug ("looks broken", "overlaps", "cut off", "misaligned").
- When the user asks to preview, demo, or "see" the app.

When NOT to use:

- Pure backend/API/data changes with no rendered surface.
- Unit-test-only or refactor-only work where the DOM output is provably identical.
- If you are unsure whether the render changed, that doubt is exactly why you run the loop.

## Iron Law

**THE CODE IS NOT THE UI.** Never judge visual work from source code — render it, screens

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有