visual-director

Creates visual direction and design contracts for the Spline auto-parts landing page.

Updated Aug 10, 2026
One-click install
npx skills add https://github.com/prostoali2207-gif/auto-parts-landing --skill visual-director-prostoali2207-gif
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-director
Source: https://github.com/prostoali2207-gif/auto-parts-landing/tree/main/.agents/skills/visual-director
Command: npx skills add https://github.com/prostoali2207-gif/auto-parts-landing --skill visual-director-prostoali2207-gif

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Landing pages for automotive parts businesses often end up generic, visually flat, or overloaded with decoration, weakening both credibility and conversion. This Skill provides a structured art-direction process that produces ambitious, conversion-safe visual direction before any frontend implementation begins. ## Core Features & Use Cases - Structured Visual Process: Runs a defined loop from context reading and external benchmark research through visual diagnosis, 2-3 candidate directions, selection, and a written DESIGN contract. - Quality Scorecard: Evaluates every direction against explicit dimensions such as character, clarity, typography, page rhythm, perceived quality, and mobile visual UX with minimum score thresholds. - Conversion Guardrails: Enforces hard constraints that protect the Find My Part / Request a Part flow and prohibit fabricated reviews, stock, or trust signals. - Use Case: Before redesigning the Spline landing page hero and section rhythm, run this Skill to benchmark three strong references, generate differentiated visual directions, and hand an approved design contract to the frontend agent and independent UI Guard. ## Quick Start Use the visual-director skill to diagnose the current Spline landing page and produce an approved visual direction with a DESIGN contract.

Frequently Asked Questions about visual-director

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a visual direction for a landing page before implementation?

Follow the operating loop: read context and current rendered pages, benchmark at least three external references for transferable mechanisms, diagnose visual weaknesses, generate 2-3 genuinely different directions, select one, and record implementation decisions in a DESIGN contract.

What makes a landing page visual direction conversion-safe?

A conversion-safe direction never weakens or delays the primary action, here Find My Part / Request a Part. It also prohibits fabricated reviews, ratings, stock, or trust signals, and keeps commercial direction scoring at least 9 out of 10.

How is visual quality measured in this design process?

Quality is scored across dimensions including character, clarity, beauty, visual lightness, composition, typography, page rhythm, perceived quality, and mobile visual UX. Launch-oriented work must meet minimum thresholds such as clarity at 9/10 and composition at 8.5/10, with low scores requiring explicit explanations.

Can the visual director approve its own final design?

No. The Visual Director only outputs VISUAL DIRECTION: APPROVED FOR IMPLEMENTATION or REVISE. Final product PASS belongs to an independent UI Guard that reviews the rendered implementation against the approved thesis and scorecard targets.

What are the limitations of this visual direction approach?

It defines direction and contracts but does not implement frontend code or own funnel strategy, information architecture, or final visual approval. It also requires real assets to be marked ASSET NEEDED rather than fabricating imagery or proof.