Agent Skill · 前端设计

ui-ux-design-principles（UI 用户体验设计原则）

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务，不应只堆装饰元素；涉及真实页面改动时，应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

ui-ux-design-principles 是前端设计类 Agent Skill，可用宿主为 Codex、Claude、Cursor、Gemini CLI，通过GitHub 仓库获取，权限为只读；许可证信息还不明确，第三方扫描已通过，按安装量在前端设计类的 10,216 个 Skill 里排第 9,918。

总安装 190周安装 8GitHub Stars 1下载 67核验 2026-05-01

前端设计只读 GitHub 仓库未标认证来源可访问许可证需确认审计通过 Codex Claude Cursor Gemini CLI

安装说明

本站只整理中文说明，不托管安装包，也不代用户安装。

GitHub

许可证: unknown

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：ui-ux-design-principles（UI 用户体验设计原则）
来源仓库：https://github.com/krwhynot/crispy-crm
仓库路径：skills/ui-ux-design-principles
安装命令：
npx skills add https://github.com/krwhynot/crispy-crm --skill ui-ux-design-principles
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills

npx skills add https://github.com/krwhynot/crispy-crm --skill ui-ux-design-principles

这个 Skill 是做什么的

前端设计类 Skill 关注页面结构、视觉规范和组件写法，输出通常是可运行的界面代码。

用于指导用户界面设计的核心原则与实践准则。涵盖简洁性、一致性、可访问性和反馈机制。提供具体案例和违反原则的典型反例。ui-ux-design-principles 属于前端设计类 Skill，可作为该场景下的辅助能力补充。需结合当前设计系统进行本地化解释。主要用于培养团队的设计思维和规范意识。

来源仓库内路径：skills/ui-ux-design-principles

上手步骤

4 步

1
确认自己的宿主工具
公开资料标注支持 Codex、Claude、Cursor、Gemini CLI；先确认自己用的是其中之一，再按对应工具的 Skills 目录放置。
2
拿到安装命令
可以直接复制的命令是 npx skills add https://github.com/krwhynot/crispy-crm --skill ui-ux-design-princ…；命令里的占位符换成自己的路径或密钥再执行。
3
安装后重启宿主
命令执行完要完全退出宿主工具再打开，让新装的 Skill 被重新扫描到，否则列表里可能看不到。
4
按最小权限试用
它标注为只读，先用只读任务试一次，确认行为符合预期再扩大使用范围。

常见问题

6 条

ui-ux-design-principles 怎么安装？

在终端执行 npx skills add https://github.com/krwhynot/crispy-crm --skill ui-ux-design-principles。装完完全退出宿主工具再打开，让它重新扫描本地 Skill。

ui-ux-design-principles 支持哪些 AI 工具？

公开资料标注支持 Codex、Claude、Cursor、Gemini CLI。其他工具只要能读取本地 Skill 目录，一般也能手动放进去，但要自己确认触发方式是否一致。

ui-ux-design-principles 需要什么权限？

权限级别是只读。该 Skill 主要提供规则、说明或参考内容，本身偏只读；真正读写文件、联网或执行命令仍取决于宿主 Agent 的任务。

ui-ux-design-principles 是免费的吗？

公开资料没有标注明确许可证，收费和商用限制都无法确认。正式使用前请到来源仓库核对授权说明。

ui-ux-design-principles 用的人多吗？

公开数据是累计安装 190 次，近一周安装 8 次，下载 67 次，GitHub 1 星。这些数字来自第三方目录统计，只能当作热度参考，不代表质量或安全性。

ui-ux-design-principles 安全吗？

第三方扫描结果为通过，但这只覆盖已知的静态检查项，不能替代自己读一遍源码和安装命令。

值得选的地方和要先想清楚的地方

值得选的地方

同时适配 4 种工具，换客户端不用重新找替代品。
第三方扫描已通过，常见的高风险行为没有命中。
标注为只读权限，试用阶段不容易误改本地文件。

先想清楚的地方

许可证没有明确标注，能不能商用、能不能再分发都不确定。
第三方目录整理，版本更新和行为细节以来源仓库为准。

适不适合你

更适合

已经在用 Codex，想直接扩展它能力的人。
需要处理前端设计类任务、又不想每次都手写提示词的人。
只想先试试效果、不希望它改动本地文件的人。

不太适合

需要明确授权才能用到公司项目里的场景。
需要厂商级技术支持和 SLA 的生产系统。

前端设计类 Skill 对比

6 个同类

Skill	总安装	GitHub 星	权限	许可证	扫描
frontend-design 前端设计 · Codex、Claude	8,823,360	126,072	只读	MIT	通过
vercel-composition-patterns Vercel 组合模式 · Codex、Claude	3,858,816	25,893	需要联网	MIT	通过
vercel-react-native-skills Vercel React native skills 前端 · Codex、Claude	2,468,664	25,878	只读	MIT	通过
adapt adapt 搜索 · Codex、Claude	2,027,040	23,125	操作浏览器	未明确	通过
bolder bolder 分析 · Codex、Claude	2,004,288	23,130	只读	未明确	通过
ui-ux-design-principles UI 用户体验设计原则 · 本页	190	1	只读	未明确	通过

按安装量取同分类前几名；数字来自第三方目录统计，只作热度参考，不代表质量结论。

