Prototype Strategy Skill

Prototype Strategy

Plan and execute prototyping approaches from paper sketches to high-fidelity interactive prototypes.

When to Use This Skill

Use this skill when:

Prototype Strategy tasks - Working on plan prototyping approach - fidelity levels, tool selection, prototype types, testing strategies, and design-to-development handoff
Planning or design - Need guidance on Prototype Strategy approaches
Best practices - Want to follow established patterns and standards

MANDATORY: Skill Loading First

Before answering ANY prototyping question:

Use established prototyping methodology sources
Base all guidance on validated design practices

Fidelity Spectrum

Fidelity Levels

| Level | Characteristics | Best For | |-------|-----------------|----------| | Low (Lo-Fi) | Sketchy, grayscale, static | Early exploration, concept testing | | Medium (Mid-Fi) | Structured, placeholder content, limited interaction | Information architecture, flow validation | | High (Hi-Fi) | Polished, real content, full interaction | Usability testing, stakeholder sign-off |

Fidelity Dimensions

| Dimension | Low | Medium | High | |-----------|-----|--------|------| | Visual | Sketchy, boxes | Wireframes, grays | Pixel-perfect, branded | | Content | Lorem ipsum | Representative | Real content | | Interaction | Static/paper | Click-through | Micro-interactions | | Breadth | Key screens | Critical flows | Full experience |

Prototype Types

By Purpose

| Type | Purpose | Fidelity | Tools | |------|---------|----------|-------| | Concept Sketch | Generate ideas | Very low | Paper, whiteboard | | Paper Prototype | Quick flow testing | Low | Paper, Post-its | | Wireframe | Layout validation | Low-Medium | Figma, Balsamiq | | Clickable Mockup | Flow testing | Medium | Figma, Sketch | | Interactive Prototype | Usability testing | High | Figma, Principle | | Coded Prototype | Technical feasibility | High | HTML/CSS, React | | Wizard of Oz | Simulate complex behavior | Varies | Mixed |

Decision Matrix

What are you testing?
├── General concept/direction
│   └── Paper prototypes, sketches (Low)
├── Information architecture / navigation
│   └── Wireframes, tree tests (Low-Medium)
├── Specific interactions / usability
│   └── Interactive prototype (Medium-High)
├── Visual design / brand
│   └── High-fidelity mockups (High)
├── Technical feasibility
│   └── Coded prototype (High)
└── AI/complex behaviors
    └── Wizard of Oz prototype (Varies)

Prototyping Approaches

Paper Prototyping

When: Early concept exploration, limited resources, rapid iteration

## Paper Prototype Kit

### Materials
- Index cards or paper (one per screen)
- Markers/pens
- Sticky notes (for overlays, error states)
- Scissors (for buttons that "move")
- Clear sheet (for tracing overlays)

### Running a Paper Prototype Test
1. Explain: "This is rough - we're testing the concept, not the drawing"
2. Lay out starting screen
3. Give user a task
4. User "clicks" by pointing
5. Swap/update papers to show response
6. Observe, take notes
7. Ask follow-up questions

Digital Low-Fidelity

When: Remote testing, slightly more polish needed, version control

// Configuration for low-fidelity prototype
public class LoFiPrototypeSpec
{
    public required string ProjectName { get; init; }
    public required List<ScreenSpec> Screens { get; init; }
    public required List<FlowSpec> Flows { get; init; }

    public LoFiGuidelines Style { get; init; } = new()
    {
        UseGrayscale = true,
        ShowPlaceholderContent = true,
        IncludeInteractions = false,
        AnnotateDecisions = true
    };
}

public class ScreenSpec
{
    public required string Name { get; init; }
    public required string Purpose { get; init; }
    public required List<string> KeyElements { get; init; }
    public string? Notes { get; init; }
}

public class FlowSpec
{
    public required string Name { get; init; }
    public required List<string> ScreenSequence { get; init; }
    public required string UserGoal { get; init; }
}

