ui-color-palette-generate-source-colors

Files (1)

• SKILL.md

SKILL.md (first lines)

# Generate Source Colors

Use the **ui-color-palette** MCP tools to produce source colors before building a full palette.

The output of this skill is a set of `ColorConfiguration` objects (role name + hex) ready to be passed to `ui-color-palette-scale-palette`.

---

## Step 0 — Check for existing SourceColors

**Before asking anything**, check whether a `SourceColors` slot is already populated in the conversation context.

If `SourceColors` exists, show the existing colors (name + hex) and ask: reuse, add more, or start fresh. Wait for reply before proceeding.

---

## Step 1 — Choose a source mode

If the mode is not already clear from context, ask which source to use:

- **Image** — extract dominant colors from a photo (requires public URL)
- **Prompt** — describe mood/brand in natural language
- **Harmony** — derive from a single base color
- **Design tool** — extract fills from a current selection in Figma, Penpot, Sketch, or Framer

Wait for reply.

---

## Mode A — Image extraction

**Tool**: `extract_dominant_colors`

| Parameter | Type | Required | Description |
| --------- | ---- | -------- | ----------- |
| `imageUrl` | string | Yes | Public URL of a JPEG or PNG image |
| `colorCount` | number | No | Number of dominant colors to extract (default: 5) |
| `maxIterations` | number | No | Max iterations for k-means clustering |
| `tolerance` | number | No | Convergence tolerance |
| `skipTransparent` | boolean | No | Skip transparent pixels (default: true) |

### Step A1 — Collect the image URL

Ask for a public JPEG or PNG URL if not already provided.

### Step A2 — Color count (optional)

Ask how many dominant colors to extract (default: 5).

### Step A3 — Call `extract_dominant_colors`

Call the tool with the URL and parameters. The tool returns colors as hex and/or RGB (0–255 per channel).

### Step A4 — Show results and assign roles

Show the extracted colors as swatches (hex + preview). Ask the user to assign a role name (`primary`, `neutral`, `accent`, `error`) to each color they want to keep, and discard the rest.

### Step A5 — Normalize to ColorConfiguration

Convert each kept color to a `ColorConfiguration` object:
- `id` = omit — the server generates it automatically via `uid()`
- `name` = the role name the user provided
- `rgb` = divide each 0–255 channel by 255 → `{ r: R/255, g: G/255, b: B/255 }`
- Apply defaults: `hue: { shift: 0, isLocked: false }`, `chroma: { shift: 100, isLocked: false }`, `alpha: { isEnabled: false, backgroundColor: "#FFFFFF" }`

---

## Mode B — Prompt generation

**Tool**: `generate_colors_from_prompt`

| Parameter | Type | Required | Description |
| --------- | ---- | -------- | ----------- |
| `prompt` | string | Yes | Natural language description of the desired palette |

### Step B1 — Collect the prompt

Ask for a natural language description if not already provided (mood, brand, context, or specific colors; e.g. "a calm fintech app with deep blues and warm neutrals").

### Step B2 — Call `generate_colors_from_prompt`

Call the tool with the prompt string. The tool uses AI (Mistral) to return a set of colors.

### Step B3 — Show results and assign roles

Show the suggested colors as swatches. Ask the user to assign a role name to each color they want to keep and discard the rest.

### Step B4 — Normalize to ColorConfiguration

Convert each kept color to a `ColorConfiguration` object using the same mapping as Step A5.

---

## Mode C — Harmony derivation

**Tool**: `create_color_harmony`

| Parameter | Type | Required | Description |
| --------- | ---- | -------- | ----------- |
| `baseColor` | array | Yes | An RGB Channel tuple: `[r, g, b]` — values 0–255 |
| `type` | enum | No | `ALL`, `COMPLEMENTARY`, `ANALOGOUS`, `TRIADIC`, `TETRADIC`, `SQUARE`, `COMPOUND` (default: `ALL`) |
| `analogousSpread` | number | No | Spread angle in degrees for analogous harmonies (default: 30) |
| `returnFormat` | enum | No | `rgb`, `hex`, or `both` (default: `both`) |

### Step C1 — Collect the base color

Ask for a hex base color if not already provided. Convert to an RGB Channel tuple:
- Parse hex → `[r, g, b]` with values 0–255
- Example: `#3B82F6` → `[59, 130, 246]`

### Step C2 — Choose harmony type

Ask which harmony type: Complementary (2 colors), Compound (3), Analogous (3), Triadic (3), Tetradic (4), Square (4), or All.

### Step C3 — Call `create_color_harmony`

Call the tool with the Channel object, selected type, and `returnFormat: "both"`.

### Step C4 — Show results and assign roles

From a-ng-d/claude-ui-color-palette, MIT.

More from a-ng-d/claude-ui-color-palette