# Visual Research And Direction

> Use when collecting web/design references, competitive visuals, licensed examples, product captures, moodboards, and exactly three original visual directions with traceable sources and rights boundaries.

- Skill: `frankxai/visual-research-and-direction` (Agent Skill)
- Install (CLI): `npx skillmds@latest add frankxai/visual-research-and-direction`
- Raw SKILL.md: https://api.skillmd.com/api/skills/frankxai/visual-research-and-direction/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Research & Search
- Author: frankxai (https://skillmd.com/u/frankxai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/frankxai/visual-research-and-direction

---


# Visual Research And Direction

Visual research is evidence collection, not permission to copy. Build a source-led view of category codes, craft patterns, and opportunity space, then translate observed principles into original directions.

## Source Lanes

Use the source best suited to the question:

- live product and competitor sites for category reality;
- Mobbin/Pageflows for product flows and interaction patterns;
- Awwwards, SiteInspire, Godly, Land-book, Lapa Ninja, and One Page Love for composition and campaign references;
- Typewolf, Fonts In Use, foundry specimens, Google Fonts, Fontshare, and licensed libraries for typography evidence;
- Brand New, BP&O, agency case studies, identity guidelines, and trademark databases for identity/category research;
- Figma Community, shadcn/ui, Radix, 21st.dev, premium component libraries, and official design systems for implementation options after license/source review;
- product captures and authorized internal assets for claims and trust surfaces.

A source directory is not a quality verdict. Verify the live item, owner, date, terms, and relevance.

## Workflow

1. **Write the research question.** Name the product, recipient, category, surface, desired consequence, and what decision the research must support.
2. **Capture current truth.** Save desktop and mobile states of the current/host product. Preserve date, URL/route, viewport, and context.
3. **Build the competitor matrix.** For direct and adjacent references, record proposition, composition, type, color/materials, imagery, icons, motion, proof, CTA, category conventions, and failure modes.
4. **Create a source ledger.** Every image, capture, quote, and asset records URL/path, owner/creator, capture date, rights state, observed principle, and allowed intended use.
5. **Separate three classes.** Label material as:
   - `reference-only`: analyze principle; never ship;
   - `licensed-production`: use only within verified rights;
   - `owned-or-generated-source`: may enter production after provenance and quality gates.
6. **Extract principles.** Translate each useful reference into an abstract design principle: hierarchy, rhythm, information reveal, material quality, crop, type contrast, interaction causality, or signature memory. Do not replicate the original combination.
7. **Map white space.** Identify saturated category codes, trust expectations that must remain legible, and credible opportunities competitors do not occupy.
8. **Build exactly three direction boards.** Each direction includes thesis, first read, composition, type posture, palette/materials, imagery, iconography, motion, proof behavior, one signature memory, source principles, production method, rights risk, and anti-reference.
9. **Compare rendered boards.** Use the same real content and target aspect ratio. Score audience fit, distinctiveness, clarity, extensibility, accessibility, feasibility, rights safety, and brand memory.
10. **Record selection.** Decision owner selects one direction with reasons. Preserve rejected boards and hashes to prevent silent blending or repeated exploration.

## Visual Board Requirements

A direction board is an inspectable artifact, not prose alone. It must include:

- real headline/body/CTA or actual product data;
- type specimens and hierarchy;
- color/material swatches with semantic roles;
- at least one composition example at the intended desktop ratio and one mobile crop/state;
- imagery/iconography examples with provenance labels;
- motion storyboard or explicit still posture;
- source annotations and anti-reference panel;
- production feasibility and accessibility notes.

## Rights And Safety

- Never download or redistribute a font, stock asset, component, template, or illustration without verified rights.
- Do not scrape behind authentication/paywalls or bypass access controls.
- Do not trace marks, clone a competitor composition, imitate a living artist's signature style, or use named-artist prompting for production.
- Generated assets record tool/model, prompt or edit instruction, references, date, dimensions, hash, and inspection score.
- Exact text, charts, interfaces, and logos use deterministic vector/code/layout tools.

## Hard Stops

- reference or moodboard without source labels;
- rights state unknown for production material;
- three boards differ only by palette/font;
- boards use placeholder copy instead of real product truth;
- output depends on an unlicensed or copied composition, unlicensed font, or competitor mark;
- no mobile state/crop, no anti-reference, or no named decision owner.

## Output

Return the research question, current-state captures, competitor matrix, source ledger, white-space map, three rendered direction boards, comparison score, selected direction, rejected directions, rights risks, and production handoff.