fix(core): update code artifact tool prompt (#13171)

#### PR Dependency Tree


* **PR #13171** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Introduced a new "Code Artifact" prompt that generates HTML files
styled with Tailwind CSS, following a specific color theme and design
guidelines.

* **Style**
  * Minor formatting improvements for consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/backend/server/src/plugins/copilot/prompt/prompts.ts

@@ -1795,11 +1795,74 @@ const chat: Prompt[] = [
   },
 ];
 
+const artifactActions: Prompt[] = [
+  {
+    name: 'Code Artifact',
+    model: 'claude-sonnet-4@20250514',
+    messages: [
+      {
+        role: 'system',
+        content: `
+        When sent new notes, respond ONLY with the contents of the html file.
+        DO NOT INCLUDE ANY OTHER TEXT, EXPLANATIONS, APOLOGIES, OR INTRODUCTORY/CLOSING PHRASES.
+        IF USER DOES NOT SPECIFY A STYLE, FOLLOW THE DEFAULT STYLE.
+        <generate_guide>
+        - The results should be a single HTML file.
+        - Use tailwindcss to style the website
+        - Put any additional CSS styles in a style tag and any JavaScript in a script tag.
+        - Use unpkg or skypack to import any required dependencies.
+        - Use Google fonts to pull in any open source fonts you require.
+        - Use lucide icons for any icons.
+        - If you have any images, load them from Unsplash or use solid colored rectangles.
+        </generate_guide>
+        
+        <DO_NOT_USE_COLORS>
+        - DO NOT USE ANY COLORS
+        </DO_NOT_USE_COLORS>
+        <DO_NOT_USE_GRADIENTS>
+        - DO NOT USE ANY GRADIENTS
+        </DO_NOT_USE_GRADIENTS>
+        
+        <COLOR_THEME>
+          - --affine-blue-300: #93e2fd
+          - --affine-blue-400: #60cffa
+          - --affine-blue-500: #3ab5f7
+          - --affine-blue-600: #1e96eb
+          - --affine-blue-700: #1e67af
+          - --affine-text-primary-color: #121212
+          - --affine-text-secondary-color: #8e8d91
+          - --affine-text-disable-color: #a9a9ad
+          - --affine-background-overlay-panel-color: #fbfbfc
+          - --affine-background-secondary-color: #f4f4f5
+          - --affine-background-primary-color: #fff
+        </COLOR_THEME>
+        <default_style_guide>
+        - MUST USE White and Blue(#1e96eb) as the primary color
+        - KEEP THE DEFAULT STYLE SIMPLE AND CLEAN
+        - DO NOT USE ANY COMPLEX STYLES
+        - DO NOT USE ANY GRADIENTS
+        - USE LESS SHADOWS
+        - USE RADIUS 4px or 8px for rounded corners
+        - USE 12px or 16px for padding
+        - Use the tailwind color gray, zinc, slate, neutral much more.
+        - Use 0.5px border should be better 
+        </default_style_guide>
+        `,
+      },
+      {
+        role: 'user',
+        content: '{{content}}',
+      },
+    ],
+  },
+];
+
 export const prompts: Prompt[] = [
   ...textActions,
   ...imageActions,
   ...chat,
   ...workflows,
+  ...artifactActions,
 ];
 
 export async function refreshPrompts(db: PrismaClient) {

packages/backend/server/src/plugins/copilot/tools/code-artifact.ts

@@ -5,9 +5,7 @@ import { z } from 'zod';
 import type { PromptService } from '../prompt';
 import type { CopilotProviderFactory } from '../providers';
 import { toolError } from './error';
-
 const logger = new Logger('CodeArtifactTool');
-
 /**
  * A copilot tool that produces a completely self-contained HTML artifact.
  * The returned HTML must include <style> and <script> tags directly so that
@@ -37,23 +35,20 @@ export const createCodeArtifactTool = (
     }),
     execute: async ({ title, userPrompt }) => {
       try {
-        const prompt = await promptService.get('Make it real with text');
+        const prompt = await promptService.get('Code Artifact');
         if (!prompt) {
           throw new Error('Prompt not found');
         }
-
         const provider = await factory.getProviderByModel(prompt.model);
         if (!provider) {
           throw new Error('Provider not found');
         }
-
         const content = await provider.text(
           {
             modelId: prompt.model,
           },
-          [...prompt.finish({}), { role: 'user', content: userPrompt }]
+          prompt.finish({ content: userPrompt })
         );
-
         // Remove surrounding ``` or ```html fences if present
         let stripped = content.trim();
         if (stripped.startsWith('```')) {
@@ -65,7 +60,6 @@ export const createCodeArtifactTool = (
             stripped = stripped.slice(0, -3);
           }
         }
-
         return {
           title,
           html: stripped,