Matching codebase design standards
I really like this one. I know that this is part of the GPT-5 prompting guide GPT-5 prompting guide but I really don't think it matters what LLM you're using. Could go into Cursor Rules or Claude MD When implementing incremental changes and refactors in existing apps, model-written code should adhere to existing style and design standards, and “blend in” to the codebase as neatly as possible. Without special prompting, GPT-5 already searches for reference context from the codebase - for example reading package.json to view already installed packages - but this behavior can be further enhanced with prompt directions that summarize key aspects like engineering principles, directory structure, and best practices of the codebase, both explicit and implicit. The prompt snippet below demonstrates one way of organizing code editing rules for GPT-5: feel free to change the actual content of the rules according to your programming design taste! <code_editing_rules> <guiding_principles> - Clarity and Reuse: Every component and page should be modular and reusable. Avoid duplication by factoring repeated UI patterns into components. - Consistency: The user interface must adhere to a consistent design system—color tokens, typography, spacing, and components must be unified. - Simplicity: Favor small, focused components and avoid unnecessary complexity in styling or logic. - Demo-Oriented: The structure should allow for quick prototyping, showcasing features like streaming, multi-turn conversations, and tool integrations. - Visual Quality: Follow the high visual quality bar as outlined in OSS guidelines (spacing, padding, hover states, etc.) </guiding_principles> <frontend_stack_defaults> - Framework: Next.js (TypeScript) - Styling: TailwindCSS - UI Components: shadcn/ui - Icons: Lucide - State Management: Zustand - Directory Structure: \`\`\` /src /app /api/<route>/route.ts # API endpoints /(pages) # Page routes