Build with AI. Design with taste.

好设计，从好工具开始。发现 AI 时代值得用的设计资源，把灵感变成作品。

探索资源库按分类发现

66 项资源 5 个分类

从哪一类资源开始？

按用途找到合适的选择。

设计 Skills

为 AI 编程助手补充设计规范与审查能力

AI Apps

用 AI 生成界面、组件与配色方案

MCP与插件

连接设计工具与资源，扩展 AI 工作流

设计工具

制作字体、背景与动效，完善界面细节

灵感与学习

浏览优秀案例与设计教程，积累创作思路

少一点寻找，多一点创造。

浏览精选工具与设计资源，找到适合当前项目的选择。

查看全部资源

Impeccable

为 AI 编程助手提供界面设计、审查与打磨指引，改善排版、布局、交互和可访问性。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 在安装向导中选择 AI 编程助手
安装范围: 当前项目或当前用户的全部项目，由向导选择

npx impeccable install

Anthropic Frontend Design Skill

为 AI 编程助手提供前端视觉设计指引，围绕项目选择配色、字体与布局。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add anthropics/skills --skill frontend-design

TypeUI Design Skills

提供可供 AI 编程助手使用的设计规范与 Skill，为界面生成设定一致的视觉方向。

设计 Skills

访问官网

Taste Skill

根据精选网站参考确定视觉方向，结合真实图片和浏览器检查，指导 AI 实现页面。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add Leonxlnx/taste-skill --skill design-taste-frontend

Make Interfaces Feel Better

从动效、字体、图标、悬停反馈到点击区域，改善界面的细节与操作体验。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add jakubkrehel/make-interfaces-feel-better

YC Web Design Strategy Skill

基于 YC 网站评审经验，梳理产品官网的价值主张、首屏信息与转化路径。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add maxbogo/yc-web-design-strategy-skill

Swiss Design System

以无衬线字体、严谨网格和克制用色，构建瑞士风格界面。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add zeke/swiss-design-skill

shadcn/ui Skills

让 AI 理解项目的 shadcn/ui 配置，生成匹配的组件代码。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add shadcn/ui

Bencium Marketplace

包含设计、架构、效率、字体与代码审查技能的 Claude Code 插件市场。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add bencium/bencium-marketplace

21st.dev

用于构建 AI 产品的 UI 组件、设计灵感与模板库。

AI Apps

访问官网

Web Design Guidelines Skill

按照网页设计最佳实践检查界面代码，发现可用性问题。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

Three.js Skills

覆盖场景、几何、灯光、着色器、动画和交互的 Three.js 技能集。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add CloudAI-X/threejs-skills

Variant

通过连续浏览 AI 生成的设计变体，为想法找到视觉方向。

AI Apps

访问官网

Emil Kowalski Skills

面向设计师与工程师，提供界面动效和设计实现的实用指导。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add emilkowalski/skills

Awesome DESIGN.md

收集从真实网站提取的 DESIGN.md，供 AI 参考配色、排版和组件规范。

设计 Skills

查看项目

The Shape of AI

整理 AI 产品中的用户体验模式，帮助设计更清晰的人机交互。

灵感与学习

阅读资源

Unslop Skill

在保留含义与语气的同时，减少 AI 写作中的模板化表达。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add https://github.com/cursor/plugins/tree/main/pstack/skills/unslop

StyleSeed

将已有设计决策整理为 AI 可读取的规则，并检查页面实现，保持跨页面与跨会话的一致性。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add bitjaru/styleseed

UserInterface.wiki Skill

将界面设计、排版与动效知识整理为 Skill，供 AI 编程助手在实现页面时参考。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add raphaelsalaja/userinterface-wiki

Refactoring UI Skill

将 Refactoring UI 的间距、字体、色彩与层级规则用于界面设计。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: Claude Code
安装范围: 当前项目的 .claude/skills/refactoring-ui 目录

git clone https://github.com/s0xDk/refactoring-ui-skill.git .claude/skills/refactoring-ui

Claude Code Design Review Workflow

提供 Claude Code 设计审查工作流，结合浏览器检查前端变更的布局、交互与可访问性。

设计 Skills

查看项目

UI UX Pro Max Skill

根据项目类型与技术栈，推荐配色、字体、布局和组件规范，辅助建立设计系统。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: Codex
安装范围: 当前项目

npx ui-ux-pro-max-cli init --ai codex

Designer Skills Collection

覆盖研究、设计系统、界面、交互与交付的设计技能合集。

设计 Skills

查看项目

Huashu Design

以 HTML 为基础生成网页与 App 原型、幻灯片和动画，并提供设计审查与导出流程。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add alchaincyf/huashu-design

Impeccable

为 AI 编程助手提供界面设计、审查与打磨指引，改善排版、布局、交互和可访问性。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 在安装向导中选择 AI 编程助手
安装范围: 当前项目或当前用户的全部项目，由向导选择

npx impeccable install

Anthropic Frontend Design Skill

