Search Results

Core Principles

Before applying any technique, every designer using AI tools in client work should hold these four principles. They are not aspirational — they are operating constraints.

1. Capability-First, Not Tool-First

AI tools will change. Capabilities — synthesis, generation, iteration, documentation — are stable. This framework is built around what AI can do, not what any product is called today. When a tool is named, it is a current example of a capability, not a permanent endorsement.

2. Evidence-Led

Every recommendation here has a validation path. Where real teams have published or shared outcomes, those are cited directly. Where first-principles reasoning fills a gap, that is flagged explicitly. No company's approach dominates this framework.

3. Service-Company Aware

This was built for service work from the start. The specific constraints that shape every recommendation:

• Multiple clients simultaneously: AI workflows must be isolated per client.
• Defensibility over novelty: Every AI-assisted output must be explainable to a client who may distrust AI.
• Stewardship, not ownership: Designers here guide the client's vision. AI tools amplify your judgement — they do not substitute for it.
• Confidentiality is a hard constraint: Client data must never be fed into external AI tools without an explicit anonymisation step.
• Speed and quality must coexist: Time saved on generation must be invested in quality review.

4. The Deterministic Output Problem

AI produces confident-sounding output for precise tasks. That output still needs checking.

Evidence Tiers

AI Use Cases

Discovery is where AI provides the highest-leverage assistance with the lowest risk of confidentiality exposure — because good discovery AI work operates on public signals and anonymised research.

• Secondary research synthesis: AI processes competitor analyses, sector reports, and analogous company reviews rapidly.
• Interview guide generation: AI drafts topic-structured discussion guides from a brief.
• Transcript processing: AI identifies themes, quotes, and patterns from anonymised interview transcripts at scale.
• Affinity clustering: AI pre-sorts observations into thematic clusters for team review.
• Stakeholder mapping: AI drafts stakeholder maps and influence matrices from a project brief.
• Long document analysis: Use Gemini's long-context capability or NotebookLM to process 100+ page documents in a single pass with cited summaries.
• Persistent project context: Use Claude Projects or ChatGPT custom GPTs to maintain research context across sessions. Anonymise all inputs before loading.

Prompt Template — Transcript Synthesis

ROLE: You are a senior UX researcher.
TASK: Analyse the following interview transcript and produce:
  1. Top 5 themes with supporting quotes (anonymised)
  2. Key tensions or contradictions observed
  3. Unanswered questions that warrant follow-up
  4. One surprising finding if any
TRANSCRIPT: [paste anonymised transcript here]
FORMAT: Structured output with quotes in block format.

Prompt Template — Competitive Research

ROLE: You are a competitive research analyst.
TASK: Review this [industry] and produce a landscape summary:
  1. Key player positioning (max 6 companies)
  2. Feature gap analysis
  3. Underserved user needs visible from public signals
  4. UX and design patterns across the category
CONTEXT: [paste anonymised sector description]
Output as a structured brief shareable with a design team.

Proof of Results

Guardrails

AI Use Cases

• How Might We generation: Given a problem space, AI generates 20–40 HMW questions in under a minute.
• Problem statement drafting: AI drafts multiple framings of a design brief from research inputs.
• Persona synthesis: AI combines interview themes into proto-personas for team alignment. Always validate against real user data.
• Design principles generation: AI drafts candidate design principles from a brief or research summary.
• Opportunity prioritisation: AI scores and ranks opportunities against business goals and user needs when given explicit criteria.
• Persistent brief context: Load the anonymised project brief into Claude Projects at the start of the engagement.

Prompt Template — Define Phase Starter

ROLE: You are a design strategist.
CONTEXT: [paste anonymised research summary — max 500 words]
TASK:
  1. Generate 15 'How Might We' questions across 3 themes
  2. Draft 3 alternative problem statement framings
  3. Propose 4–5 candidate design principles
     (name, one-line description, design implication for each)
  4. Rank the top 5 opportunities by user impact and business fit
CONSTRAINT: Plain language — defensible to a non-design client.

Guardrails

AI Use Cases

• Concept generation: AI generates 20–40 rough concept directions from a brief. Volume and speed matter here.
• Analogous inspiration: AI identifies how analogous industries have solved similar problems.
• Anti-pattern exploration: Prompting AI to generate the worst possible solution often surfaces useful boundary conditions.
• Multi-modal ideation: Sketch a rough concept on paper or iPad. Photograph it. Upload to Claude or ChatGPT with the prompt 'Interpret this sketch as a UI concept and generate 5 variations.'
• Motion concept exploration: Use Rive for interaction and animation direction exploration.

Prompt Template — Divergent Concept Generation

