- 1. The Importance of Writing Effective Prompts
- When using Talkit to generate applications, writing effective prompts is crucial. It is the key factor in ensuring that the generated results meet expectations. A well-crafted prompt can accurately convey the required functionality, design style, data structure, and other detailed requirements to Talkit, allowing it to generate an application that effectively meets the needs.
- 2. Tips and Examples for Writing Prompts
- Clearly Describe Functional Requirements: The prompt should clearly and specifically express the desired functionality, avoiding vague descriptions so that Talkit can accurately understand and generate the corresponding content. For example, “Create a user registration page with username, email, and password input fields, include input format validation, and provide CAPTCHA functionality with auto-refresh capability” is clearer and more specific than simply saying “Create a registration page.” This kind of description allows Talkit to understand the required functionality details for the page.
- Specify Design Requirements: If there are specific design requirements for the page, they should be detailed in the prompt, including page layout, color scheme, font styles and sizes, etc. For example, “Create a personal blog website with a minimalist style, white background, and black font as the primary color. The homepage layout should be three columns: the left column for the main content area displaying the latest article list; the center for the author’s profile, including a photo, bio, and social links; and the right column for the sidebar, containing a search box, category list, and popular tag cloud. The category list items should be displayed as blue rounded rectangle buttons, with 14px font size, gray text color, and orange color when hovered.” Such a detailed design description allows Talkit to generate a page that matches a specific visual style.
- Specify Data Structure: When involving databases or data interaction, the data fields and their relationships should be clearly explained. For example, “Create an online learning platform with a course table, including fields such as course ID, name, description, instructor ID, course category ID, creation time, and update time; a user table with user ID, username, email, password, and registration time; and a user-course association table with fields for user-course ID, user ID, course ID, learning progress, learning duration, and learning status. The course table is linked to the user table through course ID and user ID, and the user-course association table is related to both the course and user tables through course ID and user ID.” This kind of prompt allows Talkit to generate a rational data structure based on the requirements.
- Clarify Interaction Logic: For applications that require complex interactions, the interaction flow and trigger conditions should be clearly described. For example, “Design an online music player page that includes a song list, playback control area, playback progress bar, and lyrics display area. When clicking on a song in the list, the song starts playing, the play/pause button in the control area changes state, and the progress bar updates accordingly. The lyrics display area highlights the currently playing lyrics line; clicking the play/pause button controls playback and updates the button icon and lyrics highlight status. The progress bar can be dragged to adjust the playback progress, and when dragged, the song position and lyrics highlight will sync accordingly.” This kind of description allows Talkit to generate a page with a smooth interactive experience.
- 3. Simple Function:
- “Create a login page with a blue theme, centered layout, containing username and password input fields. The input fields should be 300px wide, 40px high, with a 1px solid border and 5px rounded corners, with a font size of 14px. Below the input fields, display a red text prompt saying ‘Please enter the correct username and password.’ Additionally, create a blue login button, 100px wide, 36px high, with 3px rounded corners, and a font size of 16px. The button should turn dark blue when hovered over.”
- Complex Function:
- “Create an online office platform containing the following pages:
- Document Editing Page: Supports creating and editing documents in various formats, with a rich text formatting toolbar including font selection, size adjustment, bold, italics, underline, and text color settings, as well as the ability to insert images, tables, and links.
- Team Collaboration Page: Displays a team member list with online status, a chat window, and a file-sharing area, supporting real-time communication and file sharing.
- Task Management Page: Allows the creation, assignment, and tracking of tasks, with the ability to set task priorities, deadlines, and assignees, displayed in either a list or kanban format.
- Project Progress Tracking Page: Visually displays project progress, sub-task completion status, and key milestones using charts.
- Data Structure:
- Document Table: Document ID, title, content, creator ID, creation time, last edited time, document type.
- Team Member Table: Member ID, name, email, department, position, join time.
- Task Table: Task ID, name, description, priority, creator ID, assignee ID, creation time, deadline, completion status.
The document table is linked to the team member table via creator ID and assignee ID, and the task table is linked to the team member table via creator ID and assignee ID.” - Design and Function Integration:
- “Create a food recommendation website with a responsive design that works well on different devices.
- Top Navigation: Contains the website logo and navigation items such as Home, Food Categories, Popular Recommendations, Rankings, About Us, etc. The background color of the navigation bar is orange, with white font in 16px size, and the text changes to dark orange when hovered over.
- Main Content Area: On the left, display a food recommendation list in card format, each card showing an image, name, description, rating, and price. The card image should be 200px high and 250px wide, with a white background, a 1px solid border, 8px rounded corners, and a shadow effect of 0 0 10px rgba(0,0,0,0.1). On the right, include a filter bar where users can filter by cuisine, taste, price range, etc. The filter items should be displayed in gray rounded rectangular boxes, which turn orange when selected.
- Footer: Contains copyright information and links to other websites. The footer background color is light gray, with dark gray font in 12px size.
Clicking on a food recommendation card should lead to the detail page, which includes a detailed introduction, address, business hours, and user reviews. The images can be enlarged, and the reviews should be displayed with star ratings and text comments, with the option to filter reviews by rating.”
Document Center
Explore guides, tutorials, and reference materials to help you make full use of the Talkit AI platform.