为 AI 编程助手提供前端视觉设计指引，围绕项目选择配色、字体与布局。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add anthropics/skills --skill frontend-design

TypeUI Design Skills

提供可供 AI 编程助手使用的设计规范与 Skill，为界面生成设定一致的视觉方向。

设计 Skills

访问官网

Taste Skill

根据精选网站参考确定视觉方向，结合真实图片和浏览器检查，指导 AI 实现页面。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add Leonxlnx/taste-skill --skill design-taste-frontend

Make Interfaces Feel Better

从动效、字体、图标、悬停反馈到点击区域，改善界面的细节与操作体验。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add jakubkrehel/make-interfaces-feel-better

YC Web Design Strategy Skill

基于 YC 网站评审经验，梳理产品官网的价值主张、首屏信息与转化路径。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add maxbogo/yc-web-design-strategy-skill

Swiss Design System

以无衬线字体、严谨网格和克制用色，构建瑞士风格界面。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add zeke/swiss-design-skill

shadcn/ui Skills

让 AI 理解项目的 shadcn/ui 配置，生成匹配的组件代码。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add shadcn/ui

Bencium Marketplace

包含设计、架构、效率、字体与代码审查技能的 Claude Code 插件市场。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add bencium/bencium-marketplace

21st.dev

用于构建 AI 产品的 UI 组件、设计灵感与模板库。

AI Apps

访问官网

Web Design Guidelines Skill

按照网页设计最佳实践检查界面代码，发现可用性问题。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

Three.js Skills

覆盖场景、几何、灯光、着色器、动画和交互的 Three.js 技能集。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add CloudAI-X/threejs-skills

Variant

通过连续浏览 AI 生成的设计变体，为想法找到视觉方向。

AI Apps

访问官网

Emil Kowalski Skills

面向设计师与工程师，提供界面动效和设计实现的实用指导。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add emilkowalski/skills

Awesome DESIGN.md

收集从真实网站提取的 DESIGN.md，供 AI 参考配色、排版和组件规范。

设计 Skills

查看项目

The Shape of AI

整理 AI 产品中的用户体验模式，帮助设计更清晰的人机交互。

灵感与学习

阅读资源

Unslop Skill

在保留含义与语气的同时，减少 AI 写作中的模板化表达。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add https://github.com/cursor/plugins/tree/main/pstack/skills/unslop

StyleSeed

将已有设计决策整理为 AI 可读取的规则，并检查页面实现，保持跨页面与跨会话的一致性。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add bitjaru/styleseed

UserInterface.wiki Skill

将界面设计、排版与动效知识整理为 Skill，供 AI 编程助手在实现页面时参考。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add raphaelsalaja/userinterface-wiki

Refactoring UI Skill

将 Refactoring UI 的间距、字体、色彩与层级规则用于界面设计。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: Claude Code
安装范围: 当前项目的 .claude/skills/refactoring-ui 目录

git clone https://github.com/s0xDk/refactoring-ui-skill.git .claude/skills/refactoring-ui

Claude Code Design Review Workflow

提供 Claude Code 设计审查工作流，结合浏览器检查前端变更的布局、交互与可访问性。

设计 Skills

查看项目

UI UX Pro Max Skill

根据项目类型与技术栈，推荐配色、字体、布局和组件规范，辅助建立设计系统。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: Codex
安装范围: 当前项目

npx ui-ux-pro-max-cli init --ai codex

Designer Skills Collection

覆盖研究、设计系统、界面、交互与交付的设计技能合集。

设计 Skills

查看项目

Huashu Design

以 HTML 为基础生成网页与 App 原型、幻灯片和动画，并提供设计审查与导出流程。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add alchaincyf/huashu-design

Impeccable

为 AI 编程助手提供界面设计、审查与打磨指引，改善排版、布局、交互和可访问性。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 在安装向导中选择 AI 编程助手
安装范围: 当前项目或当前用户的全部项目，由向导选择

npx impeccable install

Anthropic Frontend Design Skill

为 AI 编程助手提供前端视觉设计指引，围绕项目选择配色、字体与布局。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add anthropics/skills --skill frontend-design

TypeUI Design Skills

提供可供 AI 编程助手使用的设计规范与 Skill，为界面生成设定一致的视觉方向。

设计 Skills

访问官网

Taste Skill

根据精选网站参考确定视觉方向，结合真实图片和浏览器检查，指导 AI 实现页面。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add Leonxlnx/taste-skill --skill design-taste-frontend

Make Interfaces Feel Better

从动效、字体、图标、悬停反馈到点击区域，改善界面的细节与操作体验。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add jakubkrehel/make-interfaces-feel-better

YC Web Design Strategy Skill

基于 YC 网站评审经验，梳理产品官网的价值主张、首屏信息与转化路径。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add maxbogo/yc-web-design-strategy-skill

Swiss Design System

以无衬线字体、严谨网格和克制用色，构建瑞士风格界面。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add zeke/swiss-design-skill

