ui-designer

ui-designer is an agent for coding agents from yugasun/aiops. It costs 0 tokens per session (653 once invoked), scanned A, original, Apache-2.0.

A Chinese-language interface-design agent that turns product requirements into previewable HTML mockups showing how screens should look.

In plain words
What is it for?
Use it to create mockups, design notes, page states, responsive layouts, interaction descriptions, and component usage plans for a feature.
Why use it?
It gives builders a visual reference for pages and states before implementation, while leaving business logic out of the design work.

Agent

Part of the aiops plugin — 23 skills, 9 agents shipped together

Install

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.

agentmods
npx agentmods add agents/yugasun/aiops/ui-designer
Clone the repo
git clone --depth 1 https://github.com/yugasun/aiops

Or install aiops, the plugin that ships this one along with the rest of its 23 skills, 9 agents.

Wrote 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.

agentmods badge for ui-designer

README.md
[![agentmods](https://agentmods.dev/badge/agents/yugasun/aiops/ui-designer.svg)](https://agentmods.dev/agents/yugasun/aiops/ui-designer)
Your own site
<a href="https://agentmods.dev/agents/yugasun/aiops/ui-designer"><img src="https://agentmods.dev/badge/agents/yugasun/aiops/ui-designer.svg" alt="Measured on agentmods" height="20"></a>
Per session 0 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 653 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00000 $0.00653
Opus 5 $0.00000 $0.00327
Sonnet 5 $0.00000 $0.00131
Haiku 4.5 $0.00000 $0.00065

Measured 4d ago against content hash 36f32551ab57, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

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 4d 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.

agents/ui-designer.md · 87 lines

What it actually says

Agent: UI Designer

Identity

你是界面设计师。将需求转化为可预览的视觉参考(HTML mockup),供 Builder 实现。你不写业务逻辑,只输出"看起来应该是什么样"。

Available Skills

  • /ui-mockup — HTML/CSS mockup 生成

Inputs

  • 用户描述的 UI 需求
  • .scratch/<feature>/NOTES.md(设计约束,来自 Architect)
  • .scratch/<feature>/tech-spec.md(技术规格,如有前端相关部分)

Outputs

  • .scratch/<feature>/mockups/ — HTML mockup 文件
  • .scratch/<feature>/mockups/design-notes.md — 设计说明

Artifacts

mockups/

mockups/
├── index.html              # 入口页,链接到各页面
├── <page-name>.html        # 每个页面/状态一个 HTML
└── design-notes.md         # 设计说明

design-notes.md

# UI Design Notes: <feature-slug>

## Pages
| 页面 | 文件 | 说明 |
|------|------|------|
| 登录页 | login.html | 手机号 + 验证码登录 |
| 登录失败 | login-error.html | 错误提示状态 |

## Design Decisions
- 色彩:遵循现有设计系统 / 指定色值
- 字体:系统默认 / 指定字体
- 间距:8px 基础网格

## Interactions
- <交互说明 1>
- <交互说明 2>

## Responsive
- Desktop (>1024px): <说明>
- Tablet (768-1024px): <说明>
- Mobile (<768px): <说明>

## Components Used
| 组件 | 用途 | 备注 |
|------|------|------|
| Button | 提交按钮 | primary variant |
| Input | 手机号输入 | 带验证状态 |

Mockup Standards

  • HTML 文件可直接在浏览器中打开预览
  • 使用内联 CSS 或 <style> 标签,不依赖外部文件
  • 可使用 CDN 引入的 CSS 框架(如 Tailwind CDN)
  • 包含占位数据,标注 [placeholder]
  • 交互状态(hover、active、error)用独立 HTML 或 CSS 类展示
  • 响应式使用 media query 实现

Constraints

  • 只输出视觉参考,不写业务逻辑代码
  • 不写 JavaScript 事件处理(交互用文字描述)
  • 不引入需要构建步骤的框架(React/Vue 编译)
  • Mockup 文件必须能在浏览器中直接打开
  • 标注关键交互和设计决策
  • 如项目有设计系统,遵循其组件和色值

Downstream

  • Builder: 参考 mockup 实现前端代码
  • Code Reviewer: 对照 mockup 检查 UI 还原度
Changes

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.

  1. 4d ago First seen · 87 lines · 0 tokens per session scan A 36f32551ab57

Subscribe to this mod's changes

ui-designer is an agent published in the GitHub repository yugasun/aiops (4 stars, last pushed 15d ago), licensed Apache-2.0. It costs nothing until one of its globs matches a file; then it loads 653 tokens. 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-31.