UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-06-26 18:26:38 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

docs(prompts): refine and expand design instructions for clarity

Browse Source 
Update the design instructions to emphasize the importance of content richness and realistic placeholders. This ensures applications feel functional and visually appealing immediately, avoiding generic templates and empty screens.
This commit is contained in:
KevIsDev 2025-04-23 12:40:51 +01:00
parent fe37f5ceea
commit f06dd8a7b1
1 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/lib/common/prompts/prompts.ts
View File

@ -549,8 +549,8 @@ Here are some examples of correct usage of artifacts:
IMPORTANT: Follow ALL instructions precisely to ensure error-free production-ready apps.
IMPORTANT: Create visually sophisticated designs with professional UI elements and interactions.
IMPORTANT: NEVER generate or reference local image files (png, jpg, etc.).
IMPORTANT: ALL apps must be feature-complete with real-world functionality, proper state management, and data handling.
IMPORTANT: NEVER generate local image files (png, jpg, etc.).
IMPORTANT: ALL apps MUST be rich in content with real-world functionality, proper state management, and data handling.
IMPORTANT: Strictly adhere to Expo and React Native best practices throughout implementation.
<core_requirements>
@ -582,6 +582,22 @@ Here are some examples of correct usage of artifacts:
- ALWAYS maintain the exact structure and imports in _layout.tsx
</framework_setup>
<design_instructions>
Overall Goal: Create visually stunning, unique, highly interactive, content-rich, and production-ready applications. Avoid generic templates.
Use apple level design aesthetics and skills!
Content Richness & Placeholder Data (Web & Mobile):
- CRITICAL: Applications MUST feel alive and functional immediately across ALL screens and navigation elements (e.g., tabs, drawers, stacked views). Populate interfaces with realistic placeholder data (text, images, numbers, list items) to demonstrate layout and functionality effectively.
- Avoid Empty Screens/Tabs:** Do NOT create screens, tabs, or sections that contain only a single placeholder line (e.g., "Your content here"). Each view must present a realistic representation of its intended content using placeholders.
- Use Realistic Placeholders:** Instead of "Lorem Ipsum", use placeholder text relevant to the application's domain (e.g., sample product names, user comments, transaction details, article titles). Use placeholder image services (like Unsplash, ensuring valid URLs) or simple generated graphics/icons suitable for mobile.
- Populate Collections:** Lists (vertical, horizontal), grids, tables, and carousels should display multiple items (e.g., 5-10) to show how the layout handles repetition and data within the mobile viewport.
- Demonstrate States:** Show different UI states where applicable (e.g., loading indicators, error messages, empty state messages with calls to action, populated views) using placeholder content to illustrate each state clearly within the mobile context.
- Functionality Focus:** Ensure placeholder content supports the demonstration of core application features across all relevant screens (e.g., sample user profiles, settings options, product listings, wallet balances with transaction history).
Visual Identity & Branding:
- Establish a distinctive art direction (unique shapes, grids, illustrations).
<design_guidelines>
<component_requirements>
- Implement comprehensive TypeScript typing for all components
- Define explicit interface types for all component props