设计与前端

TypeUI 设计基础原则

为 AI 生成界面提供与设计系统无关的通用 UI/UX 准则,在缺少具体规范或美学与无障碍冲突时给出可依据的判断。

70/ 100
高度推荐

在静态复核能达到的范围内证据最充分,且没有未控制的重大风险;仍需核对你的环境与数据敏感度。

查看评分依据 ↓
可直接使用于
ChatGPT · Codex · Claude Code · Claude.ai
Star 数
★ 2k
最近更新
3 个月前
License
NOASSERTION
ui-ux-principlesdesign-systemaccessibilitywcag
+3typographyspacingvisual-hierarchy

这个 Skill 能做什么,适合哪些场景?

typeui-fundamentals 是 TypeUI 技能集中的一个独立技能,位于仓库的 skills/fundamentals/ 目录。它提供五份原则文档,覆盖视觉层次、间距、交互与 UX 法则、字体排印以及 WCAG 2.1/2.2 无障碍要求。这些原则不绑定任何设计系统,应在加载设计系统之后读取,用于解释“为什么这样设计”并裁决规范未覆盖的决定。明确声明了冲突优先级:具体 token 以设计系统为准,结构原则以本层为准,流程以垂直层为准,而无障碍在任何层级都不可妥协。

技能本体是一组 Markdown 参考文档:ui-principles.md(层次、布局节奏、色彩、深度、响应式)、spacing-principles.md(4 点网格、间距层级)、ux-principles.md(30 条 UX 法则、9 种控件状态、触控目标)、typography-principles.md(字阶、可读性、响应式字体)、accessibility.md(对比度、焦点可见性、键盘导航、ARIA)。加载后,Agent 在设计系统未覆盖的决策上依据这些原则给出答案,并在原则与设计系统冲突时标记冲突供人复核。它不定义工作流阶段、质量门、反模式目录或设计 token。

适合
  • 全栈/前端开发者让 Claude Code 或 Codex 生成界面,但项目还没有成型的设计系统,需要原则兜底而不是随意发挥。
  • 团队已使用 TypeUI 设计系统技能,希望 Agent 在加载 DESIGN.md/token 之后仍能解释每项决定背后的原理。
  • 审查者或评审 Agent 需要检查生成界面是否满足 WCAG 要求,如对比度、焦点可见性、键盘导航。
  • 美学与无障碍要求发生冲突时,需要一个明确规则:无障碍优先于视觉偏好。
  • 使用不支持任何特定设计系统的多框架项目(任意前端栈),需要垂直无关、适用于所有界面的基础准则。

如何安装这个 Skill?

开始前你需要
Agent 需要具备
  • Shell / 命令行
  • 本地文件系统
需要预先安装
  • markdown-capable AI client

在终端运行:npx skills add https://github.com/bergside/typeui --skill typeui-fundamentals。也可从 GitHub 仓库 bergside/typeui 手动复制 skills/fundamentals/ 目录到你的 Agent Skills 目录。源文档未说明各客户端的默认安装路径,请查阅所用工具的文档。

通用方式:手动安装到 Claude Code(macOS / Linux)
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/bergside/typeui.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/fundamentals" ~/.claude/skills/
rm -rf "$tmp"

根据源仓库地址和 Skill 路径自动生成,只复制这个 Skill 的文件夹。如果上文有作者提供的安装方式,请优先按作者说明操作;想只在当前项目中使用,把 ~/.claude/skills 换成项目里的 .claude/skills。

如何使用这个 Skill?

试试这样说

安装后,把下面任意一句发给 Agent 即可触发:

  • 用这个设计系统实现一个设置页,并确保符合 WCAG 对比度要求

按技能的加载顺序说明:先加载你的设计系统(SKILL.md / DESIGN.md 及 token 模块),再加载本技能的五份原则文档。之后正常请求 UI 工作,例如“用这个设计系统实现一个设置页,并确保符合 WCAG 对比度要求”。当设计系统未覆盖某项决定时,Agent 会回退到这些原则。CLI 仅用于安装/生成,技能本身无运行时命令。

这个 Skill 有哪些优点和局限?

优点
  • 设计系统无关,适用于任意前端栈与界面类型。
  • 覆盖面完整:层次、间距、UX 法则、字体、WCAG 无障碍五大模块。
  • 冲突优先级规则明确,避免原则与设计系统互相矛盾。
  • SKILL.md 采用 MIT 许可,元数据标注作者为 typeui.sh。
  • 可与其他 TypeUI 技能(设计系统、垂直流程)分层组合。
局限
  • 需要配合设计系统使用才能发挥最大价值,单独使用时缺少具体 token 与组件规范。
  • 仓库整体 GitHub 许可标记为 NOASSERTION,仅 SKILL.md 与 CLI 声明 MIT,重分发前需自行确认。
  • 原则文档中的模块(30 条 UX 法则、9 状态契约等)的实际质量与准确性无测试套件或评测证据。
  • 源文档未提供各客户端的具体安装路径与触发示例。
  • 工作流、质量门、反模式与行业内容在其他技能中,需要额外安装才能获得。

这个 Skill 与同类方案有什么区别?

与相关 Skills 并排比较;分数均按同一 FSRS 标准得出。

Skill FS 评分 Star 数 最近更新 License
TypeUI 设计基础原则 本页 70 · 高度推荐 ★ 2k 3 个月前 NOASSERTION
Impeccable 58 · 推荐 ★ 81k 12 天前 Apache-2.0
SwiftUI 设计技能 57 · 谨慎使用 ★ 209 5 个月前 MIT
独特前端设计指导 ✓ Anthropic · 官方 60 · 推荐 ★ 38k 11 天前 Apache-2.0
Stitch 品味设计系统 42 · 不推荐 ★ 8.5k 2 个月前 Apache-2.0

FollowSkills 如何评估这个 Skill?

FollowSkills 评估 · FSRS-1.0
高度推荐
70/ 100 五分制 3.5 / 5
1价值适配14 / 20 · 3.5/5

通用 UI/UX 设计原则参考(视觉层级、交互法则、排版基础、WCAG 无障碍要求),设计系统无关、纯知识型指导,不涉及远程服务,风险面小于同仓库其他平台适配 skill。

2可靠性13 / 20 · 3.3/5
3安全性22 / 25 · 4.4/5
4证据6 / 15 · 2.0/5
5易用性8 / 10 · 4.0/5
6维护性7 / 10 · 3.5/5
1 2 3 4 5 6

点击维度查看打分理由

评估于 2026年7月17日 评估证据[1]

证据充分度:低 — 主要依赖静态检查、作者材料或有限演示;适合发现线索,不适合做高风险决策。

本条评估按 FSRS 1.0 标准完成,维度分不做换算,已进入按 FSRS 2.0 重新评估的复核队列。

查看完整评分方法 →

同仓库的其他 Skills

均来自 bergside/typeui

相关 Skills