ROLE: You are a lateral-thinking design strategist.
PROBLEM: [one-sentence problem statement]
USER: [one-line user description — anonymised]
TASK: Generate 20 distinct concept directions. For each:
  - Concept name (2–4 words)
  - Core idea (1 sentence)
  - What makes it different from obvious solutions
RULES:
  - Prioritise novelty over feasibility at this stage
  - Include at least 3 counterintuitive concepts
  - No concept should resemble another in this list

Prompt Template — Sketch to Concept Variations

I have sketched a rough UI concept [attach image].
Interpret this sketch and generate 5 distinct variations:
  1. A version that prioritises simplicity
  2. A version that prioritises data density
  3. A version optimised for mobile-first
  4. A version that challenges the layout convention
  5. A version the designer would least expect

For each: describe the layout, key interaction, and
what design principle it prioritises.

Guardrails

Three distinct modes of AI assistance now exist in parallel: AI as writing assistant, AI as UI generator, and AI as code generator. Each requires different skills and different guardrails.

Writing & Copy Assistance

• UI copy drafting: Microcopy, button labels, empty states, error messages, and onboarding text at speed.
• Accessibility copy: ARIA labels, alt text, and screen reader descriptions for components.
• User flow diagramming: AI generates Mermaid-compatible flow diagrams from a text description of a process.

UI Generation

• Screen layout from prompt: Tools like Google Stitch, Uizard, and v0 produce Figma-importable or code-based screen designs from text. Google Stitch (formerly Galileo AI, now a free Google Labs tool running on Gemini) is purpose-built for this.
• Wireframe to high-fidelity: Upload a rough wireframe sketch. AI generates a styled, high-fidelity version applying a design system or described visual style.
• Design system-constrained generation: Provide the system's tokens, component names, and style rules as context.
• Component generation in v0: Use v0 by Vercel to generate individual React/Tailwind components from a text description.

Interactive Prototyping

• Vibe-coded interactive prototype: Figma Make, Lovable, and Bolt.new produce working interactive prototypes from a Figma frame or text prompt.
• Screenshot to working component: Take a screenshot of an existing UI element. Upload to Claude or ChatGPT. Prompt: generate a working React component that matches this design.
• Ask Claude to generate a working component: In any Claude conversation, describe a UI component or screen and ask Claude to generate it as working HTML or React. Claude renders a live preview directly in the conversation — no separate tool, no setup.

Prompt Template — UI Generation with Design System Constraints

Generate a [screen name] screen for a [product type].

Design system constraints:
  Colours: [list primary, secondary, surface, error tokens]
  Typography: [heading and body type scales]
  Spacing scale: [e.g. 4, 8, 12, 16, 24, 32, 48px]
  Components available: [list: Button, Card, Input, Nav, etc.]
  Border radius: [value]

Screen requirements:
  Primary action: [what the user is trying to do]
  Key content: [what must appear on this screen]
  Constraints: [mobile-first / desktop / accessibility priority]

Output as: React with Tailwind / HTML with CSS / Figma description

Prompt Template — Screenshot to Component

I am attaching a screenshot of a UI component. [attach image]

Generate a working React component that matches this design.
Use Tailwind CSS for styling.

Requirements:
  - Match the visual design as closely as possible
  - Include all visible states (default, hover, active, disabled)
  - Add appropriate ARIA attributes for accessibility
  - Use semantic HTML elements
  - Add TypeScript props interface

Flag any design decisions you had to infer from the screenshot.

Honest Limitations of AI UI Generation

Guardrails

AI Use Cases

• Concept mockup imagery: AI generates placeholder illustrations and mood board imagery for early presentations.
• Generative Fill for photo editing: Adobe Firefly's Generative Fill edits existing photography in context — removes objects, extends backgrounds, replaces elements.
• Vector asset generation: Adobe Firefly generates editable vector assets. Recraft is purpose-built for vector and UI illustration.
• Motion and video assets: Adobe Firefly Video and Runway generate short motion assets for UI demos and concept animations.

Prompt Template — Style Anchor

Style: [flat vector / line art / isometric / hand-drawn]
Stroke weight: [e.g. 2px consistent / none]
Colour palette: [max 5 hex codes]
Mood: [professional / playful / minimal / warm / bold]
Avoid: [gradients / shadows / photorealism / faces / etc.]

SUBJECT: [specific scene or concept for this asset]

NOTE: AI has no memory between sessions. Paste the full
STYLE ANCHOR unchanged at the start of every generation
prompt for this project to maintain visual consistency.

Guardrails

AI Use Cases

