Skip to main content

One Minute Quick Start

Welcome to the PagerMaker quick start guide! In just one minute, you’ll learn how to transform your design sketches into functional web pages using AI.

Step 1: Configure LLM Settings​

  1. Open Settings: Go to More > Setting.
  2. Enter Details: Fill in the model name, apiKey, and baseURL.
Note

The API key is only stored locally on your computer for security reasons.

Step 2: Add Design Sketches​

  1. Add Sketch: Go to Sketch > Open sketch to upload a design image from your computer or use Open sketch URL to load an image from the internet.
  2. Draw Sketch: Optionally, draw a sketch using Sketch > Draw sketch.

Step 3: Configure Options (Optional)​

  1. JS Framework: Select between React, Vue or Svelte.
  2. CSS Framework: Choose Tailwind CSS.
  3. UI Framework: Pick from Ant Design, Arco Design, Semi Design, Bootstrap, or Ionic.
  4. Custom Components: Add any custom components.
  5. TypeScript: Enable or disable TypeScript.

Step 4: Generate Webpage​

  1. Make it Real: Click the Make it Real button in the Sketch panel. PagerMaker will generate the web page code.
  2. Code Editor: The generated code appears in the Code editor panel.
  3. Preview Webpage: See a live preview in the Webpage preview panel.

Step 5: Save Your Webpage​

  1. Save Page: Go to Sketch > Save page to save your project.

Conclusion​

PagerMaker quickly turns your design sketches into functional web pages using AI. Follow these simple steps, and you’ll have your web page up and running in no time!

Happy coding!