research first design director

    1

    Context-driven design director that replaces generic AI patterns with research-backed UI specifications and audits.

    $5

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    0 installsSecurity scanned

    Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+20 more

    research 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
    • Generated the design tokens stylesheet

    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 ElementDecisionResearch Rationale
    TypographyInter, 18px BaseBold weights and larger base size ensure legibility in vibrating/bright environments.
    Palette#000000, #FFFFFF, #FFD700Absolute black/white for maximum contrast; Safety Yellow for primary actions.
    Interaction64px Min Touch TargetsAccommodates 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

    1. Validate the Safety Yellow (#FFD700) visibility on a mobile device in direct sunlight.
    2. Prototype the equipment log form using the 64px touch target constraint.
    3. Review the font rendering at 1.25x scaling for accessibility.

    research-first-design-director-tokens.css

    CSS · design tokens

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    What you get

    Generate high-contrast UI specifications for specific physical environments.Audit existing designs for WCAG 2.1 AA accessibility compliance.Translate audience research into concrete CSS variables and design tokens.Eliminate generic AI visual tropes in favor of distinct, functional branding.

    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.

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean 21 days ago

    • Passed all security checks, Safe to install

    Listed21 days ago

    What's inside

    Frequently Asked Questions