Prompt Motion
@AiMotionSiteS
Prompt library

UI motion

Desktop app clone of CCleaner and CleanMyMac

Desktop app clone of CCleaner and CleanMyMac is a 35.3-second Claude Opus motion design reference by @0xCodez, built around code. GOAL: You are my senior desktop engineer and product designer. Copy this UI motion prompt, keep the creator's frame counts and palette, and adapt the subject for your own launch film.

@0xCodezView post

Prompt

GOAL: You are my senior desktop engineer and product designer. MOTION: Together we are shipping "Cleanly", a free, open-source disk cleaner for macOS and Windows that looks and feels like Apple built it. I attached screenshots of CleanMyMac and CCleaner: treat them as a quality bar only. Name, logo, icons, copy and code must be 100% original. Work in phases. At the end of every phase, show me what you made and wait for my "go" before the next one. ─────────────────────────────────── PHASE 1 — Design exploration (no app code yet) ─────────────────────────────────── - Make 3 clearly different directions as clickable HTML mockups of the home screen: 1. light glass, 2. dark neon, 3. minimal / editorial. - Each mockup has: - a sidebar; - a hero card with a giant "X GB ready to reclaim" number and one Clean button; - a disk "space map" of bubbles sized by folder size; - 4 small status cards: Cleanup, Speed, Protection, Apps. - Make them interactive: Clean counts the number down, the bubbles react. - Then iterate with me on fonts, icons and buttons until it feels premium: - display font for numbers, clean UI font, mono font for small labels; - a custom duotone icon set; - a calm glass "capsule" primary button. Deliverable: one approved concept page. ─────────────────────────────────── PHASE 2 — Architecture & contract ─────────────────────────────────── - Stack: Electron (latest) + React + TypeScript + Vite. esbuild bundles the main process (ESM) and the preload (CJS). - Write `shared/types.ts` first: every data type and the full typed API between the main process and the UI. The main process's handler map must be typed so that a missing method fails the build. - Security baseline: - sandbox: true, contextIsolation: true, nodeIntegration: false; - the preload exposes only the typed API; - IPC refuses calls from any frame that is not our own index.html; - only https links leave the app, and they open in the system browser; - strict CSP in production, fonts bundled offline. - A mock implementation of the whole API, so the UI runs in a normal browser with realistic fake data (npm run demo). Deliverable: the contract, an app shell with the sidebar and routing, the design system in CSS, and the browser demo running. ─────────────────────────────────── PHASE 3 — Build in parallel ─────────────────────────────────── Split the work across sub-agents. Each owns its own files, and no two touch the same file: A. File scanner + delete/trash + disk map + large files B. Duplicates, startup apps, installed apps, protection status C. Settings (keys encrypted with Electron safeStorage), AI assistant, tips, feedback D. Home screen E. File screens (Cleanup, Space Map, Large Files, Duplicates) F. System screens (Speed, Apps, Protection, Assistant, Settings) G. Tip + Feedback screens and the mock API H. App icon, installers, CI What each part must do: - Scanner: - async walker using lstat, ~16 concurrent fs operations, never fo
Author original
You are my senior desktop engineer and product designer. Together we are shipping "Cleanly", a free, open-source disk cleaner for macOS and Windows that looks and feels like Apple built it. I attached screenshots of CleanMyMac and CCleaner: treat them as a quality bar only. Name, logo, icons, copy and code must be 100% original. Work in phases. At the end of every phase, show me what you made and wait for my "go" before the next one. ─────────────────────────────────── PHASE 1 — Design exploration (no app code yet) ─────────────────────────────────── - Make 3 clearly different directions as clickable HTML mockups of the home screen: 1. light glass, 2. dark neon, 3. minimal / editorial. - Each mockup has: - a sidebar; - a hero card with a giant "X GB ready to reclaim" number and one Clean button; - a disk "space map" of bubbles sized by folder size; - 4 small status cards: Cleanup, Speed, Protection, Apps. - Make them interactive: Clean counts the number down, the bubbles react. - Then iterate with me on fonts, icons and buttons until it feels premium: - display font for numbers, clean UI font, mono font for small labels; - a custom duotone icon set; - a calm glass "capsule" primary button. Deliverable: one approved concept page. ─────────────────────────────────── PHASE 2 — Architecture & contract ─────────────────────────────────── - Stack: Electron (latest) + React + TypeScript + Vite. esbuild bundles the main process (ESM) and the preload (CJS). - Write `shared/types.ts` first: every data type and the full typed API between the main process and the UI. The main process's handler map must be typed so that a missing method fails the build. - Security baseline: - sandbox: true, contextIsolation: true, nodeIntegration: false; - the preload exposes only the typed API; - IPC refuses calls from any frame that is not our own index.html; - only https links leave the app, and they open in the system browser; - strict CSP in production, fonts bundled offline. - A mock implementation of the whole API, so the UI runs in a normal browser with realistic fake data (npm run demo). Deliverable: the contract, an app shell with the sidebar and routing, the design system in CSS, and the browser demo running. ─────────────────────────────────── PHASE 3 — Build in parallel ─────────────────────────────────── Split the work across sub-agents. Each owns its own files, and no two touch the same file: A. File scanner + delete/trash + disk map + large files B. Duplicates, startup apps, installed apps, protection status C. Settings (keys encrypted with Electron safeStorage), AI assistant, tips, feedback D. Home screen E. File screens (Cleanup, Space Map, Large Files, Duplicates) F. System screens (Speed, Apps, Protection, Assistant, Settings) G. Tip + Feedback screens and the mock API H. App icon, installers, CI What each part must do: - Scanner: - async walker using lstat, ~16 concurrent fs operations, never fo

Questions

What is this ui motion prompt for?

It is a Claude Opus motion design brief for “Desktop app clone of CCleaner and CleanMyMac”. Paste it into Claude and keep the timings already written in the prompt.

Where is the original film?

The creator is @0xCodez. Use View post to open the X video this prompt belongs to.

More ui motion prompts