Structural Control

The skill Copy

Input images control composition. Sketch→final, wireframes, grids.

## Sketch → Final

```
Create [ASSET TYPE] following this sketch exactly.

Sketch defines: composition, element placement, text position
Quality: [polished / professional / specified style]
Text: Render "[EXACT TEXT]" where indicated
```

Hand-drawn layouts become polished assets.

## Wireframe → Mockup

```
Generate [MOCKUP TYPE] following these wireframes.

Layout: Match wireframe structure precisely
Content: [placeholder / realistic]
Style: [UI style / brand guidelines]
```

UI/UX designs from rough wireframes.

## Grid-Based Assets

```
Generate [ASSET] fitting this [SIZE] grid.
Each cell: [CONTENT]
Consistency: Uniform style across cells
```

Use cases:
- Sprite sheets for games
- LED display content
- Tile-based graphics

## Pixel Art

```
Generate pixel art [SUBJECT] fitting [SIZE] grid.
Colors: high contrast
Style: [retro / modern pixel]
```

Tip: Extract cell colors programmatically for LED matrices.

## Layout Guidance

Reference images can control:
- **Where** elements sit
- **What** proportions to use
- **How** text flows
- **Which** areas get emphasis

## Brand Identity Systems

```
[Input: logo sketch or design]
Create identity system using this logo.

Generate one at a time:
1. Logo refinement
2. Business card mockup
3. Letterhead
4. Billboard application
5. Product packaging
6. Digital banner
7. Social media avatar
8. App icon
9. Signage
10. Merchandise

Format: 16:9 each
Maintain: brand consistency across all
```

## Composition Templates

Use reference for:
- Magazine layouts
- Poster compositions
- Social media templates
- Presentation structures

```
Follow the composition of reference image.
Replace: [ELEMENTS] with [NEW CONTENT]
Maintain: proportions, visual hierarchy
```

## Precision Control

- "Position text exactly where sketch indicates"
- "Follow grid structure exactly"
- "Match layout precisely"
- "Keep proportions from reference"

---

*Author: Serge Shima ([t.me/aimastersme](https://t.me/aimastersme) · [sergeshima.com](https://sergeshima.com) · [aimasters.me](https://aimasters.me)) · License: CC BY 4.0 — attribution required · Source: [smixs/visual-skills](https://github.com/smixs/visual-skills)*

How to install it Copy

Gemini

1. Open Gems → New Gem.
2. Paste the text below into the instructions field.
3. Save. The Gem appears in the sidebar and keeps the instructions
   across conversations.

In Google AI Studio the same text goes in System instructions.

Did it work for you?

Where it came from