| name | Design Studio Production Audit |
| description | Comprehensive audit of the SKAPARA design studio — canvas editor, AI generation pipeline, composition rendering, mockup generation, and design-to-product flow. Use when asked to audit the design studio, design editor, canvas, AI generation, or product creation pipeline.
|
Design Studio Production Audit
Systematic audit of the Fabric.js-based design studio: canvas editor, AI multi-provider generation, composition rendering, mockup generation, persistence, and the full design-to-product pipeline.
Prerequisites
Before starting, read these files for architectural context:
CLAUDE.md — component standards, semantic tokens, route groups, Printful/Supabase connection referencefrontend/docs/design-studio-audit/DESIGN_STUDIO_AUDIT_E2E.md — prior E2E audit (Phases 1-3 status, known bugs)frontend/docs/design-studio-research/11-gap-analysis.md — gap analysis across prior research reports
File Map
Keep this reference open throughout the audit. All paths relative to frontend/src/.
Canvas Editor
| File | Role |
|---|
components/design-studio/DesignStudioPage.tsx | Top-level orchestrator — mounts canvas, panels, header |
components/design-studio/CanvasWorkspace.tsx | Fabric.js canvas init, object manipulation, export, clipboard |
components/design-studio/EditorHeader.tsx | Save, preview, undo/redo, product info bar |
components/design-studio/CanvasToolbar.tsx | Tool selection (text, image, shapes, draw) |
components/design-studio/CanvasProperties.tsx | Object properties panel (fill, stroke, opacity, shadow, font) |
components/design-studio/LayersPanel.tsx | Layer list, z-order, visibility, lock |
components/design-studio/PanelSwitcher.tsx | Multi-position panel switching (front, back, sleeves) |
components/design-studio/ClipartPanel.tsx | Clipart/asset browser |
components/design-studio/TemplatesPanel.tsx | Template gallery |
components/design-studio/PreviewMockupModal.tsx | Preview overlay with mockup rendering |
components/design-studio/EmbroideryConstraints.tsx | Embroidery-specific validation (colors, line width) |
Canvas Tools
| File | Role |
|---|
components/design-studio/tools/TextTool.tsx | Text object creation and editing |
components/design-studio/tools/ImageTool.tsx | Image upload and placement |
components/design-studio/tools/ColorPicker.tsx | Color selection with brand palette |
components/design-studio/tools/FontPicker.tsx | Font browser and selection |
components/design-studio/tools/GradientEditor.tsx | Gradient fill configuration |
components/design-studio/tools/ShadowControl.tsx | Drop shadow configuration |
State Management
| File | Role |
|---|
hooks/useDesignEditor.ts | Zustand store — canvas state, panels, selected object, variant color |
hooks/useCanvasHistory.ts | Undo/redo stack management |
hooks/useCanvasExport.ts | PNG/production export utilities |
hooks/useDesignPersistence.ts | Auto-save and load from Supabase |
AI Generation Pipeline
| File | Role |
|---|
lib/ai-design-orchestrator.ts | Intent classification, provider selection, prompt routing |
lib/design-generation.ts | Generation execution, retry logic, result processing |
lib/design-presets.ts | Style presets (meme, branded, minimalist, etc.) |
lib/design-cost-guard.ts | Per-user generation limits, tier enforcement |
lib/providers/router.ts | Multi-provider routing (cost, quality, speed) |
lib/providers/fal-provider.ts | fal.ai provider (Flux, SDXL) |
lib/providers/openai-provider.ts | DALL-E 3 provider |
lib/providers/ideogram-provider.ts | Ideogram provider (text rendering) |
lib/providers/recraft-provider.ts | Recraft provider (vector, brand) |
lib/providers/prompt-engineer.ts | Prompt enhancement and safety filtering |
lib/providers/background-removal.ts | Background removal via rembg sidecar |
lib/providers/storage-upload.ts | Supabase Storage upload for generated images |
lib/providers/types.ts | Shared TypeScript types for provider system |
Composition & Mockup
| File | Role |
|---|
lib/composition-renderer.ts | Sharp-based server-side composition rendering |
lib/mockup-generator.ts | Product mockup overlay generation |
lib/canvas-helpers.ts | Canvas utility functions (print area, scaling, crop) |
lib/fabric-init.ts | Fabric.js initialization and configuration |
API Endpoints
| Endpoint | Route File |
|---|
GET/POST /api/designs | app/api/designs/route.ts |
POST /api/designs/ai-generate | app/api/designs/ai-generate/route.ts |
POST /api/designs/generate | app/api/designs/generate/route.ts |
POST /api/designs/compose | app/api/designs/compose/route.ts |
POST /api/designs/compose-v2 | app/api/designs/compose-v2/route.ts |
GET /api/designs/composition/[id] | app/api/designs/composition/[id]/route.ts |
GET /api/designs/history | app/api/designs/history/route.ts |
POST /api/designs/estimate | app/api/designs/estimate/route.ts |
POST /api/designs/mockup | app/api/designs/mockup/route.ts |
POST /api/designs/remove-bg | app/api/designs/remove-bg/route.ts |
GET /api/designs/logs | app/api/designs/logs/route.ts |
POST /api/designs/[id]/create-product | app/api/designs/[id]/create-product/route.ts |
Database Tables
| Table | Purpose |
|---|
designs | Saved design documents (canvas JSON, metadata) |
design_sessions | Active editing sessions (user, product, timestamps) |
ai_generations | AI generation log (provider, prompt, cost, result) |
design_compositions | Rendered compositions (production URLs, panel data) |
user_design_assets | Uploaded user images/assets |
design_templates_clipart | Template and clipart library entries |
Pages
| Page | File |
|---|
| Design editor | app/[locale]/(editor)/design/[productId]/page.tsx |
| Editor client wrapper | app/[locale]/(editor)/design/[productId]/DesignEditorClient.tsx |
| Designs gallery | app/[locale]/(app)/designs/page.tsx |
Workflow
Execute each phase sequentially. Record every finding with severity, file path, and line number.
Phase 1: Canvas Editor UX (15 checks)
1.1 Canvas Initialization
- Read
lib/fabric-init.ts and CanvasWorkspace.tsx
- Check: Is Fabric.js initialized with correct defaults (selection, rendering, retina)?
- Check: Is
canvas.dispose() called on unmount to prevent memory leaks?
- Check: Does canvas resize correctly on window resize / container resize?
- Benchmark: Canvas should initialize in <500ms on desktop
1.2 Object Manipulation
- Read
CanvasWorkspace.tsx — object add/select/transform methods
- Check: Can user add text, images, shapes, and SVGs?
- Check: Do alignment guidelines work (snap to center, edges)?
- Check: Are transform controls (scale, rotate, skew) functional and constrained?
- Check: Is multi-select supported (Shift+click or drag selection)?
1.3 Undo/Redo
- Read
hooks/useCanvasHistory.ts
- Check: Does Ctrl+Z undo the last operation?
- Check: Does Ctrl+Shift+Z (or Ctrl+Y) redo?
- Check: Is history cleared correctly on panel switch?
- Check: Are undo/redo stacks bounded (memory limit)?
- Benchmark: Industry standard is 50+ undo steps
1.4 Keyboard Shortcuts
- Search for
keydown or addEventListener.*key in CanvasWorkspace.tsx and DesignStudioPage.tsx
- Check: Ctrl+S (save), Ctrl+D (duplicate), Delete (remove), Escape (deselect), Arrows (nudge 1px), Shift+Arrows (nudge 10px)
- Check: Are shortcuts documented in UI (tooltip or help modal)?
- Check: Do shortcuts conflict with browser defaults?
1.5 Zoom & Pan
- Search for
zoomToPoint, viewportTransform, zoomLevel in canvas files
- Check: Mouse wheel zoom works (clamp 0.25x-5x)
- Check: Space+drag panning works
- Check: Zoom controls UI shows percentage and has fit-to-canvas
- Check: Viewport is reset before export (critical for production PNG)
- Benchmark: Industry standard supports at least 10x-2000% zoom range
1.6 Color & Fill
- Read
tools/ColorPicker.tsx, tools/GradientEditor.tsx
- Check: Brand palette is available as preset swatches
- Check: Custom hex/RGB input works
- Check: Gradient editor supports linear and radial gradients
- Check: Color changes apply to selected object immediately
1.7 Typography
- Read
tools/TextTool.tsx, tools/FontPicker.tsx
- Check: At least 12 fonts available (verify count in
FontPicker)
- Check: Font size, weight, style (italic), decoration (underline/strikethrough) all work
- Check: Text alignment (left, center, right) works
- Check: Letter spacing and line height adjustable
- Check: Text editing on double-click canvas object
- Benchmark: Competitors (Canva, Printful) offer 50+ fonts
1.8 Image Handling
- Read
tools/ImageTool.tsx
- Check: Upload accepts PNG, JPG, SVG, WebP
- Check: Blob URLs are converted to data URLs for persistence (
blobUrlToDataUrl)
- Check: Image cropping or masking available?
- Check: Background removal integration works (calls
/api/designs/remove-bg)
- Check: Max file size validation exists
1.9 Layers Panel
- Read
LayersPanel.tsx
- Check: Layer list displays all canvas objects with names/thumbnails
- Check: Drag-to-reorder changes z-index
- Check: Visibility toggle (eye icon) hides/shows objects
- Check: Lock toggle prevents selection/editing
- Check: Layer names are editable
1.10 Multi-Position Design
- Read
PanelSwitcher.tsx and panel-related state in useDesignEditor.ts
- Check: Panels available per product type (front, back, sleeves, neck, wrist)
- Check: Switching panels preserves design state for each panel
- Check: Panel names map correctly to Printful placement names (
PANEL_TO_PRINTFUL)
- Check: Each panel has correct canvas dimensions per product type
- Check: Ghost templates load for each panel (not just front)
- Known Bug: BUG-06 —
blankImages not panel-specific. Verify current status.
1.11 Templates & Clipart
- Read
TemplatesPanel.tsx, ClipartPanel.tsx
- Check: Template gallery loads and templates can be applied to canvas
- Check: Clipart browser loads assets from
design_templates_clipart table
- Check: At least 10 templates exist (query
design_templates_clipart count)
- Benchmark: Competitors offer 100+ templates per category
1.12 Print Area Enforcement
- Search for
clipPath, clipRectRef, getCanvasPrintArea in canvas files
- Check: Visual clip path restricts objects to print area
- Check: Objects outside print area are visually clipped (not hard-deleted)
- Check: Ghost template outlines show safe zone
- Check: Print area dimensions match Printful specs per product type
- Known Bug: BUG-05 — fallback
getCanvasPrintArea ignores product type. Verify status.
1.13 Embroidery Constraints
- Read
EmbroideryConstraints.tsx
- Check: Max 3 thread colors enforced for embroidery products
- Check: No gradients allowed on embroidery products
- Check: Minimum line width enforced (1.5mm)
- Check: Minimum text size enforced (5mm)
- Check: Constraints activate only for embroidery product types
1.14 Preview & Mockup
- Read
PreviewMockupModal.tsx
- Check: Preview modal renders canvas at 2x resolution
- Check: Mockup overlay shows design on product photo
- Check: Apply-to-cart button works from preview modal
- Check: Multiple views available (front, back) if multi-position
1.15 DPI Validation
- Search for
dpi, resolution, PRODUCTION_DIMENSIONS across design studio files
- Check: Production export outputs at 300+ DPI
- Check: User is warned if uploaded image resolution is too low for print size
- Check:
PRODUCTION_DIMENSIONS match Printful printfile specs
- Benchmark: 300 DPI minimum for print, 150 DPI minimum warning threshold
Phase 2: AI Generation Pipeline (12 checks)
2.1 Intent Classification
- Read
lib/ai-design-orchestrator.ts
- Check: User prompt is classified into intent categories (meme, branded, text-only, photo, illustration, etc.)
- Check: Classification drives provider selection (not random/hardcoded)
- Check: Unknown/ambiguous intents have a sensible default path
2.2 Provider Routing
- Read
lib/providers/router.ts
- Check: Router selects provider based on intent, quality preference, and cost
- Check: Fallback chain exists (if primary provider fails, try secondary)
- Check: Provider health/availability is checked before routing
- Check: Routing decision is logged for debugging
2.3 Provider Implementations
- Read each provider file:
fal-provider.ts, openai-provider.ts, ideogram-provider.ts, recraft-provider.ts
- Check: Each provider implements a consistent interface (from
types.ts)
- Check: API keys are read from server-side env vars (never exposed to client)
- Check: Error handling catches provider-specific errors and returns normalized errors
- Check: Timeouts are configured (no infinite hangs)
- Check: Response format is normalized across providers
2.4 Prompt Engineering
- Read
lib/providers/prompt-engineer.ts
- Check: Prompts are enhanced with style-specific suffixes
- Check: Content safety filtering rejects harmful/prohibited content
- Check: Prompt length is validated (provider-specific max lengths)
- Check: Brand-specific keywords are injected when appropriate
2.5 Cost Guards
- Read
lib/design-cost-guard.ts
- Check: Per-user generation limits exist (daily/monthly)
- Check: Limits differ by user tier (free, pro, etc.)
- Check: Cost estimation endpoint (
/api/designs/estimate) returns accurate costs
- Check: Generation is blocked when limit is exceeded (not just warned)
- Check: Admin/staff bypass exists for testing
2.6 Generation API Security
- Read
app/api/designs/ai-generate/route.ts and app/api/designs/generate/route.ts
- Check: Auth required (user must be logged in)
- Check: Rate limiting exists (per-user, per-IP)
- Check: Input validation (prompt length, parameters)
- Check: Response does not leak internal error details
- Check: Cost is deducted from user's balance/quota atomically
2.7 Background Removal
- Read
lib/providers/background-removal.ts and app/api/designs/remove-bg/route.ts
- Check: Routes to self-hosted rembg sidecar (port 7000/8080)
- Check: Fallback if rembg is unavailable
- Check: Input validation (file type, size)
- Check: Result quality — verify PNG with alpha channel is returned
2.8 Style Presets
- Read
lib/design-presets.ts
- Check: Preset list covers key styles (meme, minimalist, branded, vintage, neon, etc.)
- Check: Each preset defines provider preference, prompt template, and post-processing
- Check: Presets are selectable in the UI
- Benchmark: At least 8-10 presets for good coverage
2.9 Generation Latency
- Search for timeout values,
AbortController, signal in generation files
- Check: Timeouts are set per provider (fal ~10s, DALL-E ~30s)
- Check: User sees loading indicator during generation
- Check: User can cancel in-progress generation
- Benchmark: Quick generation <10s, quality generation <30s
2.10 Generation Logging
- Read
app/api/designs/logs/route.ts and search for ai_generations table inserts
- Check: Every generation attempt is logged (provider, prompt, cost, duration, success/failure)
- Check: Failed generations record the error reason
- Check: Logs are queryable for cost analytics and debugging
2.11 Content Safety
- Search for
safety, nsfw, moderation, filter, block in provider and prompt files
- Check: Prompt is checked against blocked terms/patterns before sending to provider
- Check: Generated images are checked for NSFW content (provider-side or post-generation)
- Check: Rejected content returns a user-friendly message (not a raw error)
- Benchmark: All major POD platforms (Printful, Printify, Redbubble) enforce content policies
2.12 Storage Upload
- Read
lib/providers/storage-upload.ts
- Check: Generated images are uploaded to Supabase Storage
designs/ bucket
- Check: File naming includes user ID and timestamp (prevents collisions)
- Check: Public URL is returned for use in canvas
- Check: Old/unused generations are cleaned up (or storage cost is bounded)
Phase 3: Composition & Production Pipeline (10 checks)
3.1 Production Export
- Search for
exportProductionPNG, PRODUCTION_DIMENSIONS in hooks and canvas files
- Check: Export scales canvas to Printful-required dimensions per product type
- Check: Viewport is reset before export (zoom/pan must not affect output)
- Check: Guide objects, ghost templates, and background are excluded from export
- Check: Output is PNG with transparency (no white background unless DTG on white)
3.2 Composition Rendering (compose-v2)
- Read
app/api/designs/compose-v2/route.ts and lib/composition-renderer.ts
- Check: Server-side composition uses Sharp (not client-side canvas)
- Check: All panels are composed (front + back + sleeves if designed)
- Check: Production URLs are saved to
design_compositions table
- Check: Composition images are uploaded to Supabase Storage
- Check: Error handling for Sharp failures (memory, format)
3.3 Mockup Generation
- Read
app/api/designs/mockup/route.ts and lib/mockup-generator.ts
- Check: Mockup overlays design onto product photo at correct position/scale
- Check: Perspective transform applied (design wraps on curved surfaces)
- Check: Multiple mockup views available (if templates exist)
- Check: Mockup templates exist for major product types
- Search
public/mockup-templates/ — count available templates
- Known Gap: Prior audit found only 7 templates — hats, sneakers, tumblers, desk mats, kids, tanks missing
3.4 Design-to-Product Pipeline
- Read
app/api/designs/[id]/create-product/route.ts
- Check: Creates product on Printful with correct blueprint, provider, and variants
- Check: Print areas map correctly from canvas panels to Printful placements
- Check: Pricing is set per PRICING_RULES (margin >= 35%)
- Check: GPSR compliance data is attached before publish
- Check: Product is synced to Supabase after Printful creation
3.5 Cart Integration
- Search for
composition_id, design_id in cart-related files
- Check:
cart_items table has composition_id column
- Check: Adding designed product to cart stores composition reference
- Check: Cart displays design preview (not generic product image)
3.6 Order Print Files
- Search for
files, productionUrlsMap, production_url in checkout/order files
- Check: Stripe webhook reads
production_url from composition
- Check: Printful order includes
files[] param with production URLs
- Check: No temp products are created (direct
files[] flow)
- Check: Print file URLs are accessible to Printful (public or signed URLs)
3.7 Design Persistence
- Read
hooks/useDesignPersistence.ts
- Check: Auto-save triggers on canvas change (debounced, not on every stroke)
- Check: Canvas JSON is serialized correctly (guides/ghost excluded via
filterGuideObjectsFromJSON)
- Check: Loading a saved design restores all objects, positions, and styles
- Check: Designs list page (
/designs) shows user's saved designs
- Check: Designs are user-scoped (RLS or explicit
user_id filter)
3.8 Session Management
- Search for
design_sessions in API and hook files
- Check: Session is created on editor open
- Check: Session tracks active editing time
- Check: Concurrent editing is handled (lock or last-write-wins)
3.9 Asset Management
- Search for
user_design_assets in API and component files
- Check: Uploaded images are stored in Supabase Storage
- Check: Asset library shows user's uploaded images
- Check: Assets are user-scoped (no cross-user access)
- Check: File size and type validation on upload
3.10 History Endpoint
- Read
app/api/designs/history/route.ts
- Check: Returns user's design history (saved designs + generations)
- Check: Auth required
- Check: Pagination implemented
- Check: Includes metadata (timestamps, thumbnails, product type)
Phase 4: API Security & Validation (8 checks)
4.1 Authentication on All Endpoints
- Read every route file under
app/api/designs/
- Check: Every endpoint validates user auth (extracts user from session/token)
- Check: Unauthenticated requests return 401
- Check: User ID is extracted server-side (never trusted from request body)
- Severity: CRITICAL if any mutating endpoint lacks auth
4.2 Input Validation
- For each POST endpoint, check request body parsing:
- Check: Prompt text is sanitized (no script injection)
- Check: Image URLs are validated (no SSRF via internal URLs)
- Check: Numeric parameters are bounded (width, height, count)
- Check: File uploads validate type and size
4.3 Rate Limiting
- Search for
rateLimit, throttle, X-RateLimit in design API files
- Check: AI generation endpoints have rate limits
- Check: Upload endpoints have rate limits
- Check: Rate limit headers are returned in responses
- Benchmark: Typical limits: 10 generations/hour free tier, 50/hour pro
4.4 Error Handling
- Search for
try.*catch, NextResponse.json.*500 in design API files
- Check: All endpoints wrap logic in try-catch
- Check: Internal errors return generic message (not stack traces)
- Check: Supabase/Printful errors are caught and normalized
- Check: Error responses use consistent format
{ error: string, code?: string }
4.5 CORS & Headers
- Search for
headers, Access-Control, Content-Security-Policy in design API files
- Check: API responses include appropriate security headers
- Check: CORS is not overly permissive (no wildcard
* in production)
- Check: File upload responses set correct
Content-Type
4.6 Supabase Client Usage
- Search for
supabase-admin, SUPABASE_SERVICE_KEY in design API files
- Check: Admin client is used only where RLS bypass is needed (cron, admin ops)
- Check: User-facing endpoints use server client with user auth
- Check: No admin client usage in client-side code
- Severity: CRITICAL if admin client is imported in any
"use client" file
4.7 External Service Security
- Check provider files for API key handling:
- Check: fal.ai, OpenAI, Ideogram, Recraft keys are in env vars (not hardcoded)
- Check: Keys are only accessed server-side (API routes, not
lib/ imported by client)
- Check: Provider responses are validated before processing (no blind trust)
4.8 Storage Security
- Check Supabase Storage bucket configuration:
- Check:
designs/ bucket has appropriate RLS policies
- Check: Users can only access their own uploads
- Check: Public URLs are only generated for shared/published designs
- Check: No directory traversal possible in upload paths
Phase 5: Database Schema & Integrity (6 checks)
5.1 Table Schema Completeness
- Query or read migrations for
designs, design_sessions, ai_generations, design_compositions, user_design_assets, design_templates_clipart
- Check: All tables have
created_at, updated_at timestamps
- Check: All user-scoped tables have
user_id with FK to auth.users
- Check: Primary keys are UUIDs (consistent with rest of schema)
5.2 RLS Policies
- Search for
CREATE POLICY on design tables in migrations
- Check: Every design table has RLS enabled
- Check: SELECT policies enforce
user_id = auth.uid()
- Check: INSERT policies set
user_id = auth.uid() (not user-provided)
- Check: UPDATE/DELETE policies enforce ownership
- Severity: CRITICAL if any table lacks RLS
5.3 Indexes
- Search for
CREATE INDEX on design tables
- Check:
designs has index on user_id
- Check:
ai_generations has index on user_id and created_at (for cost queries)
- Check:
design_compositions has index on design_id
- Check: Any table queried by
user_id has an index on it
5.4 Foreign Keys
- Check:
designs.user_id references auth.users
- Check:
design_compositions.design_id references designs.id
- Check:
ai_generations.user_id references auth.users
- Check: ON DELETE behavior is appropriate (CASCADE or SET NULL)
5.5 Data Integrity
- Check:
designs.canvas_data is JSONB (not text)
- Check:
ai_generations.cost is numeric/decimal (not text)
- Check:
design_compositions.production_url is text (valid URL format)
- Check: No orphaned compositions (compositions without valid design reference)
5.6 Storage Bucket Configuration
- Check:
designs bucket exists in Supabase Storage
- Check: Max file size limit is configured
- Check: Allowed MIME types are restricted (image/png, image/jpeg, image/svg+xml, image/webp)
Phase 6: Mobile UX (6 checks)
6.1 Responsive Layout
- Read
DesignStudioPage.tsx and check for responsive breakpoints
- Check: Editor uses mobile-first CSS (base styles for 375px, md: for tablet, lg: for desktop)
- Check: Panels collapse or switch to bottom sheets on mobile
- Check: Canvas scales proportionally on small screens
- Check: No horizontal scroll on mobile viewport
6.2 Touch Targets
- Search for
p-2, p-3, w-8, h-8, w-10, h-10 in toolbar and panel components
- Check: All interactive elements have minimum 44px touch targets (p-3 or h-10+)
- Check: Toolbar buttons are not cramped on mobile
- Check: Close/dismiss buttons are easy to tap
6.3 Touch Gestures
- Search for
touch, pinch, gesture, pointer in canvas files
- Check: Pinch-to-zoom supported on canvas
- Check: Two-finger pan supported
- Check: Long-press for context menu (alternative to right-click)
- Benchmark: Canva and Printful both support pinch-zoom on mobile editor
6.4 Panel Management
- Check: Only one panel visible at a time on mobile (not stacked)
- Check: Panel switching is intuitive (bottom tabs or swipe)
- Check: Canvas is not obscured by panels on small screens
- Check: Keyboard does not break layout when editing text
6.5 Performance on Mobile
- Search for
useMemo, useCallback, React.memo in design studio components
- Check: Heavy components are memoized
- Check: Canvas operations are debounced for touch input
- Check: No layout thrashing from frequent re-renders
- Benchmark: Canvas should maintain 30fps during object manipulation on mobile
6.6 Offline / Network Resilience
- Check: Auto-save handles network failures gracefully (retry, queue)
- Check: AI generation shows clear loading states on slow connections
- Check: Large image uploads show progress indicator
Phase 7: Performance & Bundle (5 checks)
7.1 Bundle Size
- Check if Fabric.js is dynamically imported (not in initial bundle)
- Check:
fabric import uses dynamic() or import() (not top-level import in page)
- Check: AI provider code is only loaded server-side (not bundled for client)
- Check: Design studio page uses code splitting from the route
7.2 Canvas Performance
- Search for
requestAnimationFrame, renderAll, renderOnAddRemove in canvas files
- Check:
renderOnAddRemove is set to false for batch operations
- Check: Canvas does not re-render on every state update (batched rendering)
- Check: Large canvases (4000x5000px) do not cause OOM
7.3 Image Optimization
- Check: Uploaded images are resized/compressed before storage (not raw 20MB files)
- Check: Thumbnails are generated for design gallery
- Check: Canvas preview images use appropriate resolution (not full production size)
7.4 Memory Management
- Check: Canvas is disposed on component unmount
- Check: Object URLs are revoked after use (
URL.revokeObjectURL)
- Check: Large data URLs are not held in React state unnecessarily
- Check: Generation results are garbage-collected after placement
7.5 API Response Times
- Check for caching, pagination, query optimization in design API routes
- Check: Design list endpoint is paginated
- Check: Composition fetch uses indexed queries
- Check: Heavy operations (compose, mockup) return quickly or use streaming/polling
Output Format
Generate AUDIT_DESIGN_STUDIO_[DATE].md at the workspace root with the following structure:
# Design Studio Audit — [DATE]
## Executive Summary
[2-3 paragraph overview: what works well, what is broken, what is missing. State overall production-readiness.]
## Scorecard
| Category | Checks | Pass | Warn | Fail | Critical | Score |
|---|---|---|---|---|---|---|
| Canvas Editor UX | 15 | X | X | X | X | X% |
| AI Generation Pipeline | 12 | X | X | X | X | X% |
| Composition & Production | 10 | X | X | X | X | X% |
| API Security | 8 | X | X | X | X | X% |
| Database Schema | 6 | X | X | X | X | X% |
| Mobile UX | 6 | X | X | X | X | X% |
| Performance & Bundle | 5 | X | X | X | X | X% |
| **TOTAL** | **62** | **X** | **X** | **X** | **X** | **X%** |
## Findings
| ID | Severity | Category | Finding | File:Line | Recommendation |
|---|---|---|---|---|---|
| DS-001 | CRITICAL | API Security | [description] | `src/app/api/designs/generate/route.ts:42` | [fix] |
| DS-002 | FAIL | Canvas UX | [description] | `src/components/design-studio/CanvasWorkspace.tsx:310` | [fix] |
| DS-003 | WARN | Mobile UX | [description] | `src/components/design-studio/CanvasToolbar.tsx:88` | [fix] |
| ... | ... | ... | ... | ... | ... |
## Critical Blockers (Must Fix Before Production)
1. [DS-001] — [description and fix]
2. ...
## High Priority (Fix Within Sprint)
1. [DS-0XX] — [description]
2. ...
## Warnings (Fix Before V2)
1. [DS-0XX] — [description]
2. ...
## Industry Benchmark Comparison
| Capability | SKAPARA | Canva | Printful | Printify | Status |
|---|---|---|---|---|---|
| Canvas zoom range | 25%-500% | 10%-3000% | 50%-400% | 50%-200% | PASS |
| Font count | X | 2000+ | 50+ | 40+ | [PASS/FAIL] |
| Template count | X | 100K+ | 50+ | 20+ | [PASS/FAIL] |
| Undo depth | X | Unlimited | 50 | 20 | [PASS/FAIL] |
| Mobile editor | [Y/N] | Yes | Yes | No | [PASS/FAIL] |
| AI generation | [Y/N] | Yes (Magic) | No | No | ADVANTAGE |
| Multi-position | [Y/N] | N/A | Yes | Yes | [PASS/FAIL] |
| Embroidery constraints | [Y/N] | N/A | Yes | No | [PASS/FAIL] |
| Background removal | [Y/N] | Yes | Yes | No | [PASS/FAIL] |
| DPI validation | [Y/N] | Yes | Yes | Yes | [PASS/FAIL] |
| Design-to-order (no temp product) | [Y/N] | N/A | No | No | ADVANTAGE |
## Appendix: Known Bugs (from prior audits)
| Bug ID | Status | Description | Impact |
|---|---|---|---|
| BUG-05 | Open (LOW) | `getCanvasPrintArea` fallback ignores product type | Low — only affects legacy products |
| BUG-06 | Open (MEDIUM) | `blankImages` not panel-specific | Moderate — back panel shows front image |
| ... | ... | ... | ... |
Severity Levels
- CRITICAL: Security vulnerability, data leakage, auth bypass, production data corruption. Blocks production launch.
- FAIL: Broken functionality, missing validation, incorrect output. Must fix before release.
- WARN: Sub-optimal pattern, missing best practice, UX gap. Should fix before V2.
- PASS: Meets standards and industry benchmarks.
Notes
- Always verify findings against actual code (read the file, cite the line number). Never report speculative issues.
- Cross-reference with prior audits in
frontend/docs/design-studio-audit/ to avoid duplicating known issues.
- If a prior bug has been fixed, note it as RESOLVED with the fixing commit/PR.
- For each CRITICAL or FAIL finding, include a concrete code-level recommendation (not just "fix this").
- The benchmark comparison table should use real numbers from the codebase (count fonts, templates, etc.), not estimates.
