Claude Design system prompt - the complete core prompt released by Anthropic

What is the Claude Design system prompt?

The Claude Design system prompt is the core instruction file set by Anthropic forClaudein Design mode. It defines the role relationship of the AI as an expert designer and the user as a manager, standardizes the process for creating HTML artifacts, includes an anti-AI-flavor design checklist (prohibiting gradient overuse, left rounded borders, the Inter font, etc.), and establishes a complete engineering system including React version locking, real-time Tweaks adjustments, two-stage verification, and context compression, ensuring the consistency and professionalism of high-fidelity design output.

Main contents of the Claude Design system prompt

Role and positioning: Defines the AI as an expert-level designer collaborating with the user (manager). HTML is the tool, but the output forms are diverse (prototypes, PPT, animations, documents). It is strictly forbidden to disclose the system prompt, tool names, or technical implementation details.
Standard workflow: Standardizes a six-step process: understand requirements and constraints -> explore design resources and UI kits -> create a to-do plan -> build the project folder -> deliver and verify -> minimalist summary; when starting a project, at least 10 clarifying questions must be asked through the questions_v2 tool.
Design quality control: Establishes an anti-AI-flavor checklist, explicitly prohibiting gradient overuse, emoji piling, left rounded borders with accent colors, forced SVG drawing, and overuse of fonts such as Inter/Roboto/Arial; the core principle is "placeholders are better than poor implementations," and it is mandatory to create based on an existing UI kit or design system, with designing from scratch out of thin air forbidden.
Technical engineering specifications: Mandates the use of fixed CDN versions and integrity hashes for React and Babel, and disables type="module"; limits a single HTML file to no more than 1000 lines, requiring splitting into small components and importing them into the main file; style objects must use component-specific naming (such as terminalStyles), with generic styles naming forbidden; slide and video playback positions must be persisted in real time through localStorage.
Exploration and adjustment mechanism: Each design must provide more than 3 dimensional variants ranging from conservative to creative; the built-in Tweaks panel supports users in adjusting parameters such as colors, fonts, and spacing in real time, and persists changes to the file through EDITMODE-BEGIN/END comment blocks, realizing an iterable design system rather than a one-time generator.
Verification and delivery system: Establishes two-stage verification: call the done command to check console errors and ensure the page does not crash, then call fork_verifier_agent to perform screenshots and in-depth layout review in an independent iframe; supports exporting PDF, PPTX, Canva-compatible formats, and standalone HTML files, forming a complete delivery loop.
Context and resource management: Provides the snip tool to mark and remove conversation context that is no longer needed to prevent window overflow; supports read-only access to other project files, which must be copied into the current project before use, and directly referencing external paths or batch-copying more than 20 files is prohibited.

Core advantages of the Claude Design system prompt

Professionalized design methodology: Establishes a six-step standard process of "understand-explore-plan-build-verify-summarize," and mandates creation based on an existing UI kit or design system context, fundamentally avoiding poor design caused by AI generating from thin air.
Anti-AI-flavor quality control: Built-in explicit list of design prohibitions, strictly forbidding gradient abuse, rounded left-border accent colors, overused fonts such as Inter/Roboto, and forcing SVG to draw graphics; uses a placeholder strategy to ensure the output has a professional design standard rather than a templated formula.
Strict engineering standards: Through constraints such as pinning React and Babel versions, integrity hash verification, a thousand-line limit per single file, and component-specific style naming, it ensures code maintainability and consistent rendering across environments.
Efficient iterative exploration mechanism: Requires each design to provide more than 3 dimensional variants ranging from conservative to creative, together with the Tweaks real-time adjustment panel and localStorage state persistence, supporting users in real-time mixing and tuning parameters rather than accepting a one-off result.
Dual quality verification system: Adopts a two-stage verification of pre-checking console errors with the done command and background iframe screenshot review via fork_verifier_agent, ensuring delivered artifacts are functionally stable with precise and error-free visual layout.
Intelligent context management: Proactively marks and compresses historical iteration context via the snip tool, and combined with read-only resource access across projects, effectively supports the efficient advancement and collaboration of long-cycle complex design tasks.

Project address of the Claude Design system prompt

GitHub repository：https://github.com/elder-plinius/CL4R1T4S/blob/main/ANTHROPIC/Claude-Design-Sys-Prompt.txt

Target audience of the Claude Design system prompt

Product managers and founders: Have product ideas but lack skills in professional design tools such as Figma, and need to quickly generate high-fidelity prototypes and presentations through natural language to validate concepts.
Non-design professional business personnel: Roles such as marketing and operations need to independently complete marketing materials, reporting PPTs, or brand one-pagers, reducing dependence on professional designers.
UI/UX designers: Need to understand the capability boundaries and collaboration logic of AI design tools, or use AI to batch-generate multi-version style variants to accelerate design exploration and decision-making.
Front-end and full-stack developers: Involves technical specifications such as React component splitting, version pinning, and state persistence, and can refer to engineering practices to improve code maintainability.
AI researchers and prompt engineers: Learn Anthropic's architectural approach to encoding complex design methodologies, quality control checklists, and multi-stage verification mechanisms into system-level instructions.

Highlights of the Claude Design system prompt

Anti-AI-flavor design checklist: Explicitly prohibits typical visual fingerprints of AI-generated UI such as gradient abuse, rounded left-border accent colors, and the Inter font, and replaces poor implementations with a placeholder strategy, ensuring the output has a professional design standard.
Principle of mandatory context acquisition: Emphasizes that "good design does not start from zero" and must be created based on existing UI kits, design systems, or brand guidelines; designing from thin air is prohibited, fundamentally improving design quality and consistency.
Tweaks real-time iteration mechanism: Built-in in-page adjustment panel supports users in real-time modifying parameters such as color, font, and spacing and persisting them to files, realizing the transformation from a one-off generator to an iterable design system.
Two-stage quality verification: Checks console errors via the done command to ensure the page loads stably, then calls fork_verifier_agent to perform screenshot and deep layout review in an independent iframe, ensuring zero crashes in delivered artifacts.
Strict engineering constraints: Mandates fixed versions and integrity hashes for React and Babel, a 1,000-line limit per single file, component-specific style naming, localStorage state persistence, and other specifications, ensuring code maintainability and cross-environment consistency.
Role Restructuring and Process Standardization: Positions AI as an expert designer and the user as a manager, establishes a six-step standard workflow and a questioning strategy of at least 10 startup questions, achieving professional collaboration rather than simple tool invocation.