abi · CarlosZiegler · Feb 6, 2024
diff --git a/backend/prompts/imported_code_prompts.py b/backend/prompts/imported_code_prompts.py
@@ -39,6 +39,27 @@
 Do not include markdown "```" or "```html" at the start or end.
 """
 
+IMPORTED_CODE_REACT_CSS_SYSTEM_PROMPT = """
+You are an experienced React developer focusing on CSS Modules.
+
+- Do not add comments in the code such as "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" in place of writing the full code. WRITE THE FULL CODE.
+- Repeat elements as needed. For example, if there are 15 items, the code should include 15 items. DO NOT LEAVE comments like "<!-- Repeat for each news item -->" or bad things will happen.
+- For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later.
+
+In terms of libraries,
+
+- Use these scripts to include React so that it can run on a standalone page:
+    <script src="https://unpkg.com/react/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
+- Instead of using Tailwind, you will apply styles using CSS Modules. Create `.module.css` files for your components and import them using module syntax, for example: `import styles from './MyComponent.module.css';`
+- You can use Google Fonts
+- Font Awesome for icons: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
+
+Return only the full code inside <html></html> tags.
+Do not include markdown "```" or "```html" at the start or end.
+"""
+
 IMPORTED_CODE_BOOTSTRAP_SYSTEM_PROMPT = """
 You are an expert Bootstrap developer.
 
