91 lines
2.0 KiB
Markdown
91 lines
2.0 KiB
Markdown
---
|
||
title: Impeccable: Design skills for AI coding tools
|
||
slug: impeccable-design-skills
|
||
status: inbox
|
||
content_type: reference
|
||
source_url: https://impeccable.style/
|
||
collected_at: 2026-03-06
|
||
tags: [ai-tools, design, frontend, skills]
|
||
---
|
||
|
||
# Impeccable: Design skills for AI coding tools
|
||
|
||
## 概述
|
||
|
||
基于 Anthropic 原版 `frontend-design` skill 的增强版，提供：
|
||
- **1 个技能** — 深度设计专业知识
|
||
- **17 个命令** — 设计语言的核心词汇
|
||
- **反模式库** — 排版/颜色/布局/动画的避坑指南
|
||
|
||
支持工具：Cursor、Claude Code、Gemini CLI、Codex CLI
|
||
|
||
---
|
||
|
||
## 安装方式（Claude Code）
|
||
|
||
### 方式 1：Plugin Marketplace
|
||
|
||
```bash
|
||
/plugin marketplace add pbakaus/impeccable
|
||
/plugin menu # 选择安装
|
||
```
|
||
|
||
### 方式 2：手动下载
|
||
|
||
- 下载 ZIP 解压到项目根目录（与 `package.json` 同级）
|
||
- 创建 `.claude/` 隐藏文件夹
|
||
|
||
### 方式 3：全局安装
|
||
|
||
- 解压到 `~/.claude/` 目录
|
||
- 项目级安装优先级更高，可版本控制
|
||
|
||
---
|
||
|
||
## 命令使用
|
||
|
||
所有命令以 `/i-` 为前缀避免冲突：
|
||
- 例如：`/i-audit`、`/i-polish` 等
|
||
- 安装后可查看命令速查表
|
||
|
||
---
|
||
|
||
## 故障排查
|
||
|
||
| 问题 | 解决方案 |
|
||
|------|---------|
|
||
| 命令不出现 | 输入 `/` 检查是否有 `/i-*` 命令；确认文件位置正确 |
|
||
| 技能不生效 | 明确提示 "use the frontend-design skill" 强制激活 |
|
||
| 新手入门 | 先熟悉基础 AI 工具操作，再使用此技能 |
|
||
|
||
---
|
||
|
||
## 工具特定设置
|
||
|
||
### Cursor
|
||
1. Switch to Nightly channel in Settings → Beta
|
||
2. Enable Agent Skills in Settings → Rules
|
||
|
||
### Gemini CLI
|
||
1. Install preview: `npm i -g @google/gemini-cli@preview`
|
||
2. Run `/settings` and enable "Skills"
|
||
3. Run `/skills list` to verify
|
||
|
||
---
|
||
|
||
## 作者
|
||
|
||
Pascal Bakaus (`@pbakaus`)
|
||
|
||
专注：AI 转型咨询、开发者体验、设计系统、全栈架构
|
||
|
||
---
|
||
|
||
## 评估
|
||
|
||
这个工具可以作为 `frontend-design` skill 的**增强补充**，适合需要高质量 UI 输出的场景。
|
||
|
||
## 相关链接
|
||
|
||
- 官网: https://impeccable.style/
|
||
- GitHub: https://github.com/pbakaus/impeccable |