• Deck structure and narrative: AI drafts a presentation flow from a brief.
• AI-native deck creation: Gamma generates a full slide deck from a text brief or document. Best for internal presentations and early concept decks — not polished final deliverables.
• Deck narrative critique: Upload your current deck to Claude or ChatGPT. Ask it to critique the narrative structure, identify gaps in the argument, and flag slides where a client stakeholder might disengage.
• Objection preparation: AI generates likely client objections to a design recommendation and drafts responses.
• Interactive prototype for sign-off: A working prototype the client can interact with produces faster, higher-quality sign-off than a static deck.

Prompt Template — Design Decision Summary

ROLE: Senior design consultant presenting to a non-design
client stakeholder.

Write a defensible decision summary for this recommendation:
  Decision: [describe the design decision]
  Rationale: [why this approach]
  Alternatives considered: [what was rejected and why]
  User evidence: [anonymised research insight]
  Business implication: [connection to client goals]

Tone: Professional, confident, no jargon.
Length: One paragraph for email or slide note.
End with: 'We recommend [X] because [Y]. Next step is [Z].'

Prompt Template — Objection Preparation

I am presenting this design direction to a client stakeholder:
[brief description of the recommendation]

Stakeholder profile: [conservative / technically minded /
brand-focused / budget-focused — describe]

Generate 8 likely objections. For each:
  1. The objection as the stakeholder might phrase it
  2. A response that addresses the concern while holding
     the design position
  3. A fallback compromise if the main response fails

Guardrails

AI Use Cases

• Spec documentation generation: AI takes a design description and produces structured component specifications.
• Acceptance criteria drafting: AI drafts acceptance criteria for design tickets from a component or interaction description.
• CSS and design token generation: AI translates design system values into CSS custom properties, Tailwind config, or design token JSON.
• Handoff documentation: AI structures design decisions, component states, accessibility requirements, and interaction notes into a complete handoff document.

Tools — Developer Handoff

AI Coding Tool Decision Framework

When a designer is working in a client's codebase, the choice of AI coding tool is answered by three questions first:

Prompt Template — Component Specification

Generate a developer-ready component specification for:
Component: [component name]
Purpose: [what it does in one sentence]

Include:
  1. Visual states (default, hover, active, disabled, error, loading)
  2. Responsive behaviour (mobile/tablet/desktop)
  3. Accessibility (ARIA labels, keyboard nav, focus states)
  4. Content requirements (character limits, edge cases)
  5. Animation/transition specs if applicable
  6. Integration dependencies (APIs, data requirements)

Format as a structured spec a developer can work from directly.

Guardrails

AI Use Cases

• Analytics narrative: AI translates raw analytics data into plain-language narrative for client reporting.
• Heatmap and session interpretation: Hotjar AI and Microsoft Clarity AI surface patterns without manual review of every recording.
• User feedback synthesis: App store reviews, NPS comments, support tickets — AI identifies themes and priority issues from high-volume qualitative feedback.
• Sentiment analysis at scale: AI sentiment analysis produces a prioritised issue list from large volumes of user feedback.
• Automated usability test analysis: Maze AI generates insight summaries from unmoderated usability test sessions.
• Iteration brief generation: AI drafts an iteration brief from post-launch findings, structuring issues into priority tiers.

Prompt Template — Analytics to Design Insight

I have the following post-launch analytics data:
[paste anonymised metrics: drop-off rates, task completion,
 error rates, time on task, NPS scores, etc.]

Translate this data into:
  1. Plain-language summary for a non-technical client
  2. Top 3 design problems implied by the data
  3. Prioritised iteration recommendations with design rationale
  4. Metrics to track in the next iteration cycle

Flag any data gaps that make these conclusions uncertain.
Do not state causation — state correlation and hypothesis only.

Guardrails

5-Minute Anonymisation Protocol

1. Replace client name with a generic descriptor: 'a mid-market SaaS company'
2. Replace product names with functional descriptions: 'the customer dashboard'
3. Remove all employee names, titles, and identifying quotes
4. Remove all URLs, app store links, and brand identifiers
5. Replace specific financial or commercial figures with ranges or remove entirely
6. Replace participant names in research with 'User A', 'User B' etc.
7. Read the anonymised version — if you could identify the client from it, anonymise further

What Is Safe to Input

• Safe: Anonymised problem statements
• Safe: Generic industry context without client-specific details
• Safe: Your own design thinking and hypotheses
• Safe: Public information about competitors or market trends
• NOT safe: Raw interview transcripts with participant names
• NOT safe: Client briefs, contracts, or strategy documents
• NOT safe: Unpublished product roadmaps or feature plans
• NOT safe: Any data covered by NDA

Platform Data Policies

