RECORD · Lead With Zoe https://leadwithzoe.com/guides/weekly-records/ Updated September 24, 2026 01 / Turn the idea into a build brief ===================================== Help me design a personal record-player planner. The moment I want to improve is: [describe your current frustration]. I want it to feel [calm / playful / warm / focused]. The main loop is: choose a day, see my top three tasks and calendar, choose one task, start a focus block, pause or end it, then mark the task complete only when I choose to. Map each visual object to a useful action. Propose the smallest working first version, the data each screen needs, and a short list of things to leave out. Keep Notion as the task source and my calendar as the event source. Separate prototype data from real connections. Ask only for missing choices that would change the build. 02 / Build it with Sites ======================== Use Sites to build a private, responsive weekly record-player planner from this brief. Use fictional data only for the first version and label it clearly as sample data. Visual direction: warm walnut record player, cream paper, softly colored record sleeves, elegant readable typography and generous spacing. Seven sleeves represent Monday through Sunday. Selecting a day brings that sleeve forward and updates that day's tasks. Put the selected day's top three beside the player on desktop and below it on a phone. Include a collapsed B-side for other tasks and a small calendar agenda. Let me choose a task and a 15-, 25- or 50-minute work block. Show an upright, readable countdown on the record. Spin the vinyl only while the timer runs. Add start, pause, resume and end controls. Completing the timer must not complete the task. A separate checkbox controls completion. Use stable task IDs. Preserve the selected task and timer across a reload. Use the real end timestamp for a running timer, and saved remaining time while paused. Do not rely on counting animation frames. Support keyboard controls and reduced motion. First build and test the sample-data version. Show the preview and a short account of what works. Do not claim that Notion or my calendar is connected yet. Keep all real-data access private. 03 / Refine the look without breaking the app ============================================= Keep the existing working controls and data model. Refine only the visual design: - Make the selected sleeve feel like a real object being pulled from a shelf. - Make the record, sleeve and task list the main visual hierarchy. - Keep the countdown upright and readable as the vinyl spins underneath it. - Give the selected day a clear state beyond color alone. - On mobile, keep task names and controls comfortable to read and tap, with no horizontal scrolling. - Use the attached reference for palette and composition, not for copying private content. Show before/after previews at desktop and phone widths. Check text clipping, contrast, focus states and all existing controls after the change. 04 / Connect the sources and map the data ========================================= Inspect the Notion and calendar connections available in this ChatGPT task. My task source is [Notion page/database URL]. My calendar is [calendar name]. My time zone is [IANA time zone, for example America/Los_Angeles]. Read one real task and one event for [date]. Return their source links and the fields you can actually read. Map my existing task status, planned date, priority and estimate fields to the planner; do not create a duplicate task database. Preserve task/block IDs and calendar event IDs. Explain which operations work here: reading, refreshing, checking off a task, and creating or updating an event. Distinguish ChatGPT's connection from what the deployed Sites app can access. Start with an explicit private snapshot, including source IDs and last-updated time. Never label sample or stale data as live. If a connection is unavailable, give me the exact export or pasted fields needed and label that route manual. Do not change source records during this mapping step. 05 / Make the integration real ============================== Upgrade this private Sites app from a snapshot to a real connection only if the deployed runtime supports it. Inspect the available integration/authentication options first and explain the supported path. Do not invent endpoints or assume ChatGPT's connected apps are automatically available inside the site. Keep Notion authoritative for tasks and the calendar authoritative for events. Use server-side credentials and authenticated access; no secrets or private data in public assets. Request only the sources and permissions this app needs. Implement read and refresh first. Then implement completion of an existing Notion task by stable source ID. Read it back before showing saved. If the source changed since the app last read it, surface the conflict rather than overwriting it silently. Prevent duplicate writes on repeated clicks or retries. For calendar writes, show the proposed title, start, end, time zone and calendar for review. Check existing events before creating a focus block. Keep an event ID for later updates. A timer running in the app must not create a calendar event by itself. Test one clearly labeled test task end to end and one calendar read. Report what was verified, what still uses sample data, and any setup I must complete. If the runtime cannot support the connection, keep the snapshot workflow explicit instead of pretending it is live. 06 / Build the Claude Artifact ============================== Create an interactive Artifact for my weekly record-player planner. Start with fictional sample tasks and calendar events only. Use seven beautiful sleeves for the days of the week, a warm wood turntable, a visible vinyl record, a top-three task list, a B-side for other tasks and a small daily calendar. Selecting a day pulls its sleeve forward and updates the tasks. Let me select one task, choose 15/25/50 minutes, start, pause, resume and end a focus block. Show a readable upright countdown on the spinning record. Keep task completion as a separate checkbox. Use a real timer deadline, not animation-frame counting. Support reduced motion, keyboard access and a readable phone layout. Check what persistence this Artifact actually supports; preserve timer/task state if supported and explain the fallback if it is not. Make the sample-data state explicit. Build the usable artifact and show me how to try every main action. Do not claim it is connected to my Notion or calendar yet. 07 / Connect the Claude version =============================== Inspect which of my Notion and calendar connectors are available to this conversation and to this Artifact. The task source is [Notion URL], the calendar is [name], and my time zone is [IANA time zone]. First read one task and one event and show the source links. Preserve the original IDs. If this Artifact supports these connected tools, wire a refresh action and last-updated state. Explain any permission I need to grant through Claude's normal controls. Keep Notion as the task source and the calendar as the event source. Only enable source-task completion after verifying that the tool supports updating that exact task. Read the changed source back before showing success. Never equate a local checkbox with a successful Notion write. Keep calendar edits separately reviewed, with duplicate-event prevention. If connected tools are unavailable in the Artifact, make a private snapshot version and show exactly how I refresh it from the conversation. Clearly label that mode. Do not fabricate a live connection or use my private data in a public demo. 08 / Add purposeful motion ========================== Add restrained motion to the existing working planner. Preserve its controls, data and layout. When I select a day, bring that sleeve forward in 200–350 ms with a short ease-out. Update its task list at the same moment. Rotate the vinyl around its true center only while a work block is running. Keep the countdown label upright and readable. Pause must stop both the record and elapsed-time progression for that block; resume must continue correctly. Ending the timer must not mark the task complete. Derive the countdown from the saved deadline and current time. Verify it after switching tabs and reloading. Use transform/opacity for visual motion where possible. Honor prefers-reduced-motion with a static record and clear selection states. Keep keyboard focus visible. Avoid decorative perpetual movement, flashes and automatic audio. 09 / Plan from the actual sources ================================= Read my task source [Notion URL] and calendar [name] for [date] in [time zone]. Show the source links and when they were read. Suggest up to three priorities that fit around the real appointments, using my estimates and deadlines. Explain any missing information or scheduling conflict. Leave [amount] of buffer time. Separate fixed events from proposed focus blocks. After I choose the priorities, update the existing tasks' planned day and priority if the connection supports it, then read them back. Do not create duplicate tasks. Show proposed calendar changes before writing them. Refresh the planner through its verified integration or snapshot workflow and accurately label which one was used. 10 / Test and finish the build ============================== Test this planner in a desktop layout and a narrow phone layout. Use sample data or a clearly labeled test task. Verify: changing days changes the correct task list; selecting a task changes the active block; start/pause/resume/end work; the countdown stays correct after switching tabs and reloading; timer completion does not complete the task; reduced motion removes spinning; keyboard users can reach and operate every control; long task titles do not clip. For real connections, read one task and calendar event from the original source. Complete a test task, read it back in Notion, and refresh the planner. Confirm that a repeated click does not duplicate a task or event. Show failed, stale and disconnected states honestly. Check date boundaries, all-day events and the configured time zone. Verify private access on the deployed app. Confirm secrets are not included in browser code or public sample files. Return the usable URL or artifact, the successful checks, any remaining limitation, and the exact next step. Do not call sample data a live integration.