SKILL.md 原文

UI/UX Design Principles

Overview

Systematic framework for making UI/UX decisions grounded in cognitive science and user experience laws. Provides universal principles with project-specific implementation in resource files.

Core Mission: Design experiences that are fast under pressure, effortless under fatigue, predictable by pattern, and emotionally confident.

The Sienna Protocol

Every UI/UX decision follows this structured approach:

1. Cognitive Audit

Identify context: Who (role, expertise), Where (device, environment), What (task goals, pain points), Which laws apply (see UX Laws reference below).

2. Strategy Selection

Strategy	Focus	Best For
A - Familiar Efficiency	Low learning curve, speed	Power users, CRM/Excel veterans
B - Progressive Clarity	Reduced cognitive load	New users, complex onboarding
C - Hybrid Field Resilience	High contrast, large targets	Field use, tablets, challenging environments
D - Behavioral Momentum	Habit loops, reinforcement	Repetitive workflows

Default: Strategy C balances accessibility, speed, and adaptability.

3. Decision Matrix

Score criteria (1-5) weighted by importance. Redesign if Accessibility < 4, Usability < 3, Speed < 3, or 3+ criteria < 4.

See: Decision Matrix Guide for scoring details and case studies.

4. Implementation Spec

Output concrete code with exact CSS/Tailwind classes, ARIA attributes, responsive breakpoints, and feedback patterns.

Quick Reference

Topic	Resource	Key Rules
UX Laws	resources/ux-laws-reference.md	Fitts (44px targets), Hick (5-7 choices), Doherty (<400ms feedback), Jakob (familiar patterns), Miller (chunk to ~7 items), Tesler (push complexity to system), Von Restorff (accent sparingly for CTAs), Peak-End (end flows with confirmation), Gestalt: Proximity/Similarity/Continuity
Accessibility	`.claude/rules/CODE_QUALITY.md` (always loaded)	`aria-invalid`, `aria-describedby`, `role="alert"`, `aria-required`, focus management
Form Patterns	resources/form-patterns.md	Field grouping, validation timing, error handling
Colors	resources/color-system.md, resources/color-status-semantic.md	60-30-10 rule, semantic tokens, no hardcoded hex
Touch & Animation	resources/tokens-touch-animation.md	44px minimum, easing curves, reduced motion
Component Architecture	resources/component-architecture.md	Three-tier (Atoms, Molecules, Organisms)
Data Tables	resources/data-tables.md	Sortable columns, pagination, keyboard nav
Typography	resources/typography.md	Font hierarchy, line height, weight scales

Response Format

When answering UI/UX questions, structure responses as:

Cognitive Audit (2-4 sentences) — Context, friction points, UX laws at stake
Strategy Recommendation — Choose A/B/C/D with rationale
Implementation Spec — Concrete code, ARIA attributes, responsive considerations, feedback patterns

Pre-Commit Checklist

Touch targets >= 44px on all screen sizes
No hardcoded colors (hex, rgb, hsl)
ARIA labels on interactive elements (aria-invalid, aria-describedby, role="alert")
All inputs have associated <label htmlFor={id}> or aria-label
Required fields have aria-required="true"
Focus moves to first error on submit failure
Keyboard navigation works (Tab order, Enter/Space)
Feedback on all actions (<400ms)
Tested on primary target device

Resource Navigation

This skill includes 18 detailed resource files (308 KB). For a categorized index, see AGENTS.md:

Colors & branding → resources/color-*.md, color-system.md
Component patterns → resources/form-patterns.md, data-tables.md, component-architecture.md
Layout & spacing → resources/dashboard-layouts.md, tokens-spacing-grid.md, elevation.md
Implementation → resources/react-performance.md, typescript-patterns.md, state-management.md
UX decision-making → resources/decision-matrix-guide.md, ux-laws-reference.md

Core Beliefs

Design is a system, not an aesthetic
Every pixel must serve cognition or confidence
Accessibility and speed are fundamentals, not features
We don't redesign for beauty; we redesign for measurable improvement
Familiarity reduces friction; innovation must earn its cost

Cross-Reference: enforcing-principles skill for error handling, Zod validation, form state management, testing patterns.

平台分布

Codex

36.42%

按下载量换算24

Claude

27.37%

按下载量换算18

Cursor

17.81%

按下载量换算12

Gemini CLI

9.37%

按下载量换算6

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

只读

该 Skill 主要提供规则、说明或参考内容，本身偏只读；真正读写文件、联网或执行命令仍取决于宿主 Agent 的任务。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。目前只有一个公开来源，建议同时核对源仓库。

继续浏览同类 Skills

更多前端设计 Skills（10,216）返回 Skills 目录

上一个 Skill

ui-ux-design（用户界面用户体验设计）

fawzymohamed/devops

用于辅助云资源、部署、容器、基础设施和运维自动化任务。它适合让 Agent 检查配置、整理部署步骤、分析资源状态、生成排障思路或辅助云服务接入。使用时需要明确目标环境、账号权限、区域和资源组，区分本地测试与生产操作；涉及删除资源、重启服务、修改网络或权限配置时，应先确认影响范围。

下一个 Skill

ui-ux-design-system（用户界面用户体验设计系统）

hack23/cia