Bring a Page into Your Brand
Turn a mismatched screen into a consistent, usable page using your existing design system.
- Real brand references
- Mobile and keyboard checks
- Working interactions
When to use it
A page still looks like the old brand, or a new feature feels disconnected from the rest of the site.
Bring this context
The target route, a current brand reference, tokens or font files, and key interactions.
brand-a-page.md
copy · customize · try itBring this page into our current brand and make the whole flow feel finished.
Target page: [route or file]
Best current brand reference: [page, screenshot, or component]
Brand source of truth: [tokens, fonts, assets, and guidelines]
Main action visitors should take: [action]
Interactions to preserve: [search, forms, downloads, dialogs, etc.]
Inspect the target and reference before editing. Reuse real brand assets and existing components. Match the typography, palette, spacing, borders, and button treatment while keeping the page's purpose clear.
Follow the flow beyond the first screen: include search results, empty states, expanded details, dialogs, and success or error messages that belong to this page. Keep existing URLs, content, analytics, and working actions intact unless this request requires a change.
Check a narrow mobile viewport and a desktop viewport. Verify keyboard focus, readable contrast, touch targets, and long content. Look for horizontal overflow and clipped controls. Exercise the primary interaction in the browser when available.
Finish with the visible changes and the checks you actually completed. Call out anything you couldn't inspect.Make this prompt yours
- 1. Download or copyCopy the prompt into your AI tool, or download a copy to keep.
- 2. Customize itReplace bracketed details with your context. Include a real example when you can.
- 3. Test it on real workTry a real task, inspect the output, and refine the prompt where the result misses the mark.
Research behind this prompt
An original DevLaunch adaptation, informed by these sources. Reviewed September 23, 2026; source publication dates vary. Test the result against your own work.
- Anthropic · Claude Code best practices ↗
Inspect the project first and give the agent a way to verify its work.