Visual Research Board

The problem

Vague design requests like "make it look premium" or "give it a Notion vibe" are impossible to execute without constant revision. Developers often lack the vocabulary to translate aesthetic references into actionable CSS or brand guidelines.

What it does

• Extracts specific design pillars including color palettes, typography stacks, and layout density from references.
• Synthesizes research into two distinct visual directions: a conservative option and a bold option.
• Generates concrete style specifications with HEX codes, font weights, and whitespace rules.
• Produces a finalized "Do and Don't" list to guide designers or frontend developers.

Why this beats prompting it yourself

General LLMs often provide generic "creative" advice or vague color suggestions. This skill enforces a structured deconstruction of visual styles across four specific axes, ensuring you get technical tokens instead of "vibes."

Use cases

• Creating a visual direction for a landing page before writing Tailwind or CSS.
• Developing a slide deck aesthetic based on an existing brand or era.
• Translating a client's "I like this site" link into a usable design spec.
• Pre-visualizing a video scene or poster layout through a structured moodboard.

Known limitations

Does not perform accessibility audits or final asset selection. It is not intended for managing design system tokens.