briefbound-ui-design

briefbound-ui-design is a skill for Claude Code, Codex from CCDawn/codex-skills. It costs 62 tokens per session (1,929 once invoked), scanned A, original, MIT.

A UI/UX design procedure for turning a product goal into an implementable interface plan. UI means what users see and interact with; UX means how that interaction works, including layout, responsive behavior, and accessibility.

In plain words
What is it for?
Use it to define page structure, interaction behavior, mobile and desktop layouts, accessibility choices, key states, and isolated previews for approval.
Why use it?
It keeps design decisions tied to the existing product and design system, while requiring review before an approved design changes the real interface.

Skill for Claude CodeCodex

Written for Claude Code and Codex: shipped in a Claude Code plugin, but also agents/openai.yaml present.

Part of the briefbound-skills plugin — 30 skills shipped together

Good fit Use it to define page structure, interaction behavior, mobile and desktop layouts, accessibility choices, key states, and isolated previews for approval.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/ccdawn/codex-skills/briefbound-ui-design
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.

Any agent
npx skills add CCDawn/codex-skills --skill briefbound-ui-design
Clone the repo
git clone --depth 1 https://github.com/CCDawn/codex-skills

Made for: Claude Code, Codex.

Or install briefbound-skills, the plugin that ships this one along with the rest of its 30 skills.

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 briefbound-ui-design

