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.
npx skills add CCDawn/codex-skills --skill briefbound-ui-designgit clone --depth 1 https://github.com/CCDawn/codex-skillsWrote 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/ccdawn/codex-skills/briefbound-ui-design)<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>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.00062 | $0.01929 |
| Opus 5 | $0.00031 | $0.00964 |
| Sonnet 5 | $0.00012 | $0.00386 |
| Haiku 4.5 | $0.00006 | $0.00193 |
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.
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不落地该方向。
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.
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.
- 8d ago First seen · 85 lines · 62 tokens per session scan A cf74a8e4199e
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.
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.
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.
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.
chinese-documentation
A Chinese technical-documentation style guide covering spacing, punctuation, numbers, terminology, and links when Chinese and English appear together.
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.
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…