@@ -129,6 +150,7 @@
 IMPORTED_CODE_SYSTEM_PROMPTS = SystemPrompts(
     html_tailwind=IMPORTED_CODE_TAILWIND_SYSTEM_PROMPT,
     react_tailwind=IMPORTED_CODE_REACT_TAILWIND_SYSTEM_PROMPT,
+    react_css=IMPORTED_CODE_REACT_CSS_SYSTEM_PROMPT,
     bootstrap=IMPORTED_CODE_BOOTSTRAP_SYSTEM_PROMPT,
     ionic_tailwind=IMPORTED_CODE_IONIC_TAILWIND_SYSTEM_PROMPT,
     vue_tailwind=IMPORTED_CODE_VUE_TAILWIND_SYSTEM_PROMPT,

diff --git a/backend/prompts/screenshot_system_prompts.py b/backend/prompts/screenshot_system_prompts.py
@@ -78,6 +78,32 @@
 
 Return only the full code in <html></html> tags.
 Do not include markdown "```" or "```html" at the start or end.
+"""
+REACT_CSS_SYSTEM_PROMPT = """
+You are an expert React developer focusing on CSS Modules.
+You take screenshots of a reference web page from the user, and then build single-page apps using React and CSS Modules.
+You might also be given a screenshot (The second image) of a web page that you have already built and asked to update it to look more like the reference image (The first image).
+
+- Make sure the app looks exactly like the screenshot.
+- Pay close attention to background color, text color, font size, font family, padding, margin, border, etc. Match the colors and sizes exactly.
+- Use the exact text from the screenshot.
+- Do not add comments in the code such as "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" in place of writing the full code. WRITE THE FULL CODE.
+- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "<!-- Repeat for each news item -->" or bad things will happen.
+- For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later.
+
+In terms of libraries,
+
+- Use these scripts to include React so that it can run on a standalone page:
+    <script src="https://unpkg.com/react/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
+- Instead of using Tailwind, you will apply styles using CSS Modules. Create `.css` files for your components and import them using module syntax, for example, `import styles from './MyComponent.module.css';`
+- You can use Google Fonts.
+- Font Awesome for icons: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
+
+Return only the full code inside <html></html> tags.
+Do not include markdown "```" or "```html" at the start or end.
+
 """
 
 IONIC_TAILWIND_SYSTEM_PROMPT = """
@@ -178,6 +204,7 @@
 SYSTEM_PROMPTS = SystemPrompts(
     html_tailwind=HTML_TAILWIND_SYSTEM_PROMPT,
     react_tailwind=REACT_TAILWIND_SYSTEM_PROMPT,
+    react_css=REACT_CSS_SYSTEM_PROMPT,
     bootstrap=BOOTSTRAP_SYSTEM_PROMPT,
     ionic_tailwind=IONIC_TAILWIND_SYSTEM_PROMPT,
     vue_tailwind=VUE_TAILWIND_SYSTEM_PROMPT,

diff --git a/backend/prompts/test_prompts.py b/backend/prompts/test_prompts.py
@@ -79,6 +79,27 @@
 Do not include markdown "```" or "```html" at the start or end.
 """
 
+REACT_CSS_SYSTEM_PROMPT = """
+You are an experienced React developer focusing on CSS Modules.
+
+- Do not add comments in the code such as "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" in place of writing the full code. WRITE THE FULL CODE.
+- Repeat elements as needed. For example, if there are 15 items, the code should include 15 items. DO NOT LEAVE comments like "<!-- Repeat for each news item -->" or bad things will happen.
+- For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later.
+
+In terms of libraries,
+
+- Use these scripts to include React so that it can run on a standalone page:
+    <script src="https://unpkg.com/react/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
+- Instead of using Tailwind, you will apply styles using CSS Modules. Create `.module.css` files for your components and import them using module syntax, for example: `import styles from './MyComponent.module.css';`
+- You can use Google Fonts
+- Font Awesome for icons: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
+
+Return only the full code inside <html></html> tags.
+Do not include markdown "```" or "```html" at the start or end.
+"""
+
 IONIC_TAILWIND_SYSTEM_PROMPT = """
 You are an expert Ionic/Tailwind developer
 You take screenshots of a reference web page from the user, and then build single page apps 
@@ -210,6 +231,27 @@
 Do not include markdown "```" or "```html" at the start or end.
 """
 
+IMPORTED_CODE_REACT_CSS_SYSTEM_PROMPT = """
+You are an experienced React developer focusing on CSS Modules.
+
+- Do not add comments in the code such as "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" in place of writing the full code. WRITE THE FULL CODE.
+- Repeat elements as needed. For example, if there are 15 items, the code should include 15 items. DO NOT LEAVE comments like "<!-- Repeat for each news item -->" or bad things will happen.
+- For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later.
+
+In terms of libraries,
+
+- Use these scripts to include React so that it can run on a standalone page:
+    <script src="https://unpkg.com/react/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
+- Instead of using Tailwind, you will apply styles using CSS Modules. Create `.module.css` files for your components and import them using module syntax, for example: `import styles from './MyComponent.module.css';`
+- You can use Google Fonts
+- Font Awesome for icons: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
+
+Return only the full code inside <html></html> tags.
+Do not include markdown "```" or "```html" at the start or end.
+"""
+
 IMPORTED_CODE_BOOTSTRAP_SYSTEM_PROMPT = """
 You are an expert Bootstrap developer.
 
@@ -320,6 +362,12 @@ def test_prompts():
     assert react_tailwind_prompt[0]["content"] == REACT_TAILWIND_SYSTEM_PROMPT
     assert react_tailwind_prompt[1]["content"][2]["text"] == USER_PROMPT  # type: ignore
 
+    react_css_prompt = assemble_prompt(
+        "image_data_url", "react_css", "result_image_data_url"
+    )
+    assert react_css_prompt[0]["content"] == REACT_CSS_SYSTEM_PROMPT
+    assert react_css_prompt[1]["content"][2]["text"] == USER_PROMPT  # type: ignore
+
     bootstrap_prompt = assemble_prompt(
         "image_data_url", "bootstrap", "result_image_data_url"
     )
@@ -362,6 +410,15 @@ def test_imported_code_prompts():
     ]
     assert react_tailwind_prompt == expected_react_tailwind_prompt
 
+    react_css_prompt = assemble_imported_code_prompt(
+        "code", "react_css", "result_image_data_url"
+    )
+    expected_react_css_prompt = [
+        {"role": "system", "content": IMPORTED_CODE_REACT_CSS_SYSTEM_PROMPT},
+        {"role": "user", "content": "Here is the code of the app: code"},
+    ]
+    assert react_css_prompt == expected_react_css_prompt
+
     bootstrap_prompt = assemble_imported_code_prompt(
         "code", "bootstrap", "result_image_data_url"
     )

diff --git a/backend/prompts/types.py b/backend/prompts/types.py
@@ -4,6 +4,7 @@
 class SystemPrompts(TypedDict):
     html_tailwind: str
     react_tailwind: str
+    react_css: str
     bootstrap: str
     ionic_tailwind: str
     vue_tailwind: str
@@ -13,6 +14,7 @@ class SystemPrompts(TypedDict):
 Stack = Literal[
     "html_tailwind",
     "react_tailwind",
+    "react_css",
     "bootstrap",
     "ionic_tailwind",
     "vue_tailwind",

diff --git a/frontend/src/lib/stacks.ts b/frontend/src/lib/stacks.ts
@@ -2,6 +2,7 @@
 export enum Stack {
   HTML_TAILWIND = "html_tailwind",
   REACT_TAILWIND = "react_tailwind",
+  REACT_CSS = "react_css",
   BOOTSTRAP = "bootstrap",
   VUE_TAILWIND = "vue_tailwind",
   IONIC_TAILWIND = "ionic_tailwind",
@@ -13,6 +14,7 @@ export const STACK_DESCRIPTIONS: {
 } = {
   html_tailwind: { components: ["HTML", "Tailwind"], inBeta: false },
   react_tailwind: { components: ["React", "Tailwind"], inBeta: false },
+  react_css: { components: ["React", "CSS"], inBeta: false },
   bootstrap: { components: ["Bootstrap"], inBeta: false },
   vue_tailwind: { components: ["Vue", "Tailwind"], inBeta: true },
   ionic_tailwind: { components: ["Ionic", "Tailwind"], inBeta: true },