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 agentmods add skills/lync-cyber/cataforge/ui-designnpx skills add lync-cyber/CataForge --skill ui-designgit clone --depth 1 https://github.com/lync-cyber/CataForgeWrote 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/lync-cyber/cataforge/ui-design)<a href="https://agentmods.dev/skills/lync-cyber/cataforge/ui-design"><img src="https://agentmods.dev/badge/skills/lync-cyber/cataforge/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.00046 | $0.01829 |
| Opus 5 | $0.00023 | $0.00915 |
| Sonnet 5 | $0.00009 | $0.00366 |
| Haiku 4.5 | $0.00005 | $0.00183 |
Grade A, and why
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 6d 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 — 106 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI设计 (ui-design)
能力边界
- 能做: 设计方向决策、设计系统token定义、页面布局决策、组件规范定义、交互流程、响应式策略、组件目录维护(UC-NNN注册/去重/合并)、设计token一致性检查
- 不做: 需求分析、架构设计、代码实现、Penpot 代码骨架生成与设计一致性验证（generate / verify 的调用方分工见 penpot-bridge description）
输入规范
- prd#§2功能需求(F-{NNN})
- arch#§2模块划分(M-{NNN})
- 用户对产品调性和视觉偏好的输入(Step 1采集)
输出规范
- 设计方向声明(调性/风格参考/视觉策略)
- 设计系统token(色彩/排版/间距)，含设计意图说明
- 组件清单(UC-{NNN})，含变体、Props和视觉说明
- 页面布局(P-{NNN})，含路由、状态流和空间构成说明
- 导航与路由表
- 响应式断点策略
执行流程
可选前置: Grill 深度澄清
触发与启用协议见 design-grill §启用门（项目偏好或阶段入口一次询问；询问不等于启用，用户明确接受后调用 design-grill ui [范围]）。未启用即以 research user-interview 做普通澄清。design_tool=penpot 时仍先遵守既有 Design-Tool Capability Gate；总结返回后再进入 Step 1，Token 同步仍由本 skill 正式流程处理。
Step 1: 设计方向决策（产出任何Token前必须完成）
理解产品上下文，确立设计方向:
- 用户与场景: 产品服务什么人？在什么环境使用？(办公桌前/通勤中/嘈杂车间)
- 产品调性: 通过 user-interview 向用户确认调性方向，提供具体选项而非开放提问。示例选项:
- 专业克制(企业工具/数据平台) vs 活泼亲和(消费端/社交)
- 信息密集(仪表盘/管理后台) vs 内容聚焦(阅读/展示)
- 科技感(深色/渐变/动效) vs 朴素实用(浅色/清晰/快速)
- 视觉参考: 询问用户是否有喜欢的产品或网站作为参考。有参考时提取其视觉特征(配色倾向/排版密度/圆角程度/留白比例)作为设计输入
- 产出: 在ui-spec §0写入设计方向声明(2-3句)，后续所有Token和组件决策须可追溯到此方向
Step 2: 设计系统Token定义（对应ui-spec §1）
基于Step 1确立的设计方向定义Token，每个Token选择须有设计意图:
色彩体系:
- 确立主色(brand)、语义色(success/warning/error/info)、中性色(背景/文字/边框)
- 主色与辅色之间应有明确的主次关系——主色占视觉主导，辅色用于强调和引导，避免多个颜色平均分配
- 中性色不只是灰色，应从主色中提取色相倾向(暖灰/冷灰/蓝灰)以保持色彩体系的一致感
- 确保对比度满足WCAG AA标准(正文≥4.5:1，大标题≥3:1)
排版体系:
- 选择与产品调性匹配的字体，说明选择理由。西文字体与中文字体需分别指定并确认混排效果
- 定义清晰的字号层级(标题/副标题/正文/辅助文字)，层级之间有可感知的视觉差异
- 行高和字重定义完整(非仅指定font-family)
间距与圆角:
- 使用一致的间距基数(如4px/8px倍数)
- 圆角程度与产品调性一致(企业工具偏小圆角2-4px，消费产品可用较大圆角8-16px)
Step 3: [Penpot可选] Token同步
若 {INSTRUCTION_FILE} 设计工具 为 penpot，调用 penpot-bridge sync（emit / mirror 语义见其 §sync）
Step 4: 页面与组件规划
从PRD功能需求推导页面和组件需求:
- 先规划页面(P-{NNN})：按用户任务流组织，不是按功能模块罗列
- 再推导组件(UC-{NNN})：从页面需求中提取可复用的交互单元
Step 5: 组件定义（对应ui-spec §2）
为每个组件定义完整规范:
- 变体: 不仅列出状态名(default/hover/active/disabled/error)，还需描述各状态的视觉差异(如hover时颜色变化方向、disabled时的透明度处理)
- Props: 类型定义完整
- 视觉说明: 组件的空间比例、内间距、关键视觉特征(如按钮的高度比例、图标与文字的间距关系)
- 交互说明: 关键交互行为和反馈方式
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.
- 6d ago First seen · 106 lines · 46 tokens per session scan A 5d1c6ca7fe85
ui-design is a skill published in the GitHub repository lync-cyber/CataForge (128 stars, last pushed 1mo ago), licensed MIT. It adds 46 tokens to every session and 1,829 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.
Other skills, from other repositories
systematic-debugging
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.
local-ai-agents
Build local-first AI agents that run entirely on a developer workstation with Microsoft Foundry Local and Qwen function-calling models. Covers Small Language Models (SLMs), the OpenAI-compatible local endpoint, sandboxed local tools, local RAG with Chroma, local MCP servers, hybrid cloud/local routing, and the…
next-cache-components-adoption
Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the cacheComponents flag, work through a flood of blocking-prerender / instant validation errors, run the cache-components-instant-false codemod, or…
next-cache-components-optimizer
Drive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components / PPR, on initial load (hard navigation) and client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route at a time; the shipped test then…
next-partial-prefetching-adoption
Turn on Partial Prefetching in a Next.js app and work through the insights it surfaces. Use when the user wants to enable or adopt Partial Prefetching, flip the partialPrefetching flag, opt routes in with export const prefetch = 'partial', audit Link prefetch={true} behavior, preserve existing prefetched UI with…
chronicle
Analyze Copilot session history for standup reports, usage tips, session search, and session reindexing. Use when the user asks for a standup, daily summary, usage tips, workflow recommendations, wants to search or find past sessions by keyword/file/PR, wants to reindex their session store, or asks about deleting…