如何将某个设计技能引入我的项目？

在项目目录下运行 npx typeui.sh pull 即可。例如 npx typeui.sh pull brutalism 会拉取 Brutalism 风格的技能文件夹。

SKILL.md 和 DESIGN.md 有什么区别？

SKILL.md 是给 AI agent 读取的指令文件，包含 token、组件规则、无障碍约束等信息；DESIGN.md 是给人阅读的，记录设计意图、理念和实现备注。

这些技能文件支持哪些 AI 工具？

原文提到支持 Claude Code、Cursor、Codex 以及其他 AI-powered agentic 工具。

可以在哪里预览这些设计技能的效果？

可以通过访问 https://typeui.sh/design-skills 在线预览所有设计技能。

September 26, 2026

Awesome Design Skills

AI & Machine Learning Prompt Engineering & Skill Management1

Get resource

为 AI 编程工具提供 67 个设计系统技能文件，通过一条命令引入项目。

MITClaude CodeCursorText InputImage InputCode Output

Prompt Sharing Prompt Templates Skill广场

安装 / 调用方式bash

npx typeui.sh pull <skill-name>

调用示例json

npx typeui.sh pull brutalism

Product facts

Type: AI Skill & Agent
Category: AI & Machine Learning › Prompt Engineering & Skill Management
Pricing: Open source
Platforms: Claude Code · Cursor
License: MIT
Launched: Sep 26, 2026
Listed: Sep 26, 2026
Website: github.com

Overview

GitHub GitHub

Awesome Design Skills 是一个开源仓库，收录了 67 个面向 AI 驱动型 agentic 工具的设计系统技能文件（design skill files）。它支持的工具包括 Claude Code、Cursor、Codex 等。 ## 它解决什么问题在使用 AI 编程助手生成 UI 时，开发者往往需要反复描述设计规范。该仓库将设计系统的规则结构化为 AI 可直接读取的文件，使 AI agent 在生成代码时能遵循一致的视觉风格与质量标准。 ## 文件结构每个设计技能以文件夹形式提供，包含两个核心文件： - **SKILL.md**：供 AI agent 读取的指令文件，涵盖 token 定义、组件规则、无障碍约束和质量门禁等内容。 - **DESIGN.md**：供人类阅读的设计意图说明，包含设计理念与实现备注。 ## 设计风格仓库提供了多种预设风格，例如 Agentic、Ant、Roku、Artistic、Bento、Bold、Brutalism、Cafe、Claymorphism、Claude、Clean、Codex、Colorful、Contemporary、Corporate、Cosmic、Creative、Enterprise、Dithered、Doodle、Dramatic 等。 ## 使用方式用户可以通过 TypeUI 平台预览所有设计技能的视觉效果，也可以使用 `npx typeui.sh pull <skill-name>` 命令将指定技能直接拉取到项目中。例如执行 `npx typeui.sh pull brutalism` 即可引入 Brutalism 风格的设计规范。该项目适合希望在 AI 辅助开发流程中统一 UI 输出质量的前端开发者、设计师以及使用 agentic 工作流的团队。

Key features

67 个设计技能：收录 67 种不同风格的预设设计系统技能文件，覆盖多种视觉方向。
双文件结构：每个技能包含 SKILL.md（AI 指令）和 DESIGN.md（人类可读说明）。
单命令引入：通过 npx typeui.sh pull 命令即可将技能文件拉取到本地项目。
多工具兼容：支持 Claude Code、Cursor、Codex 等 AI agentic 工具读取使用。
在线预览：可在 TypeUI 平台上直接预览各设计技能的视觉效果。
AI 指令规范：SKILL.md 中包含 token、组件规则、无障碍约束与质量门禁等指令。

Releases

Notify me

Initial · Awesome Design Skills

September 26, 2026

Q&A

如何将某个设计技能引入我的项目？AI-generated: 在项目目录下运行 npx typeui.sh pull <技能名称> 即可。例如 npx typeui.sh pull brutalism 会拉取 Brutalism 风格的技能文件夹。
SKILL.md 和 DESIGN.md 有什么区别？AI-generated: SKILL.md 是给 AI agent 读取的指令文件，包含 token、组件规则、无障碍约束等信息；DESIGN.md 是给人阅读的，记录设计意图、理念和实现备注。
这些技能文件支持哪些 AI 工具？AI-generated: 原文提到支持 Claude Code、Cursor、Codex 以及其他 AI-powered agentic 工具。
可以在哪里预览这些设计技能的效果？AI-generated: 可以通过访问 https://typeui.sh/design-skills 在线预览所有设计技能。