Four distinct directions of translation now exist between design files and code. Before exploring each direction, three Figma-native capabilities underpin how modern canvas-to-code works:

A. Claude + Figma — The Native Integration

Claude's Figma integration reads live Figma files through the Figma API — understanding component relationships, auto-layout logic, design system connections, and layer structure. Unlike screenshot-based tools, it reads actual design structure.

What This Enables

• Design-aware code generation: Claude reads your actual Figma file and generates component code that reflects the real design structure.
• Design system audit: Ask Claude to identify components that are inconsistent with the design system.
• System-aware new component generation: Claude generates new components that match the established system's patterns, spacing, and naming conventions.
• Handoff documentation from live files: Claude reads the Figma file and produces component specifications and accessibility notes without a documentation sprint.

The Role of the Figma MCP Server

When the MCP server is connected, Claude reads exact component properties, spacing values, and token references rather than inferring them from a screenshot. The difference in code output quality is significant. Ask the development lead to configure the Figma MCP server alongside Cursor or VS Code at the start of a project.

B. Canvas → Code — Pipeline Tools

C. Screenshot → Code

The most accessible direction — no Figma integration or plugin required. A screenshot of any UI element can be converted to working code using Claude, ChatGPT (GPT-4o), or AI coding tools with vision capability.

• Regenerate an existing component in a new design system: Screenshot the current component. Prompt: generate this component in React using our new design system tokens.
• Reverse-engineer a reference UI: Screenshot a UI pattern from a competitor. Starting point for adaptation, not copying.
• Quick Figma-to-code without the integration: Export a Figma frame as PNG. Upload to Claude with the screenshot-to-component prompt.

D. Code → Canvas

When a client's product has evolved faster than its design files, code-to-canvas closes the gap.

• Figma Code Connect for reverse context: When Code Connect is configured, Dev Mode shows the real production code snippet for any component — giving exact component names, props, and import paths to work from when rebuilding design files.
• Figma Dev Mode inspection: Surfaces what CSS values, components, and tokens are actually in use versus what is in the design file.
• AI-assisted component inventory: Use Claude or Cursor to scan a client's component directory and generate a plain-language inventory.

Guardrails

What It Means Practically

Vibe coding is using AI to generate working interactive prototypes from natural language or design input — without writing code yourself. You describe what you want; the AI produces working HTML, React, or similar code that you can immediately share and test.

When to Use It / When Not To

Step-by-Step: Concept to Shareable Prototype in Under One Hour

1. Start in Figma (15 min): Design or sketch your key screen at any fidelity. Enough to communicate layout and intent.
2. Export or describe (2 min): Export the frame as PNG, or write a plain-language description of what the screen does.
3. Generate (20 min): Use Figma Make, Lovable, or Bolt.new. Paste the image or description. Describe the interaction: 'When the user clicks [X], show [Y].' Review the output.
4. Iterate (15 min): Fix issues by describing them. 'The button is too small.' 'Add a loading state after submission.' You are directing, not coding.
5. Share (2 min): All tools generate a shareable URL. Send directly to a client or test participant.

Choosing Your Tool

Guardrails

The Spectrum

Target for service designers: Levels 1–2 as baseline. Level 3 as an advanced capability for designers who want it and have the aptitude.

Agent Mode vs. Chat Mode

• Chat mode: You paste a snippet of code, describe the change, AI edits it. You apply the edit manually. Best for targeted, single-file changes. Most designer UI-layer work sits here.
• Agent mode: AI is given a task and autonomy to make changes across multiple files. Powerful for systematic changes — 'update all instances of this deprecated component.' Use with caution in a client codebase. Always review all changes before committing.

Working in a Client Codebase — Rules

1. Answer the three-question framework first — see Phase 7
2. Always work in a branch — never directly on main or production
3. Confirm with the development lead which files are in scope for UI edits
4. Make small, targeted changes with clear commit messages
5. Request a developer review before merging — even P3 CSS fixes
6. Never touch files outside the designated UI layer scope

Guardrails

When AI Assets Are Appropriate

By Asset Type

UI Illustration

Adobe Firefly for client deliverables. ChatGPT (DALL·E 3), Gemini, or Midjourney for exploration. Recraft for vector-native output. Known limitation: AI illustration defaults to a recognisable 'AI illustration style' — strong style prompting with a reference image counteracts this.

Icons

AI icon generation is currently unreliable for production-quality, consistent icon sets. Use established icon libraries (Lucide, Phosphor, Material Symbols) for production. AI is useful for one-off custom icons or concept exploration only.

Photography

