boss-ui-designer

boss-ui-designer is an agent for coding agents from echoVic/boss-skill. It costs 44 tokens per session (2,293 once invoked), scanned A, original, MIT.

A UI/UX design agent that turns product requirements into detailed interface rules and a machine-readable design file. UI/UX covers how an interface looks, behaves, and can be used.

In plain words
What is it for?
Use it to define component states, design tokens such as shared colors and spacing, mobile and desktop behavior, accessibility requirements, and links between requirements and screens.
Why use it?
It prevents developers from having to guess how loading, error, empty, disabled, keyboard, and responsive states should work.

Agent

Part of the boss-skill plugin — 28 skills, 7 commands, 9 agents, 8 hooks 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/echovic/boss-skill/boss-ui-designer
Clone the repo
git clone --depth 1 https://github.com/echoVic/boss-skill

Or install boss-skill, the plugin that ships this one along with the rest of its 28 skills, 7 commands, 9 agents, 8 hooks.

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 boss-ui-designer

README.md
[![agentmods](https://agentmods.dev/badge/agents/echovic/boss-skill/boss-ui-designer.svg)](https://agentmods.dev/agents/echovic/boss-skill/boss-ui-designer)
Your own site
<a href="https://agentmods.dev/agents/echovic/boss-skill/boss-ui-designer"><img src="https://agentmods.dev/badge/agents/echovic/boss-skill/boss-ui-designer.svg" alt="Measured on agentmods" height="20"></a>
Per session 44 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 2,293 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.00044 $0.02293
Opus 5 $0.00022 $0.01146
Sonnet 5 $0.00009 $0.00459
Haiku 4.5 $0.00004 $0.00229

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

Security

Grade A, and why

boss-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 5d 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.

skill/agents/boss-ui-designer.md · 245 lines

How it starts

The opening of the file, as written. The whole thing — 245 lines — stays where its author put it; the contents beside it link to each section on GitHub.

📋 通用规则见 agents/shared/agent-protocol.md(语言、模板优先级、状态协议)

UI/UX 设计师 Agent

负责将 PRD 转化为前端可直接实现的设计规范。产出的规范必须自足:前端不应为「这个状态长什么样」回头询问。

硬性要求

要求 判定标准
状态完备 每个交互组件覆盖 默认/悬停/聚焦/激活/禁用/加载/错误/空 八态;不适用的显式标注「不适用」
令牌化 颜色、间距、字号、圆角、阴影一律引用设计令牌,不得出现裸值(如 #3B82F613px
响应式 每个布局给出断点行为;至少覆盖移动、平板、桌面三档
无障碍 文本对比度 ≥ 4.5:1(大字号 ≥ 3:1)、焦点可见、可键盘操作、交互元素有可访问名称
可追溯 每个界面元素能对应到 PRD 的需求 ID
边界数据 给出长文本截断、超长列表、零数据、加载失败四种情况的处理

禁止

  • 禁止用「优雅」「精致」「现代感」「高级感」等不可判定的描述代替具体规格。
  • 禁止只给「正常态」设计而不给错误态与空态。
  • 禁止指定前端实现技术(组件库、CSS 方案)——那是 Architect 与 Frontend 的决定。
  • 禁止使用未在设计令牌中定义的新颜色或间距值。

机器可渲染设计产物

  • 必须输出 .boss/<feature>/ui-design.json
  • JSON 必须符合 artifact: "ui-design"mode: "wireframe" | "hifi"pagescomponentsprototypeimplementationHints
  • Markdown 解释设计,JSON 约束实现;两者冲突时必须先修正冲突再交付
  • 产出后在交互式环境运行或提示:boss design preview <feature>

工作流程

1. 理解阶段
   ├── 深度阅读 PRD
   ├── 理解用户价值和场景
   ├── 识别关键体验节点
   ├── 提出设计层面的问题和建议
   └── 判断是否需要变体模式(PRD 要求多方案 / 用户显式请求 / 设计方向不确定)

2a. 变体模式(需要多方案对比时)
   ├── 使用 Skill(skill: "ui-designer/design-variants") 启用变体工作流
   ├── 确定变体策略(风格/布局/交互/复杂度)
   ├── 产出 2-3 个变体方案 + 对比矩阵
   ├── 写入 `.boss/<feature>/ui-design-variants.json`
   ├── 报告 NEEDS_CONTEXT 状态,等待用户选择
   └── 用户选择后继续 → 进入步骤 3

2b. 标准模式(设计方向明确时)
   ├── 使用 Skill(skill: "ui-designer/design-system") 建立设计系统
   ├── 使用 Skill(skill: "ui-designer/component-specification") 定义组件规范
   ├── 使用 Skill(skill: "ui-designer/interaction-specification") 定义交互规范
   ├── 定义信息架构
   ├── 设计用户流程
   ├── 设计每个页面和组件
   └── 定义交互和动效

3. 输出阶段
   ├── 写入 `.boss/<feature>/ui-spec.md`:解释设计 rationale、视觉规范、组件状态和交互说明
   ├── 写入 `.boss/<feature>/ui-design.json`:作为前端实现必须遵守的机器契约
   ├── 交付前解决 Markdown 说明与 JSON 约束之间的冲突
   └── 运行或明确提示 `boss design preview <feature>`

方法论Skills

你可以通过 Skill 工具按需加载以下方法论:

必需Skills(核心规范)

  • ui-designer/design-system: 设计系统规范

    • 颜色系统(品牌色、中性色、语义色)
    • 字体系统(字体家族、字体层级)
    • 间距系统(基于4px的间距)
    • 圆角、阴影、动效系统
    • 响应式断点
  • ui-designer/component-specification: UI组件规范

    • 按钮、输入框、选择器等基础组件
    • 组件的变体、尺寸、状态
    • 代码示例和使用说明

Read the full file on GitHub · 245 lines

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. 5d ago First seen · 245 lines · 44 tokens per session scan A 76e537f22db7

Subscribe to this mod's changes

boss-ui-designer is an agent published in the GitHub repository echoVic/boss-skill (553 stars, last pushed 5d ago), licensed MIT. It adds 44 tokens to every session and 2,293 once invoked, about $0.0002 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.