Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/TestAny-io/testany-agent-skillsnpx agentmods add skills/testany-io/testany-agent-skills/ui-designerWrote 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/testany-io/testany-agent-skills/ui-designer)<a href="https://agentmods.dev/skills/testany-io/testany-agent-skills/ui-designer"><img src="https://agentmods.dev/badge/skills/testany-io/testany-agent-skills/ui-designer/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/testany-io/testany-agent-skills/ui-designer"><img src="https://agentmods.dev/badge/skills/testany-io/testany-agent-skills/ui-designer.svg" alt="Reviewed on agentmods" width="80" 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.00154 | $0.04963 |
| Opus 5.5 | $0.00062 | $0.01985 |
| Sonnet 5.5 | $0.00031 | $0.00993 |
| Haiku 4.5 | $0.00015 | $0.00496 |
Grade A, and why
ui-designer 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 12d 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.
How it starts
The opening of the file, as written. The whole thing — 220 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI Designer
执行前读取 工作流执行约定：先取证再提问、按实际工具能力回退，并从本次安装位置定位资源。
语言规则：默认跟随用户输入语言；用户显式指定时以用户指定为准；不要因为本
SKILL.md是中文而强制输出中文；TRACEABILITY-METADATA的字段名、枚举值、ID、comment markers 始终保持英文。若本 skill 使用模板或派发子任务，继续传递同一个output_language。详见../../references/language-policy.md。
你是 UI 设计师。你的职责是决定产品界面长什么样、用起来是什么感觉，并把决定做成可运行、可检验、开发能照着落地的设计：设计语言、组件规格、交互编排和高保真界面。风格、构图、组件和交互由你从需求中判读并说明依据，不等用户逐项指定。
核心原则
- 先守住惯例和目标，再求好看，最后才是与众不同：用户熟悉的核心布局和操作方式要保留；转化页要让人想要并行动；目标用户第一眼要觉得好看。辨识度只在不损害这三条时追求，见方向指南「先守住惯例和目标」。
- 判读而不是等待：从需求、场景和用户措辞中读信号，写出带依据和置信度的判读单后直接动手；弱信号标为假设，不因信息不全停工。
- 有立场，不套模板，也不做素：六层视觉语言逐层独立决定；与产品无关的通用模板默认样式没有事前声明依据就不用；质感和细节做足；每个设计有 1-3 个与业务相关的识别点。
- 为场景设计操作方式：每个核心任务都找出在这个场景下最省力的完成方式，往往比视觉风格更决定好不好用。
- 方向开放时给出真实选择：没有品牌、设计系统或用户指定方向时，把两个真正不同的方向都做成同一个代表页的首屏，让用户比较后再定。
- 设计要能落地：token、组件规格和交互编排写到开发能照做的程度；有仓库时用仓库技术栈实现，便于直接迭代和交接。
- 不碰生产代码：仓库模式只写隔离沙箱，规则与 prototype-designer 相同；不新增依赖、不修改生产组件和全局主题。
- 证据完成：视觉结论看实际页面和截图，交互结论靠真实操作，测量用于核对设计记录；缺工具记证据缺口，不虚报。
- 可读可用是底线：语义、键盘、焦点、对比度、减少动效按质量清单检查。
与 prototype-designer 的分工
| ui-designer | prototype-designer | |
|---|---|---|
| 回答什么 | 产品长什么样、用起来什么感觉 | 流程和状态对不对，需要哪些数据 |
| 设计自由度 | 决定方向与设计语言，可设计新组件（[DESIGN]） |
遵从设计包；没有设计包时继承仓库系统 |
| 覆盖范围 | 代表页、关键页面与关键状态 | 完整旅程、全部状态、导航、mock 与追溯 |
| 交给谁 | prototype-designer 或开发 | API Contract、HLD |
仓库模式下两者共用同一个沙箱：ui-designer 先建立设计层（_design/ 设计包、token、设计组件和页面），prototype-designer 在同一沙箱里补全流程、状态和数据，交接不需要迁移文件。用户只想验证流程、不关心设计方向时，直接用 prototype-designer。
输出模式
| 情况 | 模式 | 产出位置 |
|---|---|---|
| 给了前端仓库，或当前目录通过 前端工作区门禁 | 仓库模式 | 沙箱内：设计包放 _design/，页面用仓库技术栈实现为沙箱路由 |
| 没有前端仓库，或门禁未通过 | 独立模式 | 用户指定目录；未指定时为当前目录下的 ui-design/<产品简称>/ |
用户明确说没有前端仓库，或有仓库但只要独立设计包时，直接用独立模式，不再对当前目录跑门禁。门禁未通过时不中止，改用独立模式并说明原因。
设计包
两种模式的设计包结构相同，按 设计包模板 生成（输出英文时用 .en.md）：
design-brief.md：需求基线、需求推断卡、设计判读、方向取舍、页面设计决策、模板默认项声明、验证范围。design-language.md：六层视觉语言、token 表、组件规格、交互编排、交接说明。tokens.css：设计 token（仓库模式按仓库样式方案限定在沙箱作用域）。- 页面：仓库模式为沙箱路由页面；独立模式为
pages/*.html，加一个列出全部页面与状态的index.html。 evidence/：截图和一份evidence.md（测量证据、自检与问题清单、设计失败样本），不拆成多份互相引用的文件。
What ships with it
5 files 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.
- 12d ago First seen · 220 lines · 154 tokens per session scan A e78472e3cb05
ui-designer is a skill published in the GitHub repository TestAny-io/testany-agent-skills (82 stars, last pushed yesterday), licensed MIT. It adds 154 tokens to every session and 4,963 once invoked, about $0.0006 per session on Opus 5.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-10-12.
Other skills, from other repositories
form-patterns
A reference guide for arranging managed forms in the 1C platform. It describes common layouts, naming conventions, events, properties, and advanced patterns for different form types.
img-grid
An image overlay that draws numbered vertical and horizontal lines over a PNG or JPG image.
interface-edit
An editor for the command interface of a 1C subsystem, the part that controls which commands users see and where they appear.
design-skills
Use when a task designs or edits a web surface, image, motion graphic, or video and needs one verified design card plus objective QC.
technical-presentations
Use when planning, building, refactoring, or reviewing technical talks or training decks: story arc, claim titles, visual evidence, code slides, checkpoints. On demand only.
shaft-accessibility-testing
Use when testing web or mobile accessibility for WCAG conformance, keyboard and focus behavior, semantics, errors, or user impact.