←Back/Engineering/Notion/GitHub Copilot
AdvancedEngineering

From Notion Task to GitHub Pull Request in 20 Minutes with a Coding Agent

With a background coding agent connected to Notion, turn a short task and screenshot into a GitHub pull request, live preview, test notes, and UI verification in about 20 minutes.

From Notion Task to GitHub Pull Request in 20 Minutes with a Coding Agent

Source episode · 27:00

How I AI: Ryan Nystrom's 3 Notion Workflows for Engineering Velocity

with Claire Vo

Ryan writes four sentences and adds a screenshot to a Notion task, mentions Codex, and receives a pull request with a preview and screenshots of the agent's UI checks.

Read the full episodeWatch on YouTubeListen on SpotifyListen on Apple

Before you start

About 20 minutes

What you need

  • A background coding agent connected to your Notion workspace and repository
  • A Notion task with acceptance criteria, edge cases, and a screenshot when UI placement matters
  • Repository access, CI, and a preview environment available to the agent

What you’ll make

A GitHub pull request linked from the Notion task with a live preview, test notes, and screenshots or other evidence of the implemented behavior.

Tools used

Step by step

The workflow

Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.

5 steps

Step01

Create a Clear Task in Notion

Write the task where the agent can read it. State the user-visible behavior, placement, acceptance criteria, and edge cases. Ryan's example was only four sentences plus a screenshot, but it named the direct-link behavior, a hover bug, and what should happen when the target is deleted.

Example prompt
Feature: Copy link to tab

Add a "Copy link to tab" action at the location shown in the attached screenshot. The copied URL must open the page with that tab active. Also fix the related hover-state bug visible in the same menu. If the tab or containing block has been deleted, the link should fail gracefully.

Acceptance criteria:
1. The action appears in the shown menu.
2. The copied deep link opens the correct tab.
3. The hover state matches the surrounding menu items.
4. Deleted targets show the product's normal missing-content behavior.
5. Add tests and include UI verification screenshots in the pull request.
Step02

Invoke the Coding Agent

Mention the configured coding agent in the Notion task comments. The mention only works after your organization has connected the agent to Notion, the repository, its developer tools, and a preview environment. Ryan's internal Boxy system used @Codex as the trigger.

Example prompt
@Codex implement this task, run the relevant tests, create a pull request, and attach a live preview plus screenshots of the UI verification.
Step03

Agent Analyzes and Develops

Let the background job read the task, comments, and screenshot, then work in its isolated environment. Follow its status in the Notion thread. If it asks for context, answer in the task so the requirement remains attached to the work.

Step04

Agent Submits a Detailed PR

Open both links when the agent responds. Read the pull request summary and test commands, inspect the changed files, and use the live preview to repeat the acceptance criteria. Compare the agent's screenshots with the current preview.

Step05

Review and Collaborate with the Agent

Ask questions or request changes directly in the pull request. Ryan used plain language when he did not understand a line of code. Require the explanation, fix, or cleanup to land in a new commit so the final diff and conversation stay together.

Example prompt
I do not understand what this code is doing or why this approach is needed. Explain the behavior in plain language, compare it with the existing pattern in this repository, and simplify the implementation if the extra complexity is unnecessary. Then rerun the affected tests.

What good looks like

  • The pull request addresses every acceptance criterion in the task.
  • CI completes or the agent explains any remaining failure.
  • The preview demonstrates the requested UI behavior and edge case.
  • The agent responds to follow-up questions or requested changes in the pull request.

Build your next product with ChatPRD

Turn an idea into a PRD, user stories, and a plan.

Try ChatPRD free

After the steps

Runbook notes

How to recover when the loop fails and where human judgment helps.

Recover

If it goes sideways

The agent cannot locate the relevant code or UI
Add the page, component, or file name plus a screenshot that shows the placement. Link a similar implementation in the repository if one exists.
The pull request has a failing CI check
Ask the agent to inspect the exact failing log, reproduce the command, and push the smallest fix. Keep the task open until the updated commit reports the new result.
The preview does not match the task screenshot or acceptance criteria
Comment with the expected and actual behavior, annotate the mismatch, and ask the agent to update both the implementation and its UI verification screenshots.
The main path works but the stated edge case does not
Turn the edge case into an explicit acceptance criterion and test. Ask the agent to include the new test result in the pull request description.

Keep building

Related workflows

Automate UGC Video Editing From Raw Clips with ChatGPT
advancedContentChatGPT

Automate UGC Video Editing From Raw Clips with ChatGPT

Use ChatGPT's multi-modal capabilities to automatically edit user-generated content (UGC) style videos. The AI can transcribe clips, select the best takes, assemble a narrative, and redact sensitive on-screen information.

Open
Build and Deploy a Live Website with a Single ChatGPT Prompt
intermediateMarketingChatGPT

Build and Deploy a Live Website with a Single ChatGPT Prompt

use ChatGPT Sites to generate, build, and deploy a fully functional, data-backed website on a `chatgpt.site` domain using a single detailed prompt.

Open
Use ChatGPT Voice as a Personal Assistant for Logistics and Travel
advancedPersonalChatGPT

Use ChatGPT Voice as a Personal Assistant for Logistics and Travel

Use ChatGPT Voice with screen-aware context to delegate and parallel-process complex logistical tasks like booking travel and filing expense reports, all through a single conversation.

Open

Start shipping
better products.

Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.

Start building freeRequest a demo
Free to start
No credit card
SOC 2 certified
Enterprise ready