ClawHub

Prototype Factory

Dev Tools

High-fidelity interactive prototype production (Flutter, SwiftUI, React) with motion, stock assets, and pitch-ready handoff. Use when asked to design/build "modern" or "clean" demos, MVPs, or showcase apps—especially when the request includes UI polish, animations, or multimedia embeds.

Install

openclaw skills install prototype-factory

Prototype Factory

Overview

Spin up polished, demo-ready product experiences fast. This skill covers everything from intake → UX blueprint → design system → code scaffolding → motion/media → QA → handoff. Default to Flutter unless user mandates another stack.

References

Workflow Snapshot

  1. Intake & guardrails – confirm problem, platform(s), success criteria, deadlines.
  2. Experience blueprint – map primary flows + data needed.
  3. Visual language & assets – lock palette, fonts, iconography, stock media.
  4. Implementation – scaffold project, wire flows, add motion/media, hook data stubs.
  5. Polish & validation – responsiveness, accessibility, performance, bug hunt.
  6. Demo & handoff – README, scripts, capture video, log next steps.

1. Intake & Guardrails

  • Ask for: core value prop, target user, must-have screens, any banned colors/logos.
  • Clarify demo target (desktop, tablet, mobile) + where it will run (emulator, Mac app, web share).
  • Capture time budget + API availability. If no real backend, decide on local JSON or mock service.
  • Write a 3-sentence brief before touching code; keep it in /prototype-notes.md inside the project root.

2. Experience Blueprint

  • List primary flows (e.g., onboarding → dashboard → action → success). Sketch as bullet storyboard.
  • Identify data each view needs; stub sample JSON in /lib/data/sample.json (Flutter) or /src/data (React).
  • Decide navigation model (tab bar, drawer, top nav). Note transitions (slide, fade, hero) per hop.

3. Visual Language & Assets

  • If no brand kit, load design-language.md and apply defaults.
  • Source stock imagery/video (Unsplash, Pexels). Save under assets/media/ and note licenses.
  • Export logos/icons as SVG. Keep them optimized (svgo) and organized (assets/icons/).
  • Define motion tokens: duration 200–350 ms, use Curves.easeOutCubic / Cubic equivalents.

4. Implementation

Flutter (default)

flutter create <project>
cd <project>
flutter pub add google_fonts cached_network_image go_router lottie
  • Structure: lib/ui/ (screens), lib/widgets/, lib/theme/, lib/data/.
  • Implement a ThemeData with color scheme + typography (Space Grotesk / Inter).
  • Use CustomScrollView + Slivers for immersive hero layouts.
  • Embed video via video_player or chewie. Host MP4 on CDN/HTTPS.
  • Keep components modular—create NeonCard, GlassButton, etc. for reuse.

React / Web (when requested)

npm create vite@latest prototype -- --template react-ts
cd prototype
npm install framer-motion tailwindcss @radix-ui/themes
  • Configure Tailwind with neon palette + font families.
  • Use Framer Motion for transitions, Lottie for animated icons.
  • Host media in public/media/ and lazy-load heavy assets.

SwiftUI (Apple-only demos)

  • Start with Xcode “App” template. Create DesignSystem.swift for colors/typography.
  • Use matchedGeometryEffect for hero transitions, AVPlayer for background video.

5. Polish & Validation

  • Add skeleton/loading states for every async area (even if data is local).
  • Test at multiple breakpoints / device simulators. Fix overflow + notch issues.
  • Run flutter analyze or npm run lint and npm run build to ensure prod builds succeed.
  • Record performance metrics: target 60 fps animations, <200 ms input latency.
  • Accessibility: adequate contrast, focus indicators, voiceover labels on major controls.

6. Demo & Handoff

  • Update /README.md with stack, commands, credentials, and feature tour.
  • Export screenshots (hero + flows) at 2x resolution, store in /docs/shots/.
  • Record 30–60 s Loom or GIF demo. Link inside README.
  • Document known limitations + next steps in /docs/roadmap.md.
  • Follow handoff-checklist.md before zipping the project.

Tips

  • Over-communicate animations/media requirement early—they influence architecture.
  • Keep placeholder data believable (names, prices, timestamps) to sell realism.
  • Build once, theme twice: keep color/gradients in variables so swapping palettes is fast.
  • Use feature flags or config maps to toggle experimental sections without deleting code.
More in Dev Tools