High-Fidelity Interactive

When: Usability testing, stakeholder demos, developer handoff

public class HiFiPrototypeSpec
{
    public required string ProjectName { get; init; }
    public required string DesignSystemLink { get; init; }
    public required List<ScreenSpec> Screens { get; init; }
    public required List<InteractionSpec> Interactions { get; init; }
    public required List<StateSpec> States { get; init; }

    public HiFiGuidelines Style { get; init; } = new()
    {
        UseRealContent = true,
        IncludeAllStates = true,
        AddMicroInteractions = true,
        AnnotateForDev = true
    };
}

public class InteractionSpec
{
    public required string Trigger { get; init; }
    public required string Action { get; init; }
    public required string Target { get; init; }
    public AnimationType? Animation { get; init; }
    public TimeSpan? Delay { get; init; }
}

public enum AnimationType
{
    None,
    Fade,
    Slide,
    Scale,
    SmartAnimate,
    Custom
}

public class StateSpec
{
    public required string Component { get; init; }
    public required List<string> States { get; init; } // Default, Hover, Active, Disabled, etc.
}

Coded Prototype

When: Complex interactions, data-driven UI, technical validation

// Blazor prototype component
@page "/prototype/checkout"
@inject PrototypeDataService Data

<div class="prototype-container">
    <PrototypeBanner>
        This is a prototype - not the real product
    </PrototypeBanner>

    @switch (CurrentStep)
    {
        case CheckoutStep.Cart:
            <CartView
                Items="@cartItems"
                OnProceed="() => CurrentStep = CheckoutStep.Shipping" />
            break;

        case CheckoutStep.Shipping:
            <ShippingForm
                OnBack="() => CurrentStep = CheckoutStep.Cart"
                OnProceed="HandleShippingComplete" />
            break;

        case CheckoutStep.Payment:
            <PaymentForm
                OnBack="() => CurrentStep = CheckoutStep.Shipping"
                OnProceed="HandlePaymentComplete" />
            break;

        case CheckoutStep.Confirmation:
            <OrderConfirmation Order="@confirmedOrder" />
            break;
    }

    <PrototypeControls>
        <button @onclick="ResetPrototype">Reset</button>
        <button @onclick="() => ShowNotes = !ShowNotes">
            @(ShowNotes ? "Hide" : "Show") Notes
        </button>
    </PrototypeControls>

    @if (ShowNotes)
    {
        <PrototypeNotes Step="@CurrentStep" />
    }
</div>

@code {
    private CheckoutStep CurrentStep { get; set; } = CheckoutStep.Cart;
    private List<CartItem> cartItems = [];
    private Order? confirmedOrder;
    private bool ShowNotes { get; set; }

    protected override async Task OnInitializedAsync()
    {
        cartItems = await Data.GetSampleCartItems();
    }

    private void ResetPrototype()
    {
        CurrentStep = CheckoutStep.Cart;
        confirmedOrder = null;
    }
}

Wizard of Oz Prototyping

When: AI features, voice interfaces, complex personalization

public class WizardOfOzSetup
{
    public required string FeatureDescription { get; init; }
    public required List<ScenarioScript> Scenarios { get; init; }
    public required WizardControls Controls { get; init; }

    public class ScenarioScript
    {
        public required string UserAction { get; init; }
        public required List<WizardResponse> PossibleResponses { get; init; }
        public string? DefaultResponse { get; init; }
    }

    public class WizardResponse
    {
        public required string Label { get; init; }
        public required string Response { get; init; }
        public TimeSpan SimulatedDelay { get; init; } = TimeSpan.FromSeconds(1);
    }

    public class WizardControls
    {
        public required string TriggerHotkey { get; init; }
        public required string ResponsePanel { get; init; }
        public bool SimulateTyping { get; init; } = true;
        public bool AddRandomDelay { get; init; } = true;
    }
}

Tool Selection

Tool Comparison