shadcn/ui Skills

让 AI 理解项目的 shadcn/ui 配置，生成匹配的组件代码。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add shadcn/ui

Bencium Marketplace

包含设计、架构、效率、字体与代码审查技能的 Claude Code 插件市场。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add bencium/bencium-marketplace

21st.dev

用于构建 AI 产品的 UI 组件、设计灵感与模板库。

AI Apps

访问官网

Web Design Guidelines Skill

按照网页设计最佳实践检查界面代码，发现可用性问题。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

Three.js Skills

覆盖场景、几何、灯光、着色器、动画和交互的 Three.js 技能集。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add CloudAI-X/threejs-skills

Variant

通过连续浏览 AI 生成的设计变体，为想法找到视觉方向。

AI Apps

访问官网

Emil Kowalski Skills

面向设计师与工程师，提供界面动效和设计实现的实用指导。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add emilkowalski/skills

Awesome DESIGN.md

收集从真实网站提取的 DESIGN.md，供 AI 参考配色、排版和组件规范。

设计 Skills

查看项目

The Shape of AI

整理 AI 产品中的用户体验模式，帮助设计更清晰的人机交互。

灵感与学习

阅读资源

Unslop Skill

在保留含义与语气的同时，减少 AI 写作中的模板化表达。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add https://github.com/cursor/plugins/tree/main/pstack/skills/unslop

StyleSeed

将已有设计决策整理为 AI 可读取的规则，并检查页面实现，保持跨页面与跨会话的一致性。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add bitjaru/styleseed

UserInterface.wiki Skill

将界面设计、排版与动效知识整理为 Skill，供 AI 编程助手在实现页面时参考。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add raphaelsalaja/userinterface-wiki

Refactoring UI Skill

将 Refactoring UI 的间距、字体、色彩与层级规则用于界面设计。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: Claude Code
安装范围: 当前项目的 .claude/skills/refactoring-ui 目录

git clone https://github.com/s0xDk/refactoring-ui-skill.git .claude/skills/refactoring-ui

Claude Code Design Review Workflow

提供 Claude Code 设计审查工作流，结合浏览器检查前端变更的布局、交互与可访问性。

设计 Skills

查看项目

UI UX Pro Max Skill

根据项目类型与技术栈，推荐配色、字体、布局和组件规范，辅助建立设计系统。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: Codex
安装范围: 当前项目

npx ui-ux-pro-max-cli init --ai codex

Designer Skills Collection

覆盖研究、设计系统、界面、交互与交付的设计技能合集。

设计 Skills

查看项目

Huashu Design

以 HTML 为基础生成网页与 App 原型、幻灯片和动画，并提供设计审查与导出流程。

设计 Skills

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add alchaincyf/huashu-design

认识一下，你的创作新搭档。

从设计方向，到界面打磨，再到动手实现。

让 AI 写代码，
也让它懂设计。

Taste Skill

Taste Skill 从精选网站中提取构图、字体与视觉方向，结合真实图片和浏览器检查，指导 AI 把设计参考落到页面实现。

有依据的视觉方向
兼顾构图、字体与配色
从设计到真实浏览器验证

探索 Taste Skill

在终端中运行以下命令，按官方说明完成配置。

适用工具: 支持 Agent Skills 的 AI 编程助手
安装范围: 在安装向导中选择工具和安装范围

npx skills add Leonxlnx/taste-skill --skill design-taste-frontend

www.tasteskill.dev

好界面，
值得再打磨一次。

Impeccable

用设计审查、布局调整、文案澄清和细节打磨指令，检查排版、间距、交互与可访问性，并在已有设计规范下迭代。

审查、简化与细节打磨
贯穿整个界面迭代过程
兼顾交互体验与可访问性

探索 Impeccable

在终端中运行以下命令，按官方说明完成配置。

适用工具: 在安装向导中选择 AI 编程助手
安装范围: 当前项目或当前用户的全部项目，由向导选择

npx impeccable install

impeccable.style

好想法，
从一个好组件开始。

21st.dev

浏览 UI 组件、交互灵感与页面模板，为下一个 AI 产品找到起点，再组合成属于自己的界面。

可浏览的组件与页面模板
为交互与布局寻找灵感
选择参考，组合成自己的界面

探索 21st.dev

21st.dev

下一个好作品，
就从这里开始。

把时间留给创造，把好工具留在手边。

找到你的工具

Build with AI. Design with taste.Build with AI. Design with taste.

从哪一类资源开始？

设计 Skills

AI Apps

MCP与插件

设计工具

灵感与学习

少一点寻找，多一点创造。

认识一下，你的创作新搭档。

让 AI 写代码，也让它懂设计。

好界面，值得再打磨一次。

好想法，从一个好组件开始。

下一个好作品，就从这里开始。

Build with AI. Design with taste.

让 AI 写代码，
也让它懂设计。

好界面，
值得再打磨一次。

好想法，
从一个好组件开始。

下一个好作品，
就从这里开始。