Adobe Firefly for client-deliverable photography. Generative Fill (Adobe Firefly in Photoshop) for editing existing photography in context. Known limitation: AI-generated photographs of people have ethical and legal complexity. Avoid depicting specific real people or brands.

Motion & Video

Adobe Firefly Video for IP-safe motion assets. Runway for higher-quality or longer motion generation. Rive for production-ready UI animations. AI video generation is rapidly maturing — review policies for commercial use on each project.

The most consistently underused application of AI in design practice is the removal of non-design overhead. Every hour spent on ticket writing, documentation formatting, or meeting summarisation is an hour not spent designing.

Ticket Generation from Briefs

Convert this design brief into development-ready tickets.
For each ticket:
  - Title (action-verb: 'Build', 'Update', 'Fix')
  - User story (As a [user], I want [action], so that [outcome])
  - Acceptance criteria (bullet list, testable)
  - Design reference (Figma link placeholder)
  - Priority: P1 / P2 / P3

BRIEF: [paste anonymised brief]
TECH STACK: [list if known]

Handoff Documentation Without a Sprint

Generate a design handoff document for this phase:
Phase: [phase name]
Scope: [brief description of what was designed]

Include:
  1. Summary of design decisions and rationale
  2. Component inventory with states
  3. Accessibility requirements
  4. Open questions and known issues
  5. Next steps for the development team

Input: [paste design notes, Figma structure, decision log]

Shared Prompt Library

The single highest-leverage admin investment: building and maintaining a shared prompt library for the team. Structure: Capability / Phase / Prompt / Example output / Last refined / Owner.

Designer AI Skill Stack 2025/2026

Ten skills ranked from foundational to advanced. The first five are a professional baseline by mid-2025.

30-Day Adoption Plan

Built for adoption under real client pressure. Each action fits into live work.

Quick Start

One action. One day. Immediately visible result.

Core AI Platforms

Claude — Anthropic

A reasoning-first AI assistant with strong capabilities in structured writing, code generation, and design-context analysis. The only major AI assistant with a native Figma integration, allowing it to read live design files directly through the Figma API.

• Research synthesis — structured output from long briefs, transcripts, and multi-source analysis
• UI code generation — React, HTML/CSS, Tailwind with design system awareness via Figma integration
• Figma file reading — reads layer structure, component relationships, and design system values directly
• Vision analysis — upload a screenshot of a design for critique, accessibility flagging, or component identification
• Code Connect — links Figma components to real production code snippets in Dev Mode
• MCP Server — exposes live design file data to AI coding tools for design-aware code generation
• Git Integration — design files as branches in the same repository as code

ChatGPT / GPT-4o — OpenAI

A highly versatile multimodal AI assistant combining text, image, voice, and file analysis in a single interface.

• Multimodal input — voice-to-brief, image analysis, file uploads, all in one conversation
• Image generation (DALL·E 3) — directly in conversation without switching tools
• Canvas feature — iterative document and code editing in a persistent side panel
• Broad research and market analysis starting points

Gemini — Google

Google's AI platform with the largest context window of the major AI assistants, deep integration with Google Workspace, and NotebookLM as a dedicated research synthesis tool.

• Long-context document analysis — processes very large documents in a single pass
• Google Workspace integration — reads Google Docs, Sheets, Slides, and Drive files directly
• NotebookLM — purpose-built for research synthesis from multiple uploaded sources with citations
• Real-time web grounding — search-integrated responses for current market and competitor research

Figma AI — Figma

Native AI capabilities embedded directly in the design environment. Operates within the context of your actual design files, components, and design system.

• Design system-aware component suggestions
• Dev Mode AI annotations — generates handoff notes and code hints from design structure
• Code Connect — links Figma components to real production code snippets
• MCP Server — exposes live design file data to AI coding tools
• Git Integration — design files as branches with visual diffs in pull requests
• Figma Make — generates interactive prototypes from frames

Adobe Firefly — Adobe

Adobe's AI platform trained on licensed Adobe Stock content, providing commercial use rights that other AI image generation platforms cannot match with the same clarity.

• Commercial IP-safe image and asset generation — the only major platform with clear commercial licensing
• Generative Fill — editing existing photography in context in Photoshop
• Vector generation — generates editable vector assets
• Creative Cloud integration — generated assets land directly in Photoshop, Illustrator, and InDesign

Capability Map

Specialist Tools

These tools deliver specific capabilities that the core AI platforms do not cover. Each is a current example of a capability — when a tool is superseded, find the new best example and update this section.

Research Synthesis & Repository

Interactive Prototyping

Canvas → Code Pipeline

AI in Client Codebases

UI-Specific Image Generation

Design System Documentation

Accessibility

Post-Launch Analytics

Presentation Creation