| Tool | Fidelity | Collaboration | Dev Handoff | Best For | |------|----------|---------------|-------------|----------| | Figma | All | Excellent | Excellent | Team design | | Sketch | Medium-High | Good (w/plugins) | Good | Mac teams | | Adobe XD | Medium-High | Good | Good | Adobe ecosystem | | Framer | High | Good | Limited | Complex interactions | | InVision | Medium | Excellent | Good | Stakeholder feedback | | Balsamiq | Low | Basic | N/A | Quick wireframes | | Axure | All | Good | Detailed | Complex specs | | Principle | High | Limited | Limited | Micro-interactions | | ProtoPie | High | Good | Limited | Multi-device |

Selection Criteria

public class ToolEvaluation
{
    public required string ToolName { get; init; }
    public required Dictionary<string, int> Scores { get; init; } // 1-5

    public static readonly string[] Criteria =
    [
        "FidelityRange",      // Can handle low to high
        "Collaboration",      // Real-time co-editing
        "ComponentSystem",    // Reusable components
        "InteractionDepth",   // Animation, logic
        "DevHandoff",         // Specs, assets export
        "LearningCurve",      // Ease of adoption
        "TeamExisting",       // Team already knows it
        "Cost",               // Budget fit
        "Integration"         // Works with other tools
    ];

    public decimal OverallScore => Scores.Values.Average();
}

Fidelity Progression

Typical Progression

Week 1-2: Discovery
├── Paper sketches
├── Concept exploration
└── Stakeholder sketches

Week 3-4: Definition
├── Wireframes
├── Information architecture
└── Content strategy

Week 5-6: Design
├── Visual design
├── Component creation
└── Style guide

Week 7-8: Prototype
├── Interactive flows
├── Micro-interactions
└── Usability testing

Week 9+: Handoff
├── Final specs
├── Asset export
└── Developer collaboration

When to Skip Fidelity Levels

| Skip Lo-Fi When | Skip Mid-Fi When | Go Straight to Code When | |-----------------|------------------|--------------------------| | Clear requirements | Design system exists | Technical uncertainty | | Existing patterns | Flows are known | Performance critical | | Time pressure | Team is aligned | Highly data-driven | | Small changes | Visual validation needed | Developer preference |

Testing with Prototypes

Matching Fidelity to Test Goals

| Test Goal | Recommended Fidelity | |-----------|---------------------| | Concept validation | Low | | Navigation/IA | Low-Medium | | Task completion | Medium | | Aesthetic reactions | High | | Micro-interactions | High | | Accessibility | Medium-High | | Emotional response | High |

Prototype Testing Considerations

public class PrototypeTestPlan
{
    public required string PrototypeUrl { get; init; }
    public required PrototypeFidelity Fidelity { get; init; }
    public required List<TestTask> Tasks { get; init; }
    public required List<PrototypeLimitation> Limitations { get; init; }

    public string IntroductionScript => Fidelity switch
    {
        PrototypeFidelity.Low => """
            This is an early concept - it's rough on purpose.
            We're testing ideas, not visual design.
            Some things won't work yet - just tell me what you'd expect.
            """,

        PrototypeFidelity.Medium => """
            This is a work-in-progress design.
            It's clickable but not everything will work.
            Focus on whether this flow makes sense to you.
            """,

        PrototypeFidelity.High => """
            This is close to what the final product will look like.
            Try to use it as if it were real.
            Let me know if anything seems off or confusing.
            """,

        _ => throw new ArgumentOutOfRangeException()
    };
}

public record PrototypeLimitation(
    string What,
    string Workaround,
    string ExplainToUser
);

Briefing Participants

Always clarify:

What's working vs. not working
That you're testing the design, not them
Permission to think aloud
That rough appearance is intentional (if low-fi)

Design-to-Development Handoff

Handoff Checklist

## Prototype Handoff Checklist

### Design Specs
- [ ] All screens exported
- [ ] Component specs documented
- [ ] Spacing and sizing annotated
- [ ] Typography specs included
- [ ] Color values specified
- [ ] Breakpoints defined

