What should I supply for a useful visual result?

The screen's task, actual content, approved interaction behavior and constraints. Existing screenshots, brand references, tokens or components help it make grounded decisions.

Can it work when I have no design system?

Yes. It can propose a compact visual system with concrete type, spacing, semantic color and component roles. Proposed values remain distinct from an existing approved system.

Does it handle dense dashboards and narrow layouts?

It chooses composition for the actual task, including comparison space, useful density, secondary actions, long labels and state feedback. Responsive behavior is described by what changes as space becomes constrained.

Will I receive a design file or image automatically?

A populated text specification is available from supplied material. A rendered mockup or prototype requires a suitable tool in your host. The skill does not include a paid design account or image generator.

What is included, and do I need the squad?

The complete visual design method and references, buyer and installation guidance, and two illustrative request/result pairs. No other skill is required. Its underlying method is also in Product Squad Agent Skills. Commercial deliverables are permitted; source materials remain personal and non-transferable under Agensi terms.

What do the displayed examples show?

They illustrate the intended visual specification and handoff detail. These pairs are editorial examples, not recordings of rendered designs or proof of accessibility conformance.

UI Designer Specialist

Use ui-designer to give this issue-triage workspace a concrete visual specification. The primary task is compare incoming reports and assign a severity; search and filtering must stay available. Columns: report title, affected service, customer impact, status and severity. Actual sample titles: 'Payment confirmation never arrives after checkout' and 'Scheduled report has empty rows for the previous month'. Confirmed behavior: selecting a row opens its detail panel; severity is saved only after explicit Save. Filters are secondary, not removable. Our proposed palette is ink #18212F, cream #FAF8F3 and violet #5C37B7; no component system is established. Specify regions, typography, semantic color roles, selected/error/saving states and layouts at 360, 768 and 1440 CSS px. No screenshot, repository or renderer is available; produce the populated spec, not a claim that you inspected the app.

Illustrative preview: this representative editorial result is not a recorded runtime session.

The triage work should dominate: make report identity and customer impact easy to compare, then give severity a clearly separate editing area. The palette below is supplied as a proposal; it is not an established token system.

VisualSpec VS-TRIAGE-01, revision 1
Status: READY_FOR_NEXT_ROLE for the bounded visual specification; rendering and accessibility evidence remain NOT_RUN.
Producer: UI Designer. Recipient: interface and implementation owners.
Objective: compare reports and deliberately save a severity. Scope: composition and state appearance; business policy, interaction changes and implementation are excluded.
Inputs: the columns, two supplied titles, explicit-save rule, row-detail behavior, available widths and proposed palette. Newly created IDs below are local to this artifact.

Recommended composition

Region	Purpose and actual content	Wide proposal	Alignment / spacing
V-R1 header	Issues, search and a clearly labelled Filters control	Full width; search grows to at most 480px	24px outer padding, 16px region gaps
V-R2 comparison	Title, service, customer impact, status and severity	Flexible table beside a 360px detail panel	Title has the strongest text role; text columns align left
V-R3 detail	Selected report, impact context, severity editor and Save	Bounded 360px panel; wraps long report titles	24px panel padding; 8px label/control and 24px group separation
V-R4 feedback	Save progress, error or confirmation	Within the detail panel near the action it explains	A persistent text message plus relevant icon; color alone never carries meaning

Both supplied long titles wrap to preserve their distinguishing words. Service and impact remain readable; truncation is a last resort with an accessible full-value route. The specification does not invent missing service names, report counts or user evidence.

Proposed type and semantic mapping
System-ui fallback throughout. Workspace title: 28px/34px, weight 700. Report title and section heading: 18px/25px, weight 600. Body/table text: 14px/21px, weight 400; labels 14px/20px, weight 600. These roles do not determine HTML heading levels.

surface/base: #FAF8F3; text/primary: #18212F.
action/primary: #5C37B7 with white action text; test this exact foreground/background pair before accepting it.
state/selected: proposed pale violet #EDE7F7 with a labelled selected indicator and a left key line. Selection is not proof of severity being saved.
state/error: proposed dark red #8F2525 plus text and icon; error copy remains legible on the actual background.
focus/ring: proposed 2px violet outline with 2px offset; verify adjacent colors and visibility in the rendered candidate.
No global raw-token migration is proposed. The engineer should map these semantic roles into the chosen system and preserve any confirmed consumer requirements that are discovered later.

State and responsive matrix

Condition	Visual treatment	Preserved contract
Row selected	Selected key line, text label and matching detail heading	Opens that report; does not save severity
Unsaved severity	Show current proposed value and a concise unsaved indicator beside Save	Explicit Save is still required
Saving	Retain context and show 'Saving severity...' near the action	The interface owner must define actual disabled/cancellation behavior
Save fails	Inline explanation plus retry action only if supported by the real contract	Never display saved success on an unknown outcome
Empty filter result	Keep search and Filters, explain that no report matches	Filtering remains reachable

At 1440px, comparison and detail are side by side. At 768px, propose a full-width comparison with the selected detail below; no column relationships disappear silently. At 360px, preserve text reflow outside the bounded comparison region; use a labelled local horizontal scroll for genuine table relationships and show the selected detail below it. Keep search/Filters reachable, long titles wrapping and Save visible in reading order. A modal/mobile detail pattern would change interaction and needs a separate interface decision rather than being smuggled into styling.

Acceptance and proof
V-AC1: the two supplied long titles remain distinguishable at each proposed width.
V-AC2: selection, unsaved severity, saving and failure have distinct non-color cues.
V-AC3: the content order preserves comparison and deliberate saving; secondary filtering never replaces the primary workspace.
V-AC4: check actual contrast pairs, focus visibility, 320px-equivalent reflow and long content on a rendered candidate. NOT_RUN here; no ratio or conformance claim is supplied.
V-AC5: confirm semantic tokens and inspect representative consumers before adopting shared values.

The source-to-spec check preserves all supplied columns, sample titles and explicit-save semantics. No app inspection, screenshot, user preference finding or measured contrast was fabricated. Next owner: the interface owner resolves saving/retry behavior, then implementation creates a candidate and records viewport/state evidence against V-AC1–V-AC5.

About this skill

Your interface should make the important work obvious before anyone explains it.

UI Designer Specialist gives your AI a concrete method for turning content and approved behavior into a coherent visual direction. It connects hierarchy, typography, spacing, semantic color and component states to the task on the screen. Get design decisions that explain how the composition works and how another person can build it.

Use it to create a visual specification, refine a crowded workspace, review inconsistent screens or define a compact component language. Bring the actual content, primary task, existing interactions, brand direction and any tokens or components already in use. The specialist can use those foundations or propose a clearly defined system when none exists.

Your deliverables can include

A populated layout with regions, action priority and alignment.
Type, space and color roles linked to component use.
Selected, loading, error, saving and focus appearances where relevant.
Responsive composition and concrete checks for long content and narrow widths.

For an issue-triage workspace, it can preserve comparison space, make severity and unsaved changes readable and keep filtering available across different widths. The visual choices follow the work instead of applying a favorite aesthetic to every product.

The complete standalone method and design references are included. Supply your own AI access. It can deliver a detailed text specification without paid design tools; creating and checking a rendered mockup requires a suitable tool in your host.

UI Designer Specialist