{"slug": "creative-brief-room-prompt-template-using-the-sites-plugin-in-codex", "title": "Creative Brief Room prompt template using the Sites Plugin in Codex", "summary": "OpenAI's Codex platform now supports a \"Creative Brief Room\" template that uses the Sites Plugin to build and deploy interactive internal creative briefing applications. The template generates a working app that integrates with Google Drive, Slack, and Notion to pull source documents, production status, and creative direction, replacing static docs with a collaborative workspace for tracking assets, decisions, and timelines. The system includes privacy-safe screenshot capabilities and deploys via the Sites Plugin with local preview fallback.", "body_md": "Prompt: Creative Brief Room\n\nUsing the Sites Plugin in Codex\n\n```\n[@sites](plugin://sites@openai-bundled) & [@build-web-apps](plugin://build-web-apps@openai-curated) Build an internal creative briefing app called **[APP_NAME]** for **[PRODUCT_OR_CAMPAIGN_NAME]** launching on **[LAUNCH_DATE_OR_WINDOW]**. This app is for **[PRIMARY_AUDIENCE]** who need to brief and collaborate with creative partners on assets such as videos, web pages, campaign containers, social content, and other launch materials.\n\nThe app should be more useful than a static doc or slide deck because it is interactive, easy to scan, source-linked, screenshot-friendly, and able to track decisions, notes, assets, asset-specific timelines, and visual inspiration in one working surface.\n\nUse [@google-drive](plugin://google-drive@openai-curated) to find source docs, campaign briefs, launch plans, landing-page drafts, video briefs, creative reviews, feedback docs, and slide decks related to **[PRODUCT_OR_CAMPAIGN_NAME]**. Use [@slack](plugin://slack@openai-curated) to find current production status, open decisions, creative direction, launch constraints, and review feedback in channels like **[#CHANNEL_NAME_1]**, **[#CHANNEL_NAME_2]**, **[#CHANNEL_NAME_3]**, **[#CHANNEL_NAME_4]**, and **[#CHANNEL_NAME_5]**. Use [@notion](plugin://notion@openai-curated) if there are relevant launch trackers, planning pages, creative notes, production pages, or source-of-truth briefs.\n\nUse `$imagegen` to generate one high-fidelity desktop concept before implementation. Use the **Browser** plugin to render the app locally, inspect desktop and mobile layouts, test the interactive flows, and apply browser review comments before finalizing. Use **Git/GitHub** if available to create a dedicated repo, commit the final app, and report the commit hash. Use [@sites](plugin://sites@openai-bundled) to deploy the verified app.\n\nDo not stop at a mockup, static screenshot, or design proposal. Build and deploy the working app.\n\nBase the app content on the discovered resources. Prefer approved PMM, comms, creative, web, video, and launch-facing sources over informal Slack discussion. Use Slack mainly to identify current status, unresolved questions, review feedback, asset needs, rollout caveats, and useful context. If Slack conflicts with approved source material, preserve the uncertainty and mark the relevant item as needing review.\n\nUse these source names as search targets. Replace these placeholders with the actual doc, deck, page, or thread names:\n- [PRIMARY_CAMPAIGN_BRIEF_NAME]\n- [MESSAGING_BRIEF_NAME]\n- [PRODUCT_OR_LAUNCH_BRIEF_NAME]\n- [LAUNCH_BLOG_OR_ANNOUNCEMENT_NAME]\n- [LANDING_PAGE_COPY_DOC_NAME]\n- [VIDEO_BRIEF_NAME]\n- [VIDEO_FEEDBACK_DOC_NAME]\n- [SOCIAL_PLAN_NAME]\n- [VISUAL_MOCKS_OR_DEMOS_NAME]\n- [CONTENT_RADAR_OR_TRACKER_NAME]\n- [XFN_LAUNCH_GUIDE_NAME]\n- [DOCS_UPDATE_OR_RELEASE_NOTES_NAME]\n\nCreate a new folder and git repo named **[REPO_NAME]**.\n\nUse the visible application-shell brand **[APP_NAME]**. Use the hero title **[SHORT_CAMPAIGN_NAME]**.\n\n## App Goal\n\nBuild a practical internal creative workspace, not a public marketing page. It should help **[PRIMARY_AUDIENCE]** understand the assignment quickly, track requested deliverables, resolve decisions, manage production timelines, and collect creative references in one place.\n\nThe final app should include:\n- A screenshot-friendly overview\n- Compact launch and ownership status pills\n- A Room settings editor for visible campaign metadata and fictionalized names\n- A full-width decisions and room-notes component\n- A global asset-request workflow\n- A separate editable production timeline for each asset\n- A chronological full-width inspiration wall\n- Source-grounded target-audience and key-message sections\n- Dedicated brief sections for each seeded asset\n- A lower provenance section with source links\n- Deployed persistence with a graceful local-preview fallback\n\n## Privacy Requirement\n\nThe app must be safe to screenshot and share without exposing real coworker names.\n\n- Replace all visible coworker names with tasteful fictional names.\n- Use fictional DRIs such as **[FICTIONAL_PMM_OWNERS]**, **[FICTIONAL_VIDEO_OWNERS]**, and **[FICTIONAL_WEB_OWNERS]**.\n- Do not surface email addresses, Slack handles, profile photos, or private names in the visible UI.\n- Source links may remain available in the lower provenance section.\n- Make every visible fictionalized name editable directly in the UI. A user should not need to modify code to change a PMM owner, asset DRI, milestone owner, or other visible collaborator label before taking a screenshot.\n- Treat placeholders as initial seeded values, not hard-coded presentation copy. Provide clear edit actions for visible seeded brief content.\n\n## Moodboard Direction\n\nBefore implementation, use `$imagegen` to create a high-fidelity desktop concept with this direction:\n\n> Create a premium internal creative-workspace UI that combines an editorial brief room with a practical moodboard. Use a restrained white canvas, subtle borders, sage green status accents, warm pale-yellow review states, serif display typography for the campaign title, and compact sans-serif operational UI. Include a persistent left navigation rail, a screenshot-friendly launch overview, asset cards, a decisions list, production timelines, and a full-width Inspiration Wall lower on the page. Avoid marketing-page hero treatments, decorative gradients, oversized rounded cards, and fabricated employee photography.\n\nUse the generated visual as a directional artifact. Build an actual usable app rather than copying decorative details blindly.\n\n## Layout And Navigation\n\nUse a persistent internal-tool layout.\n\nDesktop:\n- Persistent left navigation rail\n- Main content surface\n- No secondary top header\n- No global search bar\n\nMobile:\n- Collapse the rail into a **Jump to section** disclosure\n- Keep the primary actions usable inside the disclosure and section headers\n\nAdd a compact **Room settings** action at the bottom of the desktop rail and inside the mobile disclosure.\n\nThe desktop left-rail brand should say only:\n\n**[APP_NAME]**\n\nUse these navigation items in this order:\n- Overview\n- Timeline\n- Inspiration\n- Target audience\n- Key messages\n- [ASSET_1_SHORT_NAME]\n- [ASSET_2_SHORT_NAME]\n\nDo not include review questions as a standalone navigation item.\n\nThe page should flow in this order:\n- Overview hero\n- Key updates & decisions\n- Assets requested\n- Production timelines nested directly under Assets requested\n- Inspiration Wall\n- Target Audience\n- Key Messages\n- [ASSET_1_SHORT_NAME] brief\n- [ASSET_2_SHORT_NAME] brief\n- Sources\n\n## Overview Hero\n\nCreate a concise, screenshot-friendly opening area.\n\nThe hero title should say only:\n\n**[SHORT_CAMPAIGN_NAME]**\n\nInclude:\n- Launch date or window: **[LAUNCH_DATE_OR_WINDOW]**\n- Primary message: **[PRIMARY_MESSAGE]**\n- Compact status pills:\n  - **[OVERALL_STATUS]**\n  - **[LAUNCH_DATE_PILL]**\n  - A dynamic pill showing the number of requested assets\n  - **[FICTIONAL_PMM_OWNER_PILL]**\n\nDo not show risk-detail pills in the hero. Keep rollout uncertainty, legal review, or timing caveats in the decisions list or source notes instead.\n\n## Key Updates & Decisions\n\nCreate a full-width horizontal component directly below the hero and above Assets requested.\n\nUse a single-column list. Do not arrange decision items across multiple columns.\n\nSeed the example with source-grounded open items such as:\n- [OPEN_DECISION_1]\n- [OPEN_DECISION_2]\n- [OPEN_DECISION_3]\n- [OPEN_DECISION_4]\n- [OPEN_DECISION_5]\n\nEach item should show:\n- Checkbox\n- Decision or question\n- Due date\n\nBehavior:\n- When checked, dim and strike through the item text.\n- Add an **Add entry** action in the component header.\n- Clicking **Add entry** opens a modal with:\n  - Entry\n  - Due date\n- Newly added entries should appear immediately.\n\nBelow the decisions, show **Room notes** when notes exist.\n\n## Notes\n\nAdd a functional **New note** action at the bottom of the desktop rail. Include the same action inside the mobile navigation disclosure.\n\nClicking **New note** should open a modal with:\n- Note text area\n- Save note action\n\nNew notes should appear under **Room notes** in the Key updates & decisions component.\n\n## Room Settings And Brief Editing\n\nAdd a functional **Room settings** action so non-technical users can edit the visible seeded values directly in the UI without modifying code.\n\nClicking **Room settings** should open a modal or side panel with:\n- Application-shell brand\n- Campaign title\n- Launch date or window\n- Primary message\n- Overall status\n- PMM owner label\n- Screenshot-safe collaborator aliases\n\nSaving should immediately update the hero, status pills, and any visible owner labels that use those values.\n\nAdd restrained **Edit** actions to source-backed sections so placeholder content can be adapted directly in the app:\n- Target Audience cards\n- Key Messages\n- Asset brief content\n- Asset cards and their DRIs\n- Timeline milestone labels and owners\n\nUse clear, low-noise edit controls such as a small pencil icon or text action in each section header. Keep the default reading view clean and screenshot-friendly.\n\nDo not allow users to overwrite original provenance. Source links, source titles, and source excerpts should remain read-only.\n\n## Assets Requested\n\nCreate an **Assets requested** section below Key updates & decisions.\n\nInclude:\n- Section title: `Assets requested`\n- Supporting copy: `Current delivery state and directly responsible owners.`\n- A global **Add asset** action in the Assets requested heading\n- An **Edit asset** action on each asset card so users can change the asset name, description, status, icon, and DRI directly in the UI\n\nSeed the app with at least two asset cards.\n\n### [ASSET_1_NAME]\n\n- Description: **[ASSET_1_DESCRIPTION]**\n- Status: **[ASSET_1_STATUS]**\n- DRI: **[FICTIONAL_ASSET_1_DRI]**\n- Icon: **[ASSET_1_ICON]**\n\n### [ASSET_2_NAME]\n\n- Description: **[ASSET_2_DESCRIPTION]**\n- Status: **[ASSET_2_STATUS]**\n- DRI: **[FICTIONAL_ASSET_2_DRI]**\n- Icon: **[ASSET_2_ICON]**\n\nRender asset cards in an auto-fitting grid so additional assets remain usable.\n\nThe overview asset-count status pill must update dynamically when assets are added.\n\n## Add Asset\n\nClicking **Add asset** should open a modal with:\n- Asset name\n- DRI\n- Status\n- Status tone: Green or Yellow\n- Icon: Web page, Video, or Message\n- Description\n- Timeline rows\n\nUse a simple structured timeline-row format:\n\n`date | milestone | owner | state`\n\nUse one row per milestone. Supported states:\n- `done`\n- `current`\n- `next`\n- `launch`\n\nProvide five useful default milestone rows for a newly added asset.\n\nWhen an asset is added:\n- Add its card to Assets requested.\n- Update the dynamic asset-count pill.\n- Add its timeline under Production timelines.\n- Persist the asset.\n\n## Production Timelines\n\nNest **Production timelines** directly inside the Assets requested section, below the asset cards. Use a subtle internal divider so the timelines read as detail for requested assets rather than as a separate unrelated page band.\n\nKeep the Timeline navigation anchor working.\n\nEach asset timeline should show:\n- Asset title\n- Status pill\n- **Edit timeline** action\n- Five milestone points\n- Date\n- Milestone title\n- Owner or team\n- Visual state: done, current, next, or launch\n\nSeed the **[ASSET_1_NAME]** timeline with:\n- [ASSET_1_MILESTONE_1_DATE] | [ASSET_1_MILESTONE_1_NAME] | [ASSET_1_MILESTONE_1_OWNER] | done\n- [ASSET_1_MILESTONE_2_DATE] | [ASSET_1_MILESTONE_2_NAME] | [ASSET_1_MILESTONE_2_OWNER] | done\n- [ASSET_1_MILESTONE_3_DATE] | [ASSET_1_MILESTONE_3_NAME] | [ASSET_1_MILESTONE_3_OWNER] | current\n- [ASSET_1_MILESTONE_4_DATE] | [ASSET_1_MILESTONE_4_NAME] | [ASSET_1_MILESTONE_4_OWNER] | next\n- [ASSET_1_MILESTONE_5_DATE] | [ASSET_1_MILESTONE_5_NAME] | [ASSET_1_MILESTONE_5_OWNER] | launch\n\nSeed the **[ASSET_2_NAME]** timeline with:\n- [ASSET_2_MILESTONE_1_DATE] | [ASSET_2_MILESTONE_1_NAME] | [ASSET_2_MILESTONE_1_OWNER] | done\n- [ASSET_2_MILESTONE_2_DATE] | [ASSET_2_MILESTONE_2_NAME] | [ASSET_2_MILESTONE_2_OWNER] | done\n- [ASSET_2_MILESTONE_3_DATE] | [ASSET_2_MILESTONE_3_NAME] | [ASSET_2_MILESTONE_3_OWNER] | current\n- [ASSET_2_MILESTONE_4_DATE] | [ASSET_2_MILESTONE_4_NAME] | [ASSET_2_MILESTONE_4_OWNER] | next\n- [ASSET_2_MILESTONE_5_DATE] | [ASSET_2_MILESTONE_5_NAME] | [ASSET_2_MILESTONE_5_OWNER] | launch\n\n## Edit Timeline\n\nEach asset timeline should include an **Edit timeline** action.\n\nThe editor should use the same asset form as **Add asset**, populated with the selected asset's data. Saving should update both:\n- The overview asset card\n- The production timeline card\n\nMake milestone owners editable in this form. This includes any visible fictionalized collaborator names.\n\n## Inspiration Wall\n\nCreate a full-width **Inspiration Wall** after Assets requested and its nested timelines.\n\nThis should be a practical link viewer and moodboard, not a manually curated decorative gallery.\n\nThe section header should include the only **Add reference** action in the app.\n\nInclude filters:\n- All\n- [ASSET_1_SHORT_NAME]\n- [ASSET_2_SHORT_NAME]\n- Shared\n\nWhen a reference link is added:\n- Fetch Open Graph metadata where available.\n- Store page title, description, preview image, site or domain, URL, asset relevance, tags, and creator note.\n- If Open Graph metadata is unavailable, store the URL and show a patterned fallback tile.\n\nEach tile should show:\n- Preview image or patterned fallback\n- Tag\n- Domain\n- Page title\n- Creator note or description\n- Asset relevance\n- Link to open the source\n- Remove action for creator-added references\n\nSeed the board with references that demonstrate:\n- [REFERENCE_THEME_1]\n- [REFERENCE_THEME_2]\n- [REFERENCE_THEME_3]\n- [REFERENCE_THEME_4]\n- [REFERENCE_THEME_5]\n- [REFERENCE_THEME_6]\n\n## Target Audience\n\nCreate a **Target Audience** section with source-grounded audience cards.\n\nSeed cards for:\n- [TARGET_AUDIENCE_SEGMENT_1]\n- [TARGET_AUDIENCE_SEGMENT_2]\n- [TARGET_AUDIENCE_SEGMENT_3]\n\nEach card should include:\n- Audience name\n- What they need\n- Desired takeaway\n- Source link\n\nAdd an **Edit** action so users can update the visible audience name, need, and takeaway without editing code.\n\n## Key Messages\n\nCreate a **Key Messages** section.\n\nInclude:\n- Primary message: **[PRIMARY_MESSAGE]**\n- Supporting pillar: **[SUPPORTING_MESSAGE_1]**\n- Supporting pillar: **[SUPPORTING_MESSAGE_2]**\n- Supporting pillar: **[SUPPORTING_MESSAGE_3]**\n\nUse a restrained editorial layout with one primary message and three supporting pillars.\n\nAdd an **Edit** action so users can update the primary message and supporting pillars without editing code.\n\n## Asset Briefs\n\nCreate a dedicated brief section for every seeded asset. For two initial assets, use:\n\n### [ASSET_1_NAME]\n\nInclude:\n- Asset purpose\n- Core story\n- Key moments to show\n- Distribution channels: **[ASSET_1_DISTRIBUTION_CHANNELS]**\n- Formats: **[ASSET_1_FORMATS]**\n- Status: **[ASSET_1_STATUS]**\n- Source links\n\nUse three story cards:\n- [ASSET_1_STORY_CARD_1]\n- [ASSET_1_STORY_CARD_2]\n- [ASSET_1_STORY_CARD_3]\n\n### [ASSET_2_NAME]\n\nInclude:\n- Asset purpose\n- Audience\n- Status: **[ASSET_2_STATUS]**\n- Source links\n- Outline\n\nUse outline cards for:\n- [ASSET_2_OUTLINE_CARD_1]\n- [ASSET_2_OUTLINE_CARD_2]\n- [ASSET_2_OUTLINE_CARD_3]\n- [ASSET_2_OUTLINE_CARD_4]\n- [ASSET_2_OUTLINE_CARD_5]\n\nAdd an **Edit brief** action to each asset-brief section so users can update visible purpose, story, audience, channels, formats, outline, and status without editing code.\n\n## Sources\n\nCreate a lower **Sources** section with live links to the discovered source documents and relevant docs pages.\n\nKeep provenance available without adding source-link noise to the screenshot-friendly overview or timeline headers.\n\nInclude a concise source note if an older tracker conflicts with the latest approved launch brief.\n\n## Data And Source Rules\n\nEvery major content block should either:\n- Link to a discovered source, or\n- Be clearly marked as needing review by **[REVIEW_OWNER_OR_TEAM]**\n\nDo not fabricate:\n- Metrics\n- Customer claims\n- Competitor claims\n- Personas or audiences\n- Approved messaging\n- FAQs or open decisions\n- Launch dates\n- Owners\n- Feature scope\n- Roadmap commitments\n\nIf a source is missing, create a visible placeholder such as:\n`Needs approved source`\n\nTreat launch facts as live data. If sources disagree, identify the freshest approved source and clearly note the conflict in a source note.\n\n## Persistence\n\nUse D1 for deployed persistence.\n\nPersist:\n- Inspiration references and Open Graph metadata\n- Notes\n- Decisions\n- Requested assets\n- Timeline milestones\n- Room settings and screenshot-safe collaborator aliases\n- User-edited target-audience cards, key messages, and asset-brief content\n\nProvide a graceful browser-local fallback when D1 is unavailable during local preview. The app should remain fully usable for local design QA.\n\nDo not make original source links, source titles, or source excerpts editable. Creator edits should complement the source-backed brief rather than overwrite provenance.\n\n## Visual Design\n\nDesign this as an internal operational workspace, not a marketing landing page.\n\nUse:\n- White background\n- Thin neutral borders\n- Sage green for complete and active states\n- Pale yellow for review states\n- Terracotta outline for launch milestones\n- Serif typography for the **[SHORT_CAMPAIGN_NAME]** title and major editorial section headings\n- Compact sans-serif typography for operational content\n- Cards with restrained 6-8px radii\n- Dense but readable spacing\n- Persistent left rail on desktop\n- Collapsed **Jump to section** disclosure on mobile\n\nAvoid:\n- Search bar\n- Secondary top header\n- Large decorative gradients\n- Decorative orbs or bokeh\n- Oversized pill-heavy UI\n- Nested floating card sections\n- Fabricated product screenshots where patterned fallbacks are more honest\n- Real coworker names\n\n## Responsive Behavior\n\nVerify at:\n- Desktop: approximately 1421 x 968\n- Mobile: approximately 390 x 844\n\nOn mobile:\n- Replace the desktop rail with a **Jump to section** disclosure.\n- Keep **New note** accessible inside the disclosure.\n- Stack cards.\n- Keep **Add entry** and **Add asset** visible and usable.\n- Ensure the document width does not exceed the viewport.\n\n## Implementation Notes\n\nRecommended implementation:\n- React or Next-style app compatible with Sites hosting.\n- Keep source-grounded data in a structured file.\n- Keep the main page focused on rendering and local UI state.\n- Use an API route or server-side action for Open Graph metadata retrieval.\n- Use D1 for deployed persistence.\n- Use browser-local storage as a local-preview fallback.\n\nSuggested scripts:\n- `npm run dev`\n- `npm run lint`\n- `npm run build`\n\n## Local Review\n\nRender locally before finalizing.\n\nUse the Browser plugin to verify:\n- Sidebar brand says **[APP_NAME]**.\n- Hero title says **[SHORT_CAMPAIGN_NAME]**.\n- No top header or global search bar appears.\n- Decisions use one column.\n- Checked decisions dim and strike through.\n- **Add entry** opens, saves, and immediately appends a decision.\n- **New note** opens, saves, and appears under **Room notes**.\n- **Room settings** opens, saves, and immediately updates the hero metadata and PMM owner label.\n- Every visible fictionalized coworker name can be changed through the UI without editing code.\n- **Add asset** opens, saves, increments the asset-count pill, adds an asset card, and adds a production timeline.\n- **Edit asset** updates an asset card's DRI and visible content.\n- **Edit timeline** opens with populated fields and milestone rows.\n- Saving a timeline edit updates both the asset card and production timeline.\n- Target Audience, Key Messages, and each asset brief expose restrained edit actions and persist updated visible copy.\n- Timeline navigation lands on the nested Production timelines block.\n- Inspiration navigation lands on the full-width Inspiration Wall.\n- **Add reference** appears only in the Inspiration Wall.\n- Inspiration filters work.\n- Real coworker names do not appear in visible UI.\n- Mobile layout does not overlap, clip, or exceed the viewport width.\n\nRun:\n- lint\n- production build\n\n## Deployment\n\nDeploy the completed app with Sites when the approved source-push path is available.\n\nCreate the Sites project, save its project ID in `.openai/hosting.json`, build the deploy archive, push the committed source revision to the generated Sites repository, create a Sites version from the exact commit SHA and archive, then deploy it.\n\nDefault the deployed access mode to `admins_only` unless explicitly instructed otherwise.\n\nAfter deployment, report:\n- local URL used for review\n- deployed site URL, if deployment succeeds\n- access mode\n- commit hash\n- missing source materials\n- sections marked as needing review\n\nIf deployment is blocked by a source-push or security control, do not bypass the control. Report the blocker and what approved path is needed.\n```", "url": "https://wpnews.pro/news/creative-brief-room-prompt-template-using-the-sites-plugin-in-codex", "canonical_source": "https://gist.github.com/pranavdesh/e08bae28d0fd8030fa26078cfd74143e", "published_at": "2026-06-02 17:19:51+00:00", "updated_at": "2026-06-04 12:44:23.224466+00:00", "lang": "en", "topics": ["ai-tools", "generative-ai", "ai-products"], "entities": ["Codex", "Google Drive", "Slack", "Notion"], "alternates": {"html": "https://wpnews.pro/news/creative-brief-room-prompt-template-using-the-sites-plugin-in-codex", "markdown": "https://wpnews.pro/news/creative-brief-room-prompt-template-using-the-sites-plugin-in-codex.md", "text": "https://wpnews.pro/news/creative-brief-room-prompt-template-using-the-sites-plugin-in-codex.txt", "jsonld": "https://wpnews.pro/news/creative-brief-room-prompt-template-using-the-sites-plugin-in-codex.jsonld"}}