### Interactions
- [ ] State changes documented
- [ ] Animations specified (timing, easing)
- [ ] Error states included
- [ ] Loading states defined
- [ ] Empty states designed

### Assets
- [ ] Icons exported (SVG)
- [ ] Images optimized
- [ ] Fonts specified/included
- [ ] Design tokens exported

### Documentation
- [ ] User flows documented
- [ ] Edge cases noted
- [ ] Accessibility requirements
- [ ] Copy/content finalized
- [ ] Component behavior specs

### Collaboration
- [ ] Figma/design file shared
- [ ] Questions channel established
- [ ] Review meetings scheduled
- [ ] Iteration process defined

Handoff Annotation Patterns

public class HandoffAnnotation
{
    public required AnnotationType Type { get; init; }
    public required string Description { get; init; }
    public Position? ScreenPosition { get; init; }
    public string? LinkedComponent { get; init; }
    public Dictionary<string, string>? Properties { get; init; }
}

public enum AnnotationType
{
    Spacing,
    Behavior,
    Animation,
    Condition,
    EdgeCase,
    Accessibility,
    ResponsiveBreakpoint,
    DeveloperNote
}

// Example annotations
var annotations = new List<HandoffAnnotation>
{
    new()
    {
        Type = AnnotationType.Behavior,
        Description = "Button disabled until all required fields valid",
        LinkedComponent = "SubmitButton"
    },
    new()
    {
        Type = AnnotationType.Animation,
        Description = "Slide in from right, 300ms ease-out",
        Properties = new()
        {
            ["duration"] = "300ms",
            ["easing"] = "ease-out",
            ["direction"] = "right"
        }
    },
    new()
    {
        Type = AnnotationType.EdgeCase,
        Description = "If list > 100 items, show 'Load More' button"
    }
};

Prototype Documentation

Prototype Brief Template

# Prototype Brief: [Feature Name]

## Objective
What are we trying to learn or validate?

## Scope
- **Flows included:** [List of user flows]
- **Flows excluded:** [What's not in prototype]
- **Fidelity level:** [Low/Medium/High]

## Target Users
Who will test this? [Persona or criteria]

## Key Scenarios

### Scenario 1: [Name]
**Setup:** [Starting conditions]
**Task:** [What user tries to accomplish]
**Success:** [How we know it worked]

### Scenario 2: [Name]
[Continue...]

## Prototype Links
- **Main prototype:** [URL]
- **Design file:** [URL]
- **Assets:** [URL]

## Known Limitations
| What | Why | Workaround |
|------|-----|------------|
| [Feature] | [Reason] | [How to handle] |

## Test Plan
- **Method:** [Moderated/unmoderated]
- **Participants:** [Number]
- **Duration:** [Per session]
- **Schedule:** [Dates]

## Questions to Answer
1. [Research question 1]
2. [Research question 2]
3. [Research question 3]

## Success Criteria
- [Metric/observation that indicates success]
- [Metric/observation that indicates success]

Checklist: Prototype Planning

Strategy

[ ] Goals defined (what to learn)
[ ] Fidelity level selected
[ ] Tool chosen
[ ] Scope determined
[ ] Timeline set

Creation

[ ] Key screens identified
[ ] Critical flows mapped
[ ] States defined (error, empty, loading)
[ ] Interactions specified
[ ] Edge cases considered

Testing Prep

[ ] Test tasks written
[ ] Limitations documented
[ ] Participant intro script ready
[ ] Recording setup tested
[ ] Success criteria defined

Handoff

[ ] Specs annotated
[ ] Assets exported
[ ] Design tokens ready
[ ] Developer walkthrough scheduled
[ ] Feedback process defined

Related Skills

usability-testing - Testing the prototype
design-system-planning - Reusable components
information-architecture - Navigation prototyping
accessibility-planning - Accessible prototypes

Agent Skills: Prototype Strategy

Install this agent skill to your local

Skill Files