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 xiaomaolu/bluue-ai-skills --skill bluue-ui-designgit clone --depth 1 https://github.com/xiaomaolu/bluue-ai-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/xiaomaolu/bluue-ai-skills/bluue-ui-design)<a href="https://agentmods.dev/skills/xiaomaolu/bluue-ai-skills/bluue-ui-design"><img src="https://agentmods.dev/badge/skills/xiaomaolu/bluue-ai-skills/bluue-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/xiaomaolu/bluue-ai-skills/bluue-ui-design"><img src="https://agentmods.dev/badge/skills/xiaomaolu/bluue-ai-skills/bluue-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.00109 | $0.04681 |
| Opus 5.5 | $0.00044 | $0.01872 |
| Sonnet 5.5 | $0.00022 | $0.00936 |
| Haiku 4.5 | $0.00011 | $0.00468 |
Grade A, and why
bluue-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 yesterday.
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 — 126 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Bluue UI Design
先确定什么重要、什么相关、用户下一步做什么，再决定界面长什么样。用共同的对齐关系、可复用的组件和克制的视觉差异建立秩序；让过渡自然，让内容和操作清楚。
先判断任务与范围
- 开始前指出会改变结果的错误前提、逻辑跳跃和关键缺失。先看项目、真实内容和既有资料；能合理推断时直接推进，只有猜错代价高的缺失才询问。
- 判断属于：新设计、参考复刻、视觉优化、内容替换。可以组合，但不能把替换文案或修一个组件扩展成整页重设计。
- 再按当前区域的用户目标判断：帮助决策、完成操作、阅读理解或体验作品。同一产品不同区域可以不同；不能把营销页的表现手法默认套进课表、表格和设置。涉及方向选择、实质性重设计、精修或质量审查时，按需读取 references/impeccable-workflows.md。
- 优先级：用户明确要求与指定目标 > 当前产品品牌和设计系统 > 本 Skill 的偏好 > 外部参考的默认值。区分“准确复刻的目标”和“仅供借鉴的风格”；不拿相似页面替代指定页面。
- 先确认项目路径、目标页面/组件、受众和语言、真实素材、主要任务与改动范围。保持必要业务内容、用户数据、警告、成本、限制、工作流指引和已实现能力的准确性。
- 优化现有界面时继承有意设计的结构、字体、组件和 Tokens，改掉不一致与问题根因；不能为了反模板而抹去产品身份。
- 区分精修与重设计：精修保留已有方向，修复关系与实现；用户明确要求重设计且旧方向不成立时，保留真实内容和功能约束，重新决定构图、层级与组件组织，不能只换颜色、圆角或字体冒充重设计。
先定优先级和层级，再开始样式
对新设计或实质性重设计，简短写出以下决策，然后直接实施，不把设计说明变成等待审批的流程。局部修改沿用已有决策。
- 任务：谁在什么情境下，需要完成什么；当前区域最重要的下一步动作是什么。
- 优先级：区分必须立刻看到、按需查看和低频配置；依据任务价值、使用频率、依赖与风险排序。
- 信息结构：确定阅读顺序、相关分组、主次区域和主行动，再选择列表、表格、分栏、卡片或渐进展示。
- 视觉关系：确定公共对齐线、组内/组间间距、字体角色、组件密度，以及强调与弱化的方式。
- 复用与状态：选出可复用组件及其变体，列出本次真正需要的交互状态和过渡关系。
简洁来自优先级和分组，不来自把内容全部藏起来。频繁且关键的操作留在主界面，相关辅助信息放在附近，低频管理与配置再进入次级入口；路径应连续，有状态、有返回，不把所有功能平铺在一屏。
四条设计原则，落实为可检查的关系
| 原则 | 实施方式 | 检查问题 |
|---|---|---|
| 亲密性 / Proximity | 按任务与语义分组；组内紧密，组间更疏；字段、标签、说明、错误与所属操作保持关联。优先用间距、底色或分隔表达分组。 | 不读文字时，能否看出哪些元素属于一组？相关项是否被无关间距、边框或布局拆散？ |
| 重复 / Repetition | 同一语义角色复用组件、字号、字重、间距、控件尺寸、图标语言和状态模式。用变体表达必要差异。 | 同一类东西是否表现一致？同一外观是否暗示相同功能？是否存在长得相同、实际行为却不同的控件？ |
| 对齐 / Alignment | 为页面和局部区域建立少量明确的公共边、列和基线；嵌套组件继承父级布局，必要时做光学校正。 | 从整页看，标题、工具栏、内容和底部操作能否沿共同轴线阅读？是否有近似对齐造成的漂移？ |
| 对比 / Contrast | 按重要性使用清楚的尺寸、字重、位置、留白或颜色差异；先降低次要信息噪音，再强调重点。 | 主次是否一眼清楚？是否把所有元素都强调，或为了柔和把正文、控件和状态弱化到难以辨认？ |
这是组织关系的判断工具，不是固定比例、自动评分或普遍适用的布局公式。重复不等于同等强调，对齐不等于处处居中，亲密性不等于层层套卡片，对比不等于增加颜色和装饰。
把视觉对齐作为核心约束
- 先定页面容器、边距、栏宽和主要起始线，再排各模块。标题、说明、筛选、列表/表格、分页和操作条应共享有意的对齐关系。
- 用共同容器、Grid/Flex、公共 Tokens 和组件内部结构解决对齐；不要靠逐项补负边距、绝对定位或空占位去凑齐正常文档布局。参考复刻、叠层或画布确实需要定位时按其坐标系统实现。
- 文本按角色选择边缘和基线对齐。大小混排优先检查基线；数值列按比较任务对齐，通常右对齐并用等宽数字。不要机械居中表格所有列。
- 图标的外框居中不保证视觉居中；同时检查可见笔画、文字基线和点击区域。重复行保持图标槽、标签起点、值列与末端操作位置一致。
- 长标题、换行说明、不同位数的数值和缺省状态不能把相邻区域的公共轴线推散。先改布局约束和文本策略，再考虑局部光学校正。
- 先看整页和全视口的秩序，再看局部。手机应有适合重排后的公共边和分组，不只是缩小桌面布局。
- 卡片内图形还要按可见轮廓、明暗面积和视觉重心平衡；相同外框尺寸不代表相同视觉重量。优先保证主体可辨认、文字宽度合理，再调整装饰。做截图对比、功能卡片或已有页面的视觉精修时，读取 references/visual-refinement.md。
What ships with it
11 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.
- references/cascading-menu.md 4.6 KB
- references/design-patterns.md 3.1 KB
- references/impeccable-workflows.md 8.0 KB
- references/interaction-details.md 8.0 KB
- references/LICENSE.elaya.txt 1.0 KB
- references/LICENSE.impeccable.txt 11 KB
- references/motion-showcase.md 2.9 KB
- references/NOTICE.impeccable.md 1.2 KB
- references/source-integration.md 6.2 KB
- references/visual-refinement.md 5.3 KB
- references/visual-restraint.md 6.2 KB
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.
- yesterday Changed · -82 lines · -2 tokens per session df031571101c
- 2mo ago Changed · +13 lines · +15 tokens per session 90064cc3bd75
- 2mo ago First seen · 195 lines · 96 tokens per session scan A 5973e7ee093b
bluue-ui-design is a skill published in the GitHub repository xiaomaolu/bluue-ai-skills (6 stars, last pushed 2d ago), licensed MIT. It adds 109 tokens to every session and 4,681 once invoked, about $0.0004 per session on Opus 5.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-05.
bluue-ui-design compared with skills from other repositories
| Mod | Type | Stars | Last push | Licence | Scan | Tokens | Works with |
|---|---|---|---|---|---|---|---|
| bluue-ui-designxiaomaolu/bluue-ai-skills | Skill | 6 | 2d ago | MIT | A | 109 | Claude Code, Codex |
| anti-slop-designsickn33/agentic-awesome-skills | Skill | 49k | today | MIT | A | 34 | Claude Code |
| chakra-ui-builderchakra-ui/chakra-ui | Skill | 41k | 2d ago | MIT | A | 214 | Claude Code, Codex |
| visual-ralphYeachan-Heo/oh-my-codex | Skill | 34k | today | MIT | A | 52 | Codex |
| open-design-setupcompozy/compozy | Skill | 2.9k | today | MIT | A | 67 | Claude Code, Codex |
| frontend-visual-qadaymade/claude-code-skills | Skill | 1.5k | today | MIT | A | 125 | Claude Code, Codex |
| prototype-webnexu-io/html-anything | Skill | 9.4k | today | Apache-2.0 | A | 24 | Claude Code, Codex |