TypingMindTypingMindThe best frontend for AI
Ui Verification logo

Ui Verification

Community
AntonHu
ui-verification

通用 UI 验收技能。验收必须以「实际页面效果 vs 设计稿」为准，必须使用浏览器工具 (Browser) 查看目标页面，通过页面截图与设计稿截图比对、或页面元素与 .pen 设计稿元素比对等落地方式完成验收，并产出问题清单与反思。

Overview

PublisherAntonHu
Repositoryai-coding-project
Skill nameui-verification
Stars
111
Forks
35
Bundled files
21
Links
Skill sourceRepository
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 21 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by AntonHu on GitHub. Read the source before you install it.

Installation

Install the Ui Verification AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/AntonHu/ai-coding-project/tree/main/.agents/skills/ui-verification
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/AntonHu/ai-coding-project.git /tmp/ai-coding-project
mkdir -p .claude/skills
cp -r /tmp/ai-coding-project/.agents/skills/ui-verification .claude/skills/ui-verification
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Ui Verification in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Ui Verification on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Ui Verification is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

UI 验收

核心原则

最终验收标准：以实际运行页面的效果与 UI 稿（.pen 或 Figma） 进行比对得出结论，而不是仅凭代码或分析清单推断。

工具选择：优先使用 Cursor 的 Browser（@Browser），仅当不在 Cursor 或 Browser 不可用时使用 Playwright MCP。详见 rules/tools-browser-navigation.md。

比对方式：必须进行可落地的比对之一或组合：页面截图 vs 设计稿截图，或页面元素 vs 设计稿元素。详见 rules/tools-design-guidelines.md。

验收顺序：从上到下 → 从左到右 → 从外到里。先按顺序过一遍 P0（布局、层级、内容-文字与图片），再逐项比对 P1/P2 维度。详见 rules/comparison-*.md。

使用时机

当需要做「UI 还原验收」时使用本技能：

  • 实现完成后，需要对照设计稿检查还原度
  • 需要产出一份可追踪的 UI 问题清单，并据此修复与再验证
  • 需要做「分析不足反思」，反哺设计稿分析（design-analysis）

前置条件

  • 有可访问的实现页面：本地或目标环境已启动；在 Cursor 中优先用 @Browser 打开目标 URL
  • 有设计稿可对照：.pen（Pencil 设计稿）或 Figma 链接可访问
  • 有分析清单（推荐）：docs/样式还原/<名称>-UI分析清单.md 可作为比对时的检查项

若尚未有分析清单但已有设计稿，可先使用 .agents/skills/design-analysis/SKILL.md 产出分析清单。

目标产出

  • UI 问题清单：docs/样式还原/<名称>-UI问题清单.md（详见 rules/workflow-problem-list.md）
  • 分析不足反思（可选）：反哺 design-analysis（详见 rules/workflow-reflection.md）

工作流程（5步）

  1. 使用浏览器工具查看实际页面：在 Cursor 中优先使用 @Browser，获取实际页面可比对信息。详见 rules/tools-browser-navigation.md 和 rules/tools-design-guidelines.md
  2. 实际页面与设计稿比对：截图比对或元素级比对，按 P0/P1/P2 维度逐项比对。详见 rules/comparison-*.md
  3. 产出 UI 问题清单：将差异点记录到问题清单。详见 rules/workflow-problem-list.md
  4. 修复与再验证：先修 P0，再 P1，再 P2；修复后必须再次使用 Browser 工具验证。详见 rules/tools-browser-navigation.md
  5. 反思分析不足（可选）：将「哪些问题是因为分析没做到位」总结下来，反哺 design-analysis。详见 rules/workflow-reflection.md

快速参考

编写时的设计常识（应在实现阶段遵循）

  • rules/writing-page-container-width.md - 页面容器宽度规则
  • rules/writing-list-layout.md - 横向列表布局规则
  • rules/writing-element-completeness.md - 元素展示完整性规则
  • rules/writing-alignment.md - 对齐方式规则

常见错误模式（验收时特别关注）

  • rules/errors-page-container-width.md - 页面容器宽度限制
  • rules/errors-grid-container-width.md - Grid 容器宽度问题
  • rules/errors-css-priority.md - CSS 优先级覆盖
  • rules/errors-flex-layout.md - Flex 布局问题
  • rules/errors-flex-column-width.md - 换行后列宽不一致
  • rules/errors-alignment.md - 对齐方式错误
  • rules/errors-button-dimensions.md - 按钮尺寸问题
  • rules/errors-button-position.md - 按钮定位问题

比对维度（P0 级，验收时不得遗漏）

  • rules/comparison-layout.md - 布局比对
  • rules/comparison-hierarchy.md - 层级比对
  • rules/comparison-content-text.md - 文字内容比对
  • rules/comparison-content-image.md - 图片内容比对

工具使用指南

  • rules/tools-browser-navigation.md - 浏览器工具打开页面
  • rules/tools-design-guidelines.md - 设计稿工具使用（Pencil/Figma）

工作流程模板

  • rules/workflow-problem-list.md - UI 问题清单文档结构
  • rules/workflow-reflection.md - 反思分析不足模板
  • rules/workflow-checklist.md - 快速检查清单

与其它技能的关系

  • design-analysis：依赖其产出的「UI 分析清单」；验收后的反思用于完善该技能
  • create-proposal：提案中若包含「实现后进行 UI 还原验收」，可引用本技能执行验收
  • create-route / create-component：修复问题时可能涉及路由或组件的样式与结构修改

相关规范

  • .agents/skills/design-analysis/SKILL.md - 设计稿分析（产出分析清单）
  • .agents/skills/create-proposal/SKILL.md - 创建提案（可引用本技能做实现后验收）
  • .agents/rules/09-样式规范.md - 设计稿颜色提取

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Ui Verification AI skill do?

通用 UI 验收技能。验收必须以「实际页面效果 vs 设计稿」为准，必须使用浏览器工具 (Browser) 查看目标页面，通过页面截图与设计稿截图比对、或页面元素与 .pen 设计稿元素比对等落地方式完成验收，并产出问题清单与反思。

Why use Ui Verification on TypingMind?

Because you install it once and use it with any model. Ui Verification is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Ui Verification in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/AntonHu/ai-coding-project/tree/main/.agents/skills/ui-verification. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Ui Verification?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Ui Verification?

As many as you like. As long as a model supports skills, you can use Ui Verification with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Ui Verification AI skill free?

It is published on GitHub by AntonHu. Check the repository for licensing terms. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
NousResearch logo

Mono Color

NousResearch
OrganizationPopular

Generate one- or two-ink editorial print poster images.

53.5K
250.4K
9 files
View
NousResearch logo

Pretext

NousResearch
OrganizationPopular

Build creative browser demos with DOM-free text layout.

53.5K
250.4K
3 files
View
NousResearch logo

Sketch

NousResearch
OrganizationPopular

Throwaway HTML mockups: 2-3 design variants to compare.

53.5K
250.4K
Instructions
View
NousResearch logo

Tldraw Offline

NousResearch
OrganizationPopular

Drive and script tldraw offline canvases with an agent.

53.5K
250.4K
3 files
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