Vistra · Static visual design skill
Give visual choices a clear basis.
Review an existing page, explore static visual directions, compare candidates, then turn the selected design into an engineering handoff. For mobile, desktop, and brand visuals.
Start with the design problem in front of you.
For an existing page, inspect information hierarchy, primary actions, and consistency with the project's rules.
For a new direction, generate or edit static images based on the goal, brand, and constraints.
For several candidates, compare tradeoffs against the same goal. Once a design is selected, define what to adopt and which assets engineering needs.
Understand the problem before changing the design.
| Mode | Work | Main deliverable |
|---|---|---|
Review review | Inspect an existing page or asset | Findings, evidence, and recommendations |
Explore explore | Generate or edit static visual directions | Candidate images, design notes, and author self-check |
Compare compare | Compare candidates against goals and constraints | Tradeoffs and a recommendation |
Handoff handoff | Record the selected version and adoption scope | Design handoff, necessary images, and asset notes |
Choose the mode you need now. To combine actions, specify their order and where this call should stop.
State what should change and what must stay.
Provide screenshots, design assets, source code, or exact candidate versions. State the goal, target platform, and scope of this call.
Attach existing brand and UI/UX rules and valid decisions. List any copy, behavior, navigation, or marks that must remain unchanged.
Image generation and editing require host image capabilities. Review and comparison can use existing assets directly. Source code alone limits conclusions about visual quality; those limits remain explicit.
Explore three directions around one goal.
After installation, enter this in an agent chat that supports skills:
$vistra explore
Target: <search-page screenshot or design assets>
Goal: Explore 3 static directions that make search input and history easier to recognize.
Constraints: Preserve copy, behavior, navigation, and branding. Change only layout, hierarchy, and color.
Stop after: Candidate images and short notes. Do not select a direction or prepare an engineering handoff yet.Vistra uses the project's rules to organize directions, generate or edit images, and check constraint fidelity and design quality.
A multi-direction exploration defaults to three directions and at most one targeted revision round. You can also set a budget explicitly.
This is an agent-chat example. Replace <…> with actual values.
Make differences visible and tradeoffs explainable.
A review identifies where problems occur, their basis, and which judgments remain limited by the available evidence.
An exploration delivers static candidate images and necessary notes, identifying changes, retained elements, and the author's self-check.
A formal design handoff records the exact selected version, adoption scope, necessary assets, and unresolved decisions so engineering can find the right basis.
Continue from an explicit choice.
A comparison recommends a direction with reasons. To adopt it, identify the exact candidate version or explicitly authorize Vistra to choose.
In an established candidate context, saying “use B” records the exact choice and proceeds to handoff. To record only the choice, say “do not prepare the handoff yet.” If key decisions or assets are missing, the handoff remains a draft with explicit gaps.
Vistra produces static images, not HTML or interactive prototypes. Interaction, responsive layout, and runtime behavior need engineering validation. Author self-checks are distinguished from independent reviews.
Review what exists, or explore with a clear goal.
Prepare the target and allowed changes, then choose the mode. After selection, turn the design into engineering inputs.
Ready to implement the selected design?