Skill guide

Visual design

Develop a clear visual direction for a browser screen, grounded in its audience, content, and existing brand.

Turn a screen brief or an existing interface into concrete decisions about composition, typography, spacing, color, imagery, and interaction emphasis. When a brief calls for a new product identity, connect expressive choices to its audience and supplied evidence. The result is a design specification that can guide implementation without imposing a new framework or generic visual style.

Package version 0.1.0-beta.4

Included with Faye UI System Engineer

When to use

Use this when a screen needs a stronger hierarchy, a new visual direction, or a critique of its current treatment.

What to provide

  • The screen or component, its audience, and the task users need to complete.
  • 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 the choices.
  • An implementable specification covering relevant layouts, states, responsive behavior, and visual acceptance checks.

Example requests

Try this request

Codex
Codex request
$ui-visual-design Refine this marketplace skill page. Preserve its dark palette and typography, make the usage example easy to find, and specify how the page should reflow on mobile.
Grok
Grok request
/ui-visual-design Refine this marketplace skill page. Preserve its dark palette and typography, make the usage example easy to find, and specify how the page should reflow on mobile.
Antigravity
Antigravity request
/ui-visual-design Refine this marketplace skill page. Preserve its dark palette and typography, make the usage example easy to find, and specify how the page should reflow on mobile.

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