Beginner’s Guide

Welcome to Sketchflow! This guide is here to help you hit the ground running, even if you've never built a product before. Follow these steps to move smoothly from your first login to your very first working website.

1. Setting Up Your Account

• Sign Up or Log In

Access the Sketchflow platform and create your free account, or log in with your existing credentials.

• Explore the Dashboard

Get comfortable with your workspace—this is where all your projects come to life.

2. Starting Your First Project

You can start your creation in two ways:

• Start from scratch by simply describing your product or enter your detailed requirements in the chatbox.
• Attach reference images with brief descriptions to create designs that match the style and key elements.

Choose either approach based on your needs to help Sketchflow better understand the product you want to build.

3. Building and Editing Your Design

Build from a Description

• Enter your product info and requirements. Additionally, you can keep your project description as simple as a list of key features or make it as detailed as a full product requirement document.

• Choose the style settings built in Sketchflow, or use AI-generated style to automatically fit your idea.

• When creating a project, Sketchflow can automatically generate a project name, or you can enter your own.

• In Plan Mode, Sketchflow will generate a user journey flow diagram for your product, and you can further adjust and refine the diagram based on your specific needs using the prompt box on the right.

  

• Automatically select key nodes in your project, click 'Generate design' to directly generate key nodes or generate all designs in one click.

  

• Generate and edit interface mockups.

  

Build with References

• Upload screenshots or images to the chatbox and add notes as your requirements.

  

• Edit layouts, sections, and elements to suit your vision in Design Mode.

  

Wherever you start, you can always fine-tune sections, customize UI elements, and update design styles.

4. Project Integrity Check

Let AI check your entire project for incomplete modules, broken user flows, and disconnected data relationships. Review detected issues and resolve them one by one with predefined fixes or custom actions.

Build with confidence. AI Assistant helps ensure every module, page, and data connection works together as intended.

5. Code Generation

Generate full-stack code for your production-ready, well-designed websites or mobile apps.

• You can choose the preferred framework both for frontend and backend, suitable for web, mobile, and tablet projects.

• Integrate with third-party services by uploading relevant documentation and describing your integration requirements.

6. Previewing and Sharing

• Preview Mode

  Test your design and simulate user interactions to experience the flow like a real user. Instantly preview your web projects in a simulated browse environment.

  

• Click the Preview button, you'll be redirected to:

  

• Collaboration & Sharing

  Share your project via a link or invite teammates and stakeholders to collaborate. Set access permissions before inviting others to protect the privacy of your work.

  

  Preview your app and collaborate with teammates in real time, with support for project imports.

7. Deploy and Publish Your Application

Before deployment, edit and fill in the environment variables to complete the configuration in Code Workspace.

Once the configuration is complete, click Submit and start test, the automated application tests will start and you can check the results in AI Assistant.

Click [Publish Server] to publish your app online. After publishing, an access URL will be generated for you.

You can customize the sub domain of the URL, to share with your teammates or stakeholders.

![customize-sub-domain]

8. Exporting Your Work

Export your project as Sketch files, HTML, Web (Vue.js/React), Android (Kotlin) and iOS (Swift). Download your full-stack codebase, including backend frameworks (NestJS/Spring) for further development and customization. Enjoy full ownership of your code and complete deployment flexibility.

9. Tips for Beginners

• Feel free to experiment—AI support makes it easy to iterate and keeps your progress safe with version tracking.

• Not sure where to start? Browse our template library and choose from a collection of ready-to-use projects to kickstart your work.

• Tweak your design as much as you like; nothing is final until you’re satisfied.

Get Started Now

Open Sketchflow, start your first project, and bring your ideas to life. No matter your background, Sketchflow gives you everything you need to design, build, and ship full-stack applications. Happy building！