# Start your first vibe site | Talizen > Turning every idea into productivity in seconds. [Talizen Help](/) [EN](/docs/start.md)/ [中文](/docs/start.md?lang=zh) ### Start - [Start your first vibe site](/docs/start.md) - [AI Credits Guide](/docs/ai-credits-guide.md) - [How to Choose an AI Model](/docs/ai-model-guide.md) - [Import and Publish AI Studio Projects](/docs/ai-studio-import-publish.md) - [Import Figma Designs into Talizen](/docs/figma-import-publish.md) ### Common - [Prompt library](/docs/prompt-lib.md) - [Talizen Skill](/docs/talizen-skill.md) - [Operate Form via Prompt](/docs/form.md) - [Operate CMS via Prompt](/docs/cms.md) - [FAQ](/docs/faq.md) - [Prompting Tips](/docs/prompt.md) ### Backend - [Add Login, Bookings, and Member Features](/docs/backend.md) - [Configure OAuth Login: Google and GitHub](/docs/backend-auth.md) - [Take Payments with Alipay](/docs/alipay-payment.md) ### tips - [How to Install ReactBits Components](/docs/reactbits.md) ### Developers [API for AI](/api.md) Implementation reference for AI coding agents. Quick StartStart your first vibe site # Start your first vibe site # Quick Start Use Talizen to generate and publish your first website in minutes. This tutorial demonstrates creating an illustration-style landing page for a design studio. ## Step 1: Enter Requirements 1. In the home page input box, describe the website you want to generate, including style, layout, and functional modules. The more specific your description, the more accurate the result. Example: > Create a playful doodle-style creative studio landing page. > > Style: Hand-drawn doodle UI, bold black outlines Soft off-white background Pastel accent colors (yellow, purple, green, red) Random floating shapes (circles, stars, blobs) > > Layout: Navbar with logo + menu + yellow CTA button Hero with large English headline, highlighted keywords, 2 buttons 4 service cards with icons About section with playful typography Story card with sticker-like decorations Team section with illustrated avatars Process section with 4 steps connected by dashed line > > UI details: Rounded cards, thick borders Slight irregular / imperfect layout Fun, creative, friendly vibe ![](https://ugc.talizen.com/_assets/site/2037420607548690432/1776754737965__image.png?w=3072&fmt=webp) 2\. Select a model (e.g., Gemini 3, Gemini 3.1, minmax2.7, MimoV2) ![](https://ugc.talizen.com/_assets/site/2037420607548690432/1776757216523__image.png?w=3072&fmt=webp) 3\. Click **Build** in the bottom right to start generating. ## Step 2: Generate Page After receiving your request, Talizen begins requirement analysis and step-by-step code production. Once finished, the page appears in the canvas. ![](https://ugc.talizen.com/_assets/site/2037420607548690432/1776757414768__image.png?w=3072&fmt=webp) To make adjustments, simply chat to add or modify requirements; the system updates based on the current page. Click **Preview** in the top left to see the live rendering. ![](https://ugc.talizen.com/_assets/site/2037420607548690432/1776757522795__image.png?w=3072&fmt=webp) ## Step 3: Adjust & Expand Enhance your site through continuous dialogue, such as adding a standalone "Contact Us" page: > Generate a standalone Contact Us page that maintains the same visual style as the homepage. > > The page should include: > > - Email address > > - Physical address > > - WeChat contact > > - An online contact form > > > Ensure the design remains consistent with the homepage’s doodle-style aesthetic. Tip: Start a new chat for new pages (click "+") to save context. ![](https://ugc.talizen.com/_assets/site/2037420607548690432/1776814019371__image.png?w=3072&fmt=webp) Once generated, the new page entry appears in the site structure. ![](https://ugc.talizen.com/_assets/site/2037420607548690432/1776757600375__image.png?w=3072&fmt=webp) ### Form Functionality Forms on the Contact page are **fully functional** and can collect user data. You can: - View auto-generated forms (e.g., Contact Form) in the **Forms Tab**. ![](https://ugc.talizen.com/_assets/site/2037420607548690432/1776813485076__image.png?w=3072&fmt=webp) - Inspect field structures. - Submit test data in Preview. ![](https://ugc.talizen.com/_assets/site/2037420607548690432/1776813503300__image.png?w=3072&fmt=webp) - Check collected data in the backend. ![](https://ugc.talizen.com/_assets/site/2037420607548690432/1776813557764__image.png?w=3072&fmt=webp) (Forms will be covered in detail in later tutorials.) ### Content Editing Talizen offers two ways to edit content: **Direct Editing** and **AI Editing**, allowing you to choose the best approach for different scenarios. - **Direct Editing**: Select a component (such as text or an image) and double-click to enter edit mode. You can then modify the content directly in the pop-up input field, with changes reflected in real time on the page. ![](https://ugc.talizen.com/_assets/site/2037420607548690432/1777365943922__image.png?w=3072&fmt=webp) - **Edit with AI**: Some components don’t provide a direct input field (as shown below). In these cases, you can use AI to make changes: - Describe your desired edits in the input field - Submit your request, and the AI will automatically update the content accordingly ![](https://ugc.talizen.com/_assets/site/2037420607548690432/1777366001171__image.png?w=3072&fmt=webp) - **Bulk Editing**: You can adjust content in multiple places and submit everything to AI in one go (as shown below). - Supports editing multiple components at the same time - Submit all changes in a single request for AI to process, improving efficiency and consistency ![](https://ugc.talizen.com/_assets/site/2037420607548690432/1777366032422__image.png?w=3072&fmt=webp) ## Step 4: Publishing & Access Once editing is complete: 1. Click **Publish** in the top right. 2. Confirm publishing. 3. Access your site using the provided domain. ![](https://ugc.talizen.com/_assets/site/2037420607548690432/1776813647410__image.png?w=3072&fmt=webp) ## Summary Talizen core flow: **Input Requirements → Auto Generate → Chat Adjustments → One-click Publish** Quickly go from idea to live site without manual environment setup. [Next\ \ AI Credits Guide](/docs/ai-credits-guide.md) On this page - [Quick Start](#header-0) - [Step 1: Enter Requirements](#header-1) - [Step 2: Generate Page](#header-2) - [Step 3: Adjust & Expand](#header-3) - [Form Functionality](#header-4) - [Content Editing](#header-5) - [Step 4: Publishing & Access](#header-6) - [Summary](#header-7) Need more help? [Contact Support](/contact.md) > 全站页面清单：[/llms.txt](/llms.txt)