Skill guide

Visual design

Develop visual direction and interaction character for a browser UI, grounded in its purpose, content, and constraints.

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

See an example View package

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 and limits

Before you start

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.

Technical source

The hosted file belongs to the package version shown on this page.

plugins/faye-ui-system-engineer/skills/ui-visual-design

Open source file