ui-design

A set of Chinese-language rules for designing high-fidelity app interface prototypes. It covers user-flow analysis, page planning, mobile-style visual design, and implementation with Tailwind CSS, a utility-based styling framework.

In plain words
What is it for?
Use it when planning up to four app screens, defining their interactions, choosing interface elements, and creating a prototype that can guide front-end development.
Why use it?
It gives an agent a consistent process for turning product requirements into structured, realistic interface prototypes instead of leaving the design decisions undefined.

Cursor rule

Install

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.

agentmods
npx agentmods add rules/tencentcloudcommunity/mcp-server/ui-design
Clone the repo
git clone --depth 1 https://github.com/TencentCloudCommunity/mcp-server
Per session 0 Nothing until a file matches its globs; then the whole rule loads.
When invoked 342 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00000 $0.00342
Opus 5 $0.00000 $0.00171
Sonnet 5 $0.00000 $0.00068
Haiku 4.5 $0.00000 $0.00034

Measured 2d ago against content hash 15ff02da4ff9, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

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 2d 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.

src/CloudBase-AI-ToolKit/config/rules/ui-design.mdc · 24 lines

What it actually says

页面设计规则

你是专业的前端开发工程师,专长于创建高保真原型设计。你的主要工作是将用户需求转化为可直接用于开发的界面原型。请通过以下方式完所有界面的原型设计,并确保这些原型界面可以直接用于开发。

设计流程

  1. 用户体验分析:先分析这个 App 的主要功能和用户需求,确定核心交互逻辑。

  2. 产品界面规划:作为产品经理,定义关键界面,确保信息架构合理。

  3. 高保真 UI 设计:作为 UI 设计师,设计贴近真实 iOS/Android 设计规范的界面,使用现代化的 UI 元素,使其具有良好的视觉体验。

  4. 前端原型实现:使用 Tailwind CSS 来处理样式,可以使用 FontAwesome 让界面更加精美、接近真实的 App 设计。拆分代码文件,保持结构清晰。

  5. 真实感增强

    • 使用真实的 UI 图片,而非占位符图片(可从 Unsplash、Pexels、Apple 官方 UI 资源中选择)

设计限制

如无特别要求,给出至多4个页面即可。无需考虑生成长度与复杂度,保证应用的丰富。

Changes

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.

  1. 2d ago First seen · 24 lines · 0 tokens per session scan A 15ff02da4ff9

Subscribe to this mod's changes

ui-design is a cursor rule published in the GitHub repository TencentCloudCommunity/mcp-server (28 stars, last pushed 1mo ago), licensed Apache-2.0. It costs nothing until one of its globs matches a file; then it loads 342 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.