# Visual design

Turn a brief or existing interface into coordinated decisions about composition, typography, imagery, color, and relevant interaction response. Consider what people should accomplish, understand, and experience. Compare alternatives when they resolve an open question, interpret references without copying them, and express the result as an implementable specification. Static composition can provide the complete direction.

Package version: 0.1.0-beta.6.

Included with [Faye UI System Engineer](/plugins/faye-ui-system-engineer/).

## When to use

Use this when a screen needs a visual direction, a different interaction feel, or a critique of its current treatment.

## What to provide

- The screen or component, its audience, and the intended use and experience. Describe these in your own words; design terminology is not required.
- Screenshots, real content, brand references, and constraints such as preserving the current palette.

## Expected results

- A coherent visual direction with priorities, evidence, and reasons for consequential choices.
- An implementable specification with relevant layouts, states, responsive behavior, acceptance checks, and a clear distinction between rationale and proposed interface copy.

## Example requests

### Try this request

#### Codex

```
$ui-visual-design Shape this poem-and-photograph reading page into an unhurried experience without animation. Use the supplied content, preserve verse line breaks, and show how the composition adapts to narrow screens and longer notes.
```

#### Grok

```
/ui-visual-design Shape this poem-and-photograph reading page into an unhurried experience without animation. Use the supplied content, preserve verse line breaks, and show how the composition adapts to narrow screens and longer notes.
```

#### Antigravity

```
/ui-visual-design Shape this poem-and-photograph reading page into an unhurried experience without animation. Use the supplied content, preserve verse line breaks, and show how the composition adapts to narrow screens and longer notes.
```

## Requirements

- A screenshot or sufficiently detailed brief is enough to start; a repository is useful when the design must fit existing components.
- Say explicitly when the task includes implementation.

## Scope and limitations

- Design work is read-only unless changes are requested.
- A screenshot cannot establish keyboard behavior, semantics, or states that are not visible.
- The optional Precision Workspace style is used only when explicitly requested or approved.

## Related guides and supporting files

- [Faye UI System Engineer](/plugins/faye-ui-system-engineer/) — Design, build, and review browser interfaces with purposeful visuals, interaction feel, and rendered evidence.

## Technical source

[Open original source](/marketplace/plugins/faye-ui-system-engineer/skills/ui-visual-design/SKILL.md)

Source path: plugins/faye-ui-system-engineer/skills/ui-visual-design