README.md
[![agentmods](https://agentmods.dev/badge/skills/ccdawn/codex-skills/briefbound-ui-design.svg)](https://agentmods.dev/skills/ccdawn/codex-skills/briefbound-ui-design)
Your own site
<a href="https://agentmods.dev/skills/ccdawn/codex-skills/briefbound-ui-design"><img src="https://agentmods.dev/badge/skills/ccdawn/codex-skills/briefbound-ui-design.svg" alt="Measured on agentmods" height="20"></a>
Per session 62 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,929 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
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.1 $0.00062 $0.01929
Opus 5 $0.00031 $0.00964
Sonnet 5 $0.00012 $0.00386
Haiku 4.5 $0.00006 $0.00193

Measured 8d ago against content hash cf74a8e4199e, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-08, from the pricing page.

Security

Grade A, and why

briefbound-ui-design 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 8d 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.

skills/engineering/briefbound-ui-design/SKILL.md · 85 lines

How it starts

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

Briefbound UI Design

目标

作为 UI/UX 专项 owner,把用户目标转成可实施、可渲染验证的界面契约。先尊重现有产品和设计系统;只有真实设计分叉会影响结果时才向用户对齐,不把普通前端修改升级成设计流程。

Briefbound task contract

  • Context Boundary: 用户目标、目标页面/组件、现有设计系统、相邻界面、实现技术栈和可运行环境。
  • Output Contract: 可实施的界面契约;命中预览闸门时先交付隔离预览 URL、代表截图、覆盖状态和用户批准状态。
  • Allowed Action: 在 Briefbound Router 授权范围内检查 UI surface;PREVIEW_REQUIRED 时只写隔离预览,收到用户 APPROVED 后才可修改正式 UI owning surface;不顺带重做品牌、后端协议或无关页面。
  • Success Evidence: 预览阶段为可访问网页、桌面/移动截图、关键状态与模拟边界;正式阶段为浏览器截图、DOM/布局、目标视口和交互状态检查。
  • Stop Condition: WAITING_USER_REVIEW、用户要求 REVISE/ABANDON、目标 surface 不明、品牌/设计系统冲突、应用不可运行且代码证据不足,或修改将越过授权边界。
  • Route Out: 品牌表达成为主要未知量时转 briefbound-visual-design;只交付方案或需要独立实施 handoff 时转 briefbound-frontend-engineering;已有界面审查转 briefbound-ui-review;跨组件事实源治理转 briefbound-design-system;复杂外部复用决策转 briefbound-feature-reuse-research;验证后的真实残留转 briefbound-development-cleanup;PR 正确性审查转 briefbound-pr-review;阻塞则回 briefbound-router

统一调用契约

  • 只处理 Briefbound task contract 范围;不匹配时回 briefbound-router 或更具体 owner,复合任务不吞其他 owner。
  • 用户可见内容默认中文,完成只报状态、产出、证据和剩余风险;代码、命令、路径、错误原文、API/协议、skill 名和枚举保留原样;Route Out 仅以 Briefbound task contract 为准,末行写 下一步建议: <一个具体动作>

触发强度

  • FAST_PATH:既有模式下的文案、小样式、状态或响应式修复。记录 PREVIEW_SKIPPED 依据,直接修改并做目标验证。
  • COMPACT_FLOW:新增页面/组件或多个相关交互状态。界面结果未批准时先制作隔离预览并等待用户预审。
  • FULL_FLOW:跨页面信息架构、设计系统、品牌重构、复杂编辑器或高影响可访问性改造。只保留会改变决策的方案和闸门。

默认 0 个问题。用户只说“更好看/更现代”时,先结合产品类型、现有界面和主要任务给出推荐方向;仅当不同方向会显著改变布局、交互或品牌结果时,集中给出 2-3 个具体选项,并标出推荐和代价。

单 owner 贯穿

用户同时要求设计并实现时,本 owner 贯穿预览、批准后的正式实施和浏览器验证,不再二次加载 Frontend Engineering。WAITING_USER_REVIEW 是必须暂停的自然闸门,不因已有一般实现许可而跳过。只有用户只要设计方案、需要跨会话/独立 owner 交接,或实现范围超出当前授权时才 Route Out。视觉细节和现有 token 使用是本任务内部决策;只有品牌语言或共享事实源成为主要问题时才切换专项 owner。

预览批准闸门

继承 Briefbound Router 的 PREVIEW_REQUIRED / PREVIEW_SKIPPED

  • PREVIEW_REQUIRED:新增页面,或信息架构、布局、交互、响应式结果、跨组件 UI 结果尚未获用户确认。
  • PREVIEW_SKIPPED:文案、明确小修、既有模式机械改动,或已有用户批准的具体设计/预览。
  • 预览优先复用项目技术栈、组件和安全 mock 数据,放入已有 preview/example surface 或任务级临时目录;不得先改正式 route、生产组件或真实写接口。
  • 必须提供可访问的本地网页、主要桌面/移动截图、关键状态和模拟/未验证说明。项目无法运行时才降级为独立 HTML/CSS/JS 网页。
  • 交付后进入 WAITING_USER_REVIEW,请用户回复 APPROVED / REVISE <反馈> / ABANDON。沉默、测试通过或 Agent/UI Review 判断都不构成批准。
  • REVISE 只迭代预览;APPROVED 后按已确认契约连续修改正式 surface;ABANDON 不落地该方向。

Read the full file on GitHub · 85 lines

Files

What ships with it

1 file 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.

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. 8d ago First seen · 85 lines · 62 tokens per session scan A cf74a8e4199e

Subscribe to this mod's changes

briefbound-ui-design is a skill published in the GitHub repository CCDawn/codex-skills (4 stars, last pushed 26d ago), licensed MIT. It adds 62 tokens to every session and 1,929 once invoked, about $0.0003 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-31.

Related

Other skills, from other repositories

personal-page-polish

Polish an existing single-file personal page after the user asks for a clearer, more readable design while preserving its content and no-build setup.

danger-English/agent-zero-to-one-cn · 33 tokens

pm-fe-assistant

A front-end change assistant for product managers, designers, and other non-developers. Front-end work changes what users see and interact with in a web interface.

wj100/fe-skills · 161 tokens

chinese-git-workflow

A reference for configuring Git with Chinese code-hosting services such as Gitee, Coding.net, GitLab China, and CNB, including SSH, HTTPS, credentials, CI, and repository mirroring.

jnMetaCode/superpowers-zh · 69 tokens

chinese-documentation

A Chinese technical-documentation style guide covering spacing, punctuation, numbers, terminology, and links when Chinese and English appear together.

jnMetaCode/superpowers-zh · 62 tokens

systematic-debugging

A step-by-step method for finding the underlying cause of technical problems before changing code. It covers reading errors, reproducing failures, checking recent changes, and tracing data across system components.

jnMetaCode/superpowers-zh · 24 tokens

codex-skin-pack-installer

Install Codex themes and Codex skin packs with npx skills. Use this skill when a user wants Codex to find, download, validate, apply, switch, remix, or restore Codex desktop themes such as caishen-readable, caishen-lite, mythic-guardian-noir, global-founder-bright, export-night, or caishen-max. It stages verified…

hashgraph-online/awesome-codex-plugins · 125 tokens