My journey into the future of art

Exploring how AI can collaborate with illustrators to accelerate concepts, textures, and client pitches without losing creative control or web performance budgets.

Why I tested AI in my illustration workflow

As a front-end developer with a design background, I wanted to see if AI tools could speed the visual ideation I pair with product work. I focused on Midjourney and Stable Diffusion to generate textures, mood boards, and alternate lighting setups that usually take hours to explore manually.

The goal was simple: keep creative control while reducing the time from concept to client-ready visuals. I treated AI like a junior collaborator—useful for drafts, never final output without review.

Setting constraints before generating

I set boundaries so AI outputs wouldn’t derail consistency: fixed aspect ratios that match my templates, a defined color palette, and a small set of prompt archetypes. I also kept a library of reference images to condition style—otherwise outputs drifted.

I wrote prompts with structure: subject, setting, mood, lighting, camera angle, and color hints. Small changes to one dimension (e.g., lighting) produced usable variants without breaking the base style.

Prompt scaffolds I reused

• Subject + purpose: “Dashboard hero illustration for a productivity app …”
• Lighting + mood: “soft rim light, dusk tones, calm, no harsh contrast”
• Composition: “three-quarter view, negative space on the right for text”

Where AI helped (and where it didn’t)

AI was strong at early mood boards, background textures, and lighting alternates. It struggled with consistent characters across a series and precise brand iconography.

I limited AI to parts of the workflow that could be safely composited: textured backdrops, subtle gradients, and ambient elements behind hand-crafted UI or typography. Character-driven scenes still required manual passes to keep continuity.

Good fits

• Background plates for landing page heroes and case study covers.
• Texture overlays for cards and sections without increasing load.
• Lighting variants to quickly test atmosphere before committing.

Process I followed per asset

1) Define intent: what the image must convey and where it will live (hero, card, inline).

2) Generate 10–15 variants with tight prompts and fixed ratios (16:9 or 3:2).

3) Pick 2–3 candidates, upscale, and composite with real UI in Figma.

4) Run accessibility checks on contrast; ensure text remains readable.

5) Export to WebP at target sizes and keep file names tied to the slug for consistency.

Quality and ethics guardrails

Every AI-assisted asset went through the same QA as hand-made art: color correction, noise cleanup, and compression. I avoided training on client IP and kept prompts generic enough to prevent style cloning. If a generated piece resembled known art too closely, I discarded it.

Transparency matters: in client decks, I tagged AI-assisted concepts so stakeholders know what was AI-aided versus hand-drawn. It built trust and set expectations about revision scope.

Integrating AI assets into front-end builds

After selecting finals, I exported multiple sizes and added proper `sizes` values to `next/image` to avoid bloat. I kept file names consistent with slugs so CMS-less builds stayed organized. For animations, I avoided shipping heavy video; subtle parallax with compressed stills kept performance healthy.

I also added alt text that described the asset’s role (e.g., “Ambient illustration of dashboard with blue gradients”) so accessibility and SEO stayed intact.

Shipping checklist

• Export WebP at 1200x630 for OG and scaled variants for UI slots.
• Write alt text tied to intent, not just keywords.
• Lazy-load below-the-fold imagery; prefetch only hero assets.

Validate impact and keep assets honest

To prove AI assistance is worth it, I tracked time saved per asset, revision counts, and the percentage of prompts that produced something usable. When a client loved a concept, I noted why—color mood, lighting, or composition—to refine the next prompt batch.

Performance stays part of the review: every page using AI-assisted art gets a quick Lighthouse pass to confirm LCP and CLS are stable. If the asset hurts metrics, I compress harder, crop tighter, or replace it with a simpler shape.

Metrics I log

• Minutes from prompt to approved concept versus full manual explorations.
• Number of revisions before a concept is client-ready.
• Lighthouse deltas after swapping in AI-assisted art (LCP, CLS, TBT).

A reusable playbook for client projects

When a client requests fresh visuals, I start with a one-page brief: intent, audience, usage slots, and technical constraints. I reuse prompt templates, enforce fixed ratios, and store outputs in a slugged folder that matches the page route. This keeps collaboration tidy for developers and designers.

Every delivery includes a change log, alt text, and a license note clarifying what is AI-assisted. That transparency keeps legal and marketing aligned and reduces back-and-forth during approvals.

Drop-in steps for a sprint

• Align on usage: hero, card, or background texture with file size targets.
• Generate, upscale, and composite early so devs can wire real assets.
• Archive prompts and exports alongside the PR for reproducibility.

Lessons learned that stick

AI accelerates exploration but can’t replace design judgment. Tight constraints produce reusable outputs; loose prompts create rework. Integrate AI where iteration speed matters (textures, mood), not where consistency is critical (logos, characters).

Process beats inspiration: fixed ratios, style references, and prompt templates save more time than chasing novel prompts. Treat AI assets like any other dependency—version them, name them clearly, and measure their impact on performance.

If you try this, remember

• Define what AI should and should not generate before you start.
• Keep a prompt log tied to final assets for reproducibility.
• Measure the impact on load time; visuals shouldn’t slow the experience.

Where I’m taking this next

I’ll keep using AI where it speeds learning—mood boards, textures, and lighting tests—and keep the core narrative and UI fully intentional. The more disciplined the constraints, the more useful AI becomes.

If you’re exploring AI for your design or dev workflow, start small: one page, one set of prompts, one export pipeline. Measure the time saved and the impact on performance before expanding.