adobe-create-mockups

Files (4)

• SKILL.md
• openai.yaml · agents/
• icon-large.svg · assets/
• icon-small.svg · assets/

SKILL.md (first lines)

# Create Mockups

Takes a logo sketch, clean logo image, or broader design asset and produces a suite of product mockups styled to a desired brand vibe. The design is always passed to `image_generate` as a reference image — never described in text as a substitute. Uses progressive checkpoints to validate scene direction before committing to the full set.

---

## Tool Reference

| Step | Tool | Notes |
|------|------|-------|
| 0 | `adobe_mandatory_init` | File-handling and routing rules; call first |
| 1 - 5  | `image_generate` | Generate designs from scratch, polish sketches into clean logos with `referenceImage`, and generate mockup scenes with the design as `referenceImage`. See **`image_generate` Call Rules** below. |
| 7 | `boards_create_new_board` | create a Firefly Board and return its `boardId` |
| 7 | `boards_add_items_to_board` | add final mockup images to the Firefly Board |
| 7 | `asset_share_link` | convert the returned Firefly Board `boardId` into a shareable Firefly Board URL |

### `image_generate` Call Rules

- Pass all generation settings inside `options`.
- Use `options.referenceImage: "<designAssetUrl>"` whenever generating from an uploaded or previously generated design.
- Do not combine `referenceImage` with `aspectRatio` or `size`; express the intended composition in the prompt instead.
- Use `outputFileType: "png"` unless the user explicitly requests JPEG.

---

## High-Level Pipeline

1. **Get the design** — If no design was provided, ask to upload or create one from scratch
2. **Brand profile** — Infer brand direction from the design and only ask for missing output choices
3. **Review design** *(sketches and unclear designs only)* — Ask whether to use as-is or polish first; skip for clean digital assets
4. **Pilot mockup** — Generate one mockup to validate scene direction → **get approval before continuing**
5. **Generate remaining mockups** — Complete the full set (max 5 per turn)
6. **Deliver** — Display all mockups inline with iteration options
7. **Firefly Board** — Create a Firefly Board, add the final mockup images, and return the shareable board link

---

## Workflow

### Step 0: Initialize Adobe Tools

Call `adobe_mandatory_init` first. This returns file handling rules and tool routing guidance required for the rest of the workflow.

```json
{ "skill_name": "adobe-create-mockups", "skill_version": "0.1.0" }
```

---

### Step 1: Get the Design

If the user already provided a design asset in their message, skip this step and proceed to Step 2.

If no design was provided:

```
ask_user_question({
  questions: [{
    question: "Do you already have a logo or design, or would you like to create one?",
    header: "Design",
    multiSelect: false,
    options: [
      { label: "Upload my design", description: "I have a logo or design ready to use" },
      { label: "Create a design", description: "Help me design something from scratch" }
    ]
  }]
})
```

- **Upload my design** → User uploads their design. Proceed to Step 2.
- **Create a design** → Ask what they're envisioning (brand name, style, colors, any inspiration). Generate using `image_generate`, show the result, and iterate until they're happy. Use the approved generation URL as `designAssetUrl`. Proceed to Step 2.

```
image_generate({
  options: {
    prompt: "<design generation prompt>",
    aspectRatio: "1:1",
    n: 1,
    promptReasoner: "quality"
  },
  outputFileType: "png"
})
```

---

### Step 2: Brand Profile

#### 2a. Collect inputs

Extract everything you can from the user's message and the design itself. Default to inference over interrogation. Ask only for what's genuinely missing, and prefer a single structured question page over multiple rounds of Q&A.

| Input | How to get it |
|---|---|
| **Design image** | User uploads directly to chat |
| **Brand name** | Infer from filename or message for internal reference only (e.g. labeling outputs). Only treat a name as explicitly provided — and eligible to render as text in mockups — if the user stated it directly in their message. |
| **Brand colors** | Infer from the design if it has clear colors. Otherwise improvise and fall back to neutral tones (`#FFFFFF`, `#111111`, `#E8E4DC`). |
| **Brand vibe** | Infer from the design style and any context clues (e.g. a sleek monogram → Minimal, a bold illustrated character → Playful). Do not ask a dedicated vibe question unless the direction is genuinely ambiguous. |
| **Mockup selection** | If the user already named products, use those. Otherwise ask once using a single structured product picker. If no preference is given, default to a standard set (mug, business card, t-shirt, phone screen). |
| **Aspect ratio** | If the user specified one, use it. If they specified products but not aspect ratio, default to square (`1:1`) or infer a better fit from product type. Only ask when aspect ratio is important and cannot be safely inferred. |

##### Brand vibe reference

| Vibe | Description |
|---|---|
| **Minimal** | Clean white/light backgrounds, generous whitespace, muted palette |
| **Playful** | Bright colors, casual settings, energetic product photography feel |
| **Luxury** | Dark or gold backgrounds, dramatic lighting, premium materials |
| **Bold** | High contrast, strong colors, graphic and commanding |
| **Earthy / Organic** | Natural textures (wood, linen, stone), warm tones, lifestyle feel |
| **Custom** | User describes their own |

If everything is clear from the message and design, skip directly to Step 3 without asking anything.

#### 2b. Product and aspect-ratio intake

Use `ask_user_question` only if the user has **not** already specified which mockups they want. Keep it to a single page that combines product suggestions with aspect-ratio choices.

**Product options must be tailored to the brand.** Infer the most fitting products from the design, brand name, vibe, and any context the user provided. Use the examples below as a guide — not a fixed list:

From xixu-me/scps, Apache-2.0.

More from xixu-me/scps