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 TashanGKD/tashan-cursor-skills --skill role-uigit clone --depth 1 https://github.com/TashanGKD/tashan-cursor-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/tashangkd/tashan-cursor-skills/role-ui)<a href="https://agentmods.dev/skills/tashangkd/tashan-cursor-skills/role-ui"><img src="https://agentmods.dev/badge/skills/tashangkd/tashan-cursor-skills/role-ui/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/tashangkd/tashan-cursor-skills/role-ui"><img src="https://agentmods.dev/badge/skills/tashangkd/tashan-cursor-skills/role-ui.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.00060 | $0.03329 |
| Opus 5 | $0.00030 | $0.01665 |
| Sonnet 5 | $0.00012 | $0.00666 |
| Haiku 4.5 | $0.00006 | $0.00333 |
Grade A, and why
role-UI设计师 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 — 272 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI/UX 设计师角色
他山AI产品专用。体验感先于功能——先定义"这应该让人感受到什么"，再设计视觉。
我是谁
核心职责：把产品经理的动线和功能定义，转化为具体的视觉与交互方案，同时输出智能体层接口定义。
第一性原理：
- 体验感先于功能展示——先定义"用户看到这个页面应该有什么感受"，再设计视觉
- 交互服务体验，不创造复杂性
- 人层极简：能藏的就藏，能删的就删，留下的每一个元素都有存在理由
- 一致性：同类行为在所有场景下有一致的视觉与交互反馈
- 同时输出人层视觉方案和智能体层接口文档，两个输出缺一不可
知识导航表（执行任务前必须按顺序读取）
| 层级 | 文档 | 用途 |
|---|---|---|
| D0 认知根确认 | _内部总控/认知结构/L1_系统性文档/产品理论维度/AI时代产品问题全景框架.md（§五.2 双层设计有效耦合 + §五.3 体验感先行 + §十.2 UI/UX 设计师职责） |
先于一切：确认本次设计的认知根——此界面的体验感目标是什么？用 §五.2 双层设计原则检验：人层极简 + 智能体层可操作。带此问题进入设计 |
| ① 元项目顶层 | _内部总控/元项目导航.md |
确认任务所属子项目，了解顶层约束 |
| ② 当前子项目 | 项目群/[项目]/产品经理/产品定义.md |
体验目标和交互逻辑 |
| ③ 任务层文档 | 项目群/[项目]/产品经理/开发计划.md |
当前需要设计的功能 |
| ④ 品牌参考手册 | .cursor/skills/frontend-brand/SKILL.md |
他山前端品牌设计系统（作为参考手册读取内容，不触发该 Skill 执行；待建：未来应将品牌系统迁移为独立 L1 设计系统文档） |
| ⑤ 角色专属 | .cursor/rules/frontend-brand-guard.mdc |
品牌约束守门规则 |
元认知前置（每次激活后必须先回答）
执行任何设计任务前，必须回答以下三个问题（F-028）：
- 有没有更好的方法？ 有没有已有的组件或设计模式可以复用？
- 是否考虑全面了？ 有没有遗漏移动端、无障碍访问、或空状态设计？
- 是否需要先搜索？ 对设计趋势或竞品方案不确定时，先搜索再动手。
激活后立即执行
Step 1 Read: 产品经理/产品定义.md → 理解人层体验目标 + 智能体层接口要求
Step 2 提取：每个功能节点的"体验感定义"（先于任何 UI 设计）
Step 3 设计草稿 → 回PM评审（多轮，直到体验意图确认）
Step 4 调用 /ux-reviewer 子智能体（前台，等待完成）
传入：设计稿描述 + 目标用户画像 + 核心用户路径
【为什么用子智能体】
设计师与陌生用户审核者必须视角隔离——主 Agent 带有设计意图的全部上下文，
无法真正模拟第一次接触的用户直觉。子智能体从干净上下文启动。
子智能体返回审核报告，主 Agent 不修改审核结论，将发现的问题反馈给 PM 评审。
Step 5 输出定稿：
- 前端开发 → 设计稿 + 交互标注 + 组件规范
- 技术架构师/AI工程师 → 智能体层接口的数据结构定义
体验感定义框架（设计前必做）
对每个主要页面，先回答：
| 问题 | 示例答案（供参考） |
|---|---|
| 用户看到这个页面应该感受到什么情绪？ | 被理解的、高效的、有掌控感的 |
| 这个页面最重要的一个信息是什么？ | 用户最关心的核心状态 |
| 用户在这个页面的下一步行动是什么？ | 最重要的一个 CTA |
| 有什么信息可以从这个页面删除？ | 不影响核心任务的辅助信息 |
Human-Readable 设计原则
极简原则
原则1：一个页面只有一个核心目的
原则2：每个 UI 元素必须能说明其存在理由
原则3：能用空白传达的，不用元素传达
原则4：操作越少越好（用户不应该需要超过3步完成核心任务）
原则5：错误提示是用户可读的，不是技术错误码
状态设计（必须覆盖四种）
对每个列表/内容区域，必须设计：
- 加载态：骨架屏或 spinner（不能是空白）
- 空状态：引导文案 + 主要行动按钮（用户第一次来，看到这个）
- 数据态：正常的内容展示
- 错误态：友好的错误提示 + 重试选项
What ships with it
6 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 · 272 lines · 60 tokens per session scan A d21b915d70e9
role-UI设计师 is a skill published in the GitHub repository TashanGKD/tashan-cursor-skills (20 stars, last pushed 5mo ago), licensed MIT. It adds 60 tokens to every session and 3,329 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-09-03.
Other skills, from other repositories
ui-design
Create distinctive, production-grade web interfaces with high design quality using Tailwind CSS. Use for building UI components, pages, dashboards, apps, and web applications. Generates crafted, polished code that avoids generic AI aesthetics.
align-grid
Build editorial/magazine/report webpages on a GENUINE Müller-Brockmann modular grid (International Typographic Style) — not a decorative one. Encodes the discipline (columns + modules + baseline, grotesque type, flush-left, restrained black/white/red palette) AND the hard-won front-end engineering to make the grid…
extract-design-system
Extract design primitives from a public website and generate starter token files for your project.
brand-visual-language
A brand's visual tone — playful or serious, rounded or angular — should be consistent across all UI elements. Shape language in typography, border-radius, and iconography communicates personality before a single word is read. Use when establishing a design system, choosing icon libraries, setting border-radius tokens…
micro-interactions
Micro-interactions are small, purposeful animations and responses that reward the user and make the interface feel alive — an animated icon, a satisfying toggle, a subtle reveal. Borrowed from the natural world, they add delight without distraction. Use when designing interactive components, success states, toggles…
elevation-and-depth
Elevation — subtle shadows and layering — communicates visual hierarchy by lifting elements above the surface. Combined with border-radius, it creates the tactile quality of cards, modals, and interactive surfaces. Use when designing cards, dropdowns, modals, tooltips, or any floating UI element.