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 tranfu-labs/tranfu-skills --skill website-product-ui-designgit clone --depth 1 https://github.com/tranfu-labs/tranfu-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/tranfu-labs/tranfu-skills/website-product-ui-design)<a href="https://agentmods.dev/skills/tranfu-labs/tranfu-skills/website-product-ui-design"><img src="https://agentmods.dev/badge/skills/tranfu-labs/tranfu-skills/website-product-ui-design/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/tranfu-labs/tranfu-skills/website-product-ui-design"><img src="https://agentmods.dev/badge/skills/tranfu-labs/tranfu-skills/website-product-ui-design.svg" alt="Reviewed on agentmods" width="80" 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.00140 | $0.02313 |
| Opus 5 | $0.00070 | $0.01156 |
| Sonnet 5 | $0.00028 | $0.00463 |
| Haiku 4.5 | $0.00014 | $0.00231 |
Grade A, and why
website-product-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 9d 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 — 192 lines — stays where its author put it; the contents beside it link to each section on GitHub.
网站与产品 UI 设计
创建与评审 Web 界面，不强制植入特定品牌、框架、字体、图标库或组件库。
核心契约
- 用户的明确要求和目标项目既有设计系统是最高事实来源。
- 做视觉判断前，必须检查真实代码、Token、组件、资源和渲染状态。
- 除非用户明确要求迁移，否则保留项目现有技术栈和组件约定。
- 修改范围限制在用户要求及其正常实现依赖内。
- 不虚构缺失的品牌规则、Logo、字体或产品专属约定。
- 未实际观察的视口或交互状态不得标记为通过。
- 无法执行的检查记录为
not_run，并说明原因。
任务模式
| 模式 | 适用情况 | 默认动作 | 输出 |
|---|---|---|---|
create |
新建页面、Section、组件或状态 | 获得实现授权时编辑，否则给出补丁 | UI_CHANGE_REPORT |
modify |
修改已有 UI、样式、资源或行为 | 获得实现授权时编辑，否则给出补丁 | UI_CHANGE_REPORT |
refactor |
保持预期行为的实现重构 | 编辑并检查受影响的使用方 | UI_CHANGE_REPORT |
review |
评审代码、截图、设计稿或指定 UI 区域 | 只读 | UI_DESIGN_REVIEW |
visual_qa |
检查运行界面或渲染截图 | 默认只读；用户要求修复时可编辑 | UI_VISUAL_QA_REPORT |
若请求同时包含评审和实现，完成实现，并把相关发现与验证写入 UI_CHANGE_REPORT。
参考资料与权威边界
只加载当前任务需要的资料：
| 参考文件 | 读取时机 | 唯一职责 |
|---|---|---|
references/design-spec.md |
任何视觉设计或设计评审任务 | 页面任务分类、视觉决策原则与品牌资源边界 |
references/tokens.md |
字体、间距、圆角、深度、控件尺寸、焦点或状态任务 | 项目 Token 的发现、复用与扩展；无项目规范时提供默认基线 |
references/icons.md |
选择、增加、替换、导入或评审功能图标 | 唯一主库、Reicon 默认条件、语义注册表、尺寸、回退和验证规则 |
references/cards.md |
卡片、按钮、Tabs、标签、表单、列表、表格、浮层或反馈状态 | 不同组件的结构、交互行为和状态覆盖 |
references/responsive-layout.md |
页面结构、容器、栅格、断点、导航、媒体或溢出任务 | 响应式布局、默认容器与视口验证 |
以下权威顺序是本 Skill 唯一的冲突裁决来源：
- 用户对当前任务的明确要求。
- 项目正式设计系统文档。
- 受影响产品区域实际使用的共享 Token 与组件。
- 最接近的同类实现。
- 本 Skill 的通用默认基线。
两个同等权威的项目来源发生实质冲突时，报告 reference_conflict，并请求最小必要决策。
执行流程
- 确认目标、模式、预期结果和编辑权限。
- 检查项目结构、前端技术栈、依赖清单、样式、Token、共享组件和相邻实现。
- 读取
design-spec.md及任务所需的其他参考文件。 - 确定字体、间距、图标、组件和断点的项目事实来源；已有规范时不得用本 Skill 的默认值覆盖。
- 确定可完整交付的最小范围。
- 按模式执行：
create|modify|refactor：实现变更、保留无关行为、复用已有基础设施。review：只输出有证据的发现，不修改文件。visual_qa：检查真实渲染；除非用户要求修复，否则不修改。
- 运行相关项目命令并检查受影响的响应式与交互状态。
- 输出对应报告。
只有当目标缺失、必需资料不可读、权威冲突无法解决或实现依赖缺失导致无法继续时，才输出 UI_DESIGN_BLOCKER_REPORT。浏览器或可选命令不可用通常记为 not_run，不构成阻塞。
实现规则
- 复用既有布局基础、Token、组件、表单控件、导航模式、媒体处理和动效约定。
- 优先使用语义 Token。仅当项目没有合适值且新值具有可复用职责时新增 Token。
- 本 Skill 不生成、选择或修改配色；必须沿用项目现有主题与颜色系统。
- 项目没有可继承的颜色系统时，只完成不依赖具体色值的结构、排版、间距、组件与状态语义；颜色决策标记为
out_of_scope，不得自行补色。 - 未经要求，不在局部任务中引入新字体、图标库、CSS 方法或 UI Kit。
- 图标任务必须按
references/icons.md确定唯一主库和语义映射；写入导入前验证真实导出名，不按名称猜测或跨库回退。 - 不重绘或近似替代产品 Logo；只使用用户或项目提供的品牌资源，并保持比例。
- 组件状态按
references/tokens.md的状态职责和references/cards.md的组件规则实现，不机械补齐无关状态。 - 保留键盘焦点、可访问名称、可读对比、触控热区、错误恢复和 reduced-motion 支持。
- 状态变化不得只依赖颜色，也不得造成意外布局跳动。
- 动效只用于解释状态或空间关系，不作为装饰。
What ships with it
10 files 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.
- 9d ago First seen · 192 lines · 140 tokens per session scan A ff1d937e66e6
website-product-ui-design is a skill published in the GitHub repository tranfu-labs/tranfu-skills (2 stars, last pushed 2d ago), licensed MIT. It adds 140 tokens to every session and 2,313 once invoked, about $0.0007 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-09-03.
Other skills, from other repositories
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.
frontend-visual-qa
Audits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find…
prototype-web
A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.
refactoring-ui
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent…
animation-principles
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use motion-system (design-systems); for a full interaction spec use micro-interaction-spec.