research first design director
Context-driven design director that replaces generic AI patterns with research-backed UI specifications and audits.
$5
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+21 moreClaude CodeCursorCodex CLIMuseDots
Manus
Grok
Grok Bot+18 agentsresearch first design director
Example session with this skill installed
I need a design direction for a mobile web app used by construction site managers. It's for tracking equipment maintenance in high-glare, outdoor settings. They wear gloves.
- Read your context and instructions
- Compiled the research first design
The research phase identifies high-glare environments and physical constraints (gloves) as primary drivers. The design focuses on high-contrast ratios and oversized touch targets.
Research-First Design Direction: FieldOps Maintenance
1. Research Brief
- Audience: Site managers, age 35-55, moderate technical fluency, high physical activity.
- Environment: High-glare sunlight, dusty conditions, mobile-only usage.
- Product: Equipment status logging and maintenance alerts.
- Constraints: Glove usage requires larger hit areas; sunlight requires WCAG AAA contrast.
2. Design Rationale
| Design Element | Decision | Research Rationale |
|---|---|---|
| Typography | Inter, 18px Base | Bold weights and larger base size ensure legibility in vibrating/bright environments. |
| Palette | #000000, #FFFFFF, #FFD700 | Absolute black/white for maximum contrast; Safety Yellow for primary actions. |
| Interaction | 64px Min Touch Targets | Accommodates glove usage and imprecise tapping while walking. |
3. Specification
:root {
/* High-Contrast Safety Palette */
--color-bg: #FFFFFF;
--color-text: #000000;
--color-primary: #FFD700; /* Safety Yellow */
--color-error: #D32F2F;
/* Touch-First Spacing */
--hit-area-min: 64px;
--spacing-base: 12px;
/* Typography */
--font-main: 'Inter', sans-serif;
--weight-bold: 700;
}
4. Implementation Do/Don't
- Do: Use solid background colors for all buttons.
- Do: Use haptic feedback on successful logs to compensate for visual glare.
- Don't: Use thin weight icons or low-contrast gray text (#777).
- Don't: Use multi-step modals that require precise "X" button closing.
Next steps
- Validate the Safety Yellow (#FFD700) visibility on a mobile device in direct sunlight.
- Prototype the equipment log form using the 64px touch target constraint.
- Review the font rendering at 1.25x scaling for accessibility.
Connects securely to your tools. The creator never sees your data.
About this skill
The problem
Generic AI-generated UIs often lack context, relying on tired gradients and rounded boxes that don't fit your specific audience. Developers frequently end up with "pretty" designs that fail usability audits or ignore the actual environment where the product is used.
What it does
- Performs context-first research across audience demographics, technical constraints, and category conventions before suggesting any visuals.
- Derives specific typography, palettes, and layout structures backed by a traceable decision table and research rationale.
- Generates concrete implementation guides including CSS variables, font stacks, and accessibility-first component schemas.
- Conducts rigorous design audits focusing on WCAG 2.1 AA compliance, hierarchy clarity, and the removal of unnecessary decoration.
Frameworks & tools
Framework-agnostic but provides output optimized for CSS, Tailwind, React, and Figma workflows. Focuses on WCAG 2.1 AA accessibility standards.
Why this beats prompting it yourself
Most LLMs default to "modern SaaS" aesthetics by rote. This skill forces a research phase that prevents generic outputs, ensuring every hex code and spacing value is justified by data rather than style trends.
Use cases
- Designing a data-heavy dashboard for high-stress professional environments.
- Developing an accessible mobile interface for non-technical or elderly users.
- Building a distinct brand identity that avoids common "AI-style" visual tropes.
- Auditing an existing frontend for usability bottlenecks and accessibility gaps.
Known limitations
Requires initial input regarding the product goals and audience to be effective. It will flag assumptions as risks if no data is provided.
Requires baseline information about the audience and product goals. Will flag missing data as risks rather than inventing user personas.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scan
Security scan passed 2 months ago
Permissions
No special permissions declared or detected