设置设计上下文 (teach-impeccable)

设置设计上下文（teach-impeccable）

概述

teach-impeccable 是一次性设置技能。它的核心是：收集项目设计上下文，保存为 AI 配置文件，让后续设计更精准。

作为设计师/开发者，你可能遇到过：

“AI 不知道我们的设计规范”
“每次都要重复说设计要求”
“AI 生成的设计不符合品牌”

teach-impeccable 就是解决这些的。

为什么需要设置上下文

1. 一次设置，长期受益

❌ 之前：
每次都要说明：
- 品牌色是什么
- 字体用什么
- 组件风格

✅ 之后：
设置一次，所有后续都自动应用

2. 让 AI 更懂你

AI 需要知道：
- 产品是什么
- 目标用户是谁
- 品牌调性
- 设计规范

teach-impeccable = 告诉 AI 这些

3. 保证一致性

设置后：
- 所有设计符合规范
- 不需要每次检查
- AI 自动遵循

设置步骤

第一步：探索代码库

在问问题之前，先扫描项目发现你能发现的：

README 和文档：
- 项目目的
- 目标用户
- 任何既定目标

Package.json / 配置文件：
- 技术栈
- 依赖
- 现有设计库

现有组件：
- 组件库
- 样式系统
- 设计 token

第二步：收集设计上下文

项目信息：

1. 产品类型
   - B2B / B2C / SaaS
   - 移动端 / 桌面端 / 响应式

2. 目标用户
   - 谁会用这个产品
   - 他们的技术背景
   - 他们的期望

3. 品牌调性
   - 专业 / 活泼 / 简约
   - 年轻 / 成熟 / 通用

第三步：保存配置

配置文件位置：
- .impeccable/config.json
- 或者项目指定的 AI 配置

包含内容：
- 品牌规范
- 设计系统
- 组件规范
- 技术约束

收集什么

1. 品牌规范

颜色：
- 主色
- 辅助色
- 语义色（成功/警告/错误）
- 灰色调

字体：
- 标题字体
- 正文字体
- 代码字体

风格：
- 圆角大小
- 阴影风格
- 动画风格

2. 设计系统

组件库：
- 使用的组件库
- 组件变体
- 自定义组件

设计 token：
- 间距系统
- 字号系统
- 颜色系统

3. 技术约束

兼容性：
- 浏览器支持
- 移动端支持

性能：
- 包大小限制
- 性能要求

配置文件示例

{
  "brand": {
    "name": "Acme Inc",
    "colors": {
      "primary": "#007AFF",
      "secondary": "#5856D6",
      "success": "#34C759",
      "warning": "#FF9500",
      "error": "#FF3B30"
    },
    "fonts": {
      "heading": "Inter",
      "body": "Inter",
      "mono": "JetBrains Mono"
    }
  },
  "design": {
    "borderRadius": {
      "small": "4px",
      "medium": "8px",
      "large": "12px"
    },
    "shadows": {
      "small": "0 1px 3px rgba(0,0,0,0.1)",
      "medium": "0 4px 12px rgba(0,0,0,0.15)"
    }
  },
  "constraints": {
    "browsers": ["last 2 versions", "Safari >= 14"],
    "mobile": true
  }
}

什么时候运行

首次使用 Impeccable

开始任何 Impeccable 工作前：
1. 先运行 teach-impeccable
2. 建立设计上下文
3. 后续工作更精准

项目开始

新项目：
1. 运行 teach-impeccable
2. 定义设计规范
3. 团队共享配置

设计系统更新

设计系统变化时：
1. 更新配置
2. 重新运行 teach-impeccable
3. AI 知道新规范

维护配置

定期更新

配置不是一劳永逸的：

- 产品方向变化 → 更新
- 设计系统更新 → 更新
- 新技术引入 → 更新

团队同步

配置应该团队共享：

- 放在代码库
- 版本控制
- 团队成员都用

速查卡片

目的

一次设置
长期受益
AI 懂你

收集内容

品牌规范
设计系统
技术约束

使用场景

首次使用
新项目开始
设计系统更新

好处

不用每次说明
设计更精准
保证一致性

与其他技能

frontend-design - 设计基础
normalize - 规范化
polish - 打磨

查看源文件: GitHub原始文件