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 mrpulor-gh/nuphus --skill ui-designgit clone --depth 1 https://github.com/mrpulor-gh/nuphusWrote 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/mrpulor-gh/nuphus/ui-design)<a href="https://agentmods.dev/skills/mrpulor-gh/nuphus/ui-design"><img src="https://agentmods.dev/badge/skills/mrpulor-gh/nuphus/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/mrpulor-gh/nuphus/ui-design"><img src="https://agentmods.dev/badge/skills/mrpulor-gh/nuphus/ui-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00000 | $0.04975 |
| Opus 5 | $0.00000 | $0.02488 |
| Sonnet 5 | $0.00000 | $0.00995 |
| Haiku 4.5 | $0.00000 | $0.00498 |
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 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 — 198 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI 设计方法论
让 AI Agent 输出符合工业生产标准的专业级 UI，而非泛滥、雷同的「AI 味」设计。
一、 核心原则
先推理，后构建。 AI 最大的设计问题是跳过对业务逻辑和用户意图的深度分析，直接套用万能模板：居中 Hero 布局、饱和度过高的蓝紫渐变、无脑的 Inter 全家桶、以及满屏的毛玻璃卡片。这不叫设计，这叫向默认值妥协[cite: 3]。
本 Skill 旨在每个设计决策点插入强制推理步骤，让最终产出的每一行样式都有据可查[cite: 3]。
二、 四阶段决策协议 (Design Protocol)
处理任何前端 UI 或组件生成任务时，必须严格按顺序执行以下四个阶段[cite: 3]。跳过任意阶段均视为任务失败[cite: 3]。
Phase 1 ── 采样定位 (Context Sampling)
在编写任何代码前，必须率先明确并输出以下两个维度的核心简报[cite: 3]：
- 产品类型定义：明确该项目的真实定位。属于 SaaS / 专业工具平台 / 复杂仪表盘 / 技术文档站 / 个人主页 / 电商 / 内容资讯站 / 还是企业后台管理系统[cite: 3]？
- 用户注意力模式：用户的浏览状态是快速扫读（Scannable）、深度阅读（Deep Reading）、操作效率优先（Efficiency First）、还是随机浏览发现（Discovery）[cite: 3]？
Phase 2 ── 架构辩论 (Architectural Debate)
针对以下 7 个核心决策，必须写出 【选择 + 核心论据 + 潜在反方论点 + 你的回应】，以此逼迫设计走向深度思考[cite: 3]：
- 布局骨架与信息密度：根据受众选择稀疏、均衡还是极致密集，严禁直接套用万能的均衡间距[cite: 3]。
- 主色调与色彩体系：定义核心色彩和传达意图，必须明确说明为什么不使用泛滥的蓝紫渐变[cite: 3]。
- 字体搭配排版：明确定义标题字体与正文字体的对比搭配，禁止不加思考地单用一套字体走天下[cite: 3]。
- 视觉质感与纯度：在扁平（Flat）、微弱阴影（Subtle Shadow）、细线分隔（Border Divider）、玻璃质感（Glassmorphism）或粗糙质感（Brutalist）中选择一种，并确保全局视觉语言的纯粹与统一[cite: 3]。
- 动效预算与节制：根据交互性质定义动效级别。无 / 极低（仅 Hover 反馈） / 适中（滚动与状态触发） / 丰富（Hero 区域叙事编排）[cite: 3]。
- 亮色与暗色模式预设：基于目标用户的实际使用场景（如夜间编程工具或白天办公表格）决定默认皮肤，而非盲目默认为亮色[cite: 3]。
- 信息阶梯分层：严格约束单页面视觉权重最多不超过 3 层，并明确定义哪 3 层[cite: 3]。
Phase 3 ── 设计归档 (Rationale Archive)
输出 DESIGN-RATIONALE.md，将上述 7 个决策的辩论记录沉淀为底层设计资产[cite: 3]。严禁在后续组件中出现任何未经定义的随机硬编码颜色、字体大小或间距数值。
Phase 4 ── 代码构建 (Production)
完成前三个阶段的阻塞推演后，正式进入代码编写阶段[cite: 3]。
三、 通用「AI味」反模式黑名单 (10 Anti-Patterns)
若输出的代码或样式结构中命中以下任意一项，直接判定为设计失败[cite: 3]：
| # | 反模式 (Anti-Pattern) | 致命原因 (Why it fails) | 正确的做法 (The Right Way) |
|---|---|---|---|
| 1 | 蓝紫渐变 (from-indigo to-purple)[cite: 3] |
毫无辨识度的“大厂外包模板风”，视觉疲劳度极高[cite: 3]。 | 基于品牌真实调性使用单色或高阶复色[cite: 3]。 |
| 2 | 居中大标题 + 副标题 + 左右对称双按钮[cite: 3] | 全网最泛滥的万能首页布局，没有任何业务针对性[cite: 3]。 | 根据内容流向采用非对称、错落或左对齐的效率型排版。 |
| 3 | 三列等大毛玻璃卡片 + 装饰性 Emoji 图标[cite: 3] | 形式主义的重复堆砌，对用户而言没有任何实质性信息价值[cite: 3]。 | 用真实的数据结构、图表或有信息密度的文字进行排卡[cite: 3]。 |
| 4 | 缺乏字重和体系对比的单字体全家桶[cite: 3] | 界面毫无节奏感，文字信息在视觉上糊成一片[cite: 3]。 | 构建清晰的字号（Font Size）与字重（Font Weight）阶梯。 |
| 5 | 全局无差别统一使用 rounded-2xl 等大圆角[cite: 3] |
破坏了外层容器与内部微型控件之间的嵌套数学逻辑。 | 外层容器圆角大，内层控件圆角按比例递减，严禁一刀切[cite: 3]。 |
| 6 | 任何 Section 渲染都强行叠加 fade-in-up[cite: 3] |
不传达任何状态反馈的纯装饰性动画属于干扰视线的噪音[cite: 3]。 | 严格遵循动效预算决策树，非必要动效一律做删除处理[cite: 3]。 |
| 7 | 无视场景默认套用通用框架的 shadow-md 粗阴影[cite: 3] |
导致界面显得脏、厚重，缺乏高级UI所需的通透感[cite: 3]。 | 使用多层、极低不透明度的微弱投影或完全改用 1px 细线分隔。 |
| 8 | 交互元素缺乏 Hover / Focus / Active 状态切换[cite: 3] | 破坏了基础的人机交互反馈链路，属于不可原谅的半成品体验[cite: 3]。 | 任何可点击控件必须完整写好全状态的视觉反馈逻辑[cite: 3]。 |
| 9 | 突兀且无上下文的 "Trusted by" 灰度 Logo 墙[cite: 3] | 无效的社会证明，白白浪费用户首屏极为珍贵的黄金视线。 | 仅在有强烈信用背书需求的 B 端页面放置，且需与业务紧密结合[cite: 3]。 |
| 10 | 充斥着 "Lorem ipsum" 或毫无诚意的占位文案[cite: 3] | 真实的文案长度、换行逻辑才是影响整体UI排版的最核心要素[cite: 3]。 | 填充完全符合业务真实业务逻辑、具备语境的拟真文案进行测试[cite: 3]。 |
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.
- 9d ago First seen · 198 lines · 0 tokens per session scan A 3d508c900808
ui-design is a skill published in the GitHub repository mrpulor-gh/nuphus (61 stars, last pushed today), licensed Apache-2.0. It costs nothing until one of its globs matches a file; then it loads 4,975 tokens. 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
absolute-ui
Build polished, intentional UIs with concrete CSS/Tailwind values — typography, color, layout, spacing, dark mode, accessibility, animations, components. Encodes specific, opinionated rules with exact values, not vague advice. Covers buttons, cards, forms, tables, navigation, dashboards, landing pages, onboarding, and…
Tailwind CSS Patterns
Use this skill when styling UI with Tailwind and you want consistent design tokens, maintainable class composition, and good accessibility defaults.
popular-web-designs
54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components, layout rules, and ready-to-use CSS values.
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.