Tutorials / Getting started / Your first build
📝 Written ● Beginner

Your first build

Open the playground, type a prompt, and watch your idea become reality in seconds — no coding experience needed.

What you'll learn

Step 1: Open the playground

1

Go to the playground

Visit /try.html in your browser. You'll see a large text area in the center with the prompt "Make me a pitch deck for an AI startup" as a placeholder.

Step 2: Write your first prompt

2

Type what you want to build

Click in the text area and type your request. For your first build, try something specific and tangible:

  • "Build a single-page business proposal for a coffee shop"
  • "Create an analytics dashboard with KPI cards and charts"
  • "Design a landing page for a SaaS tool"

The more specific you are, the better the result. Instead of "make a website," try "build a clean, professional landing page with a hero section, three features, and a sign-up form."

Tip: LingCode is best at design deliverables — pitch decks, dashboards, landing pages, proposals, and other single-page or multi-page HTML. If you're unsure what to build, click one of the "Try:" example chips below the prompt box to launch with a pre-filled prompt.

Step 3: Pick an AI provider

3

Choose who generates your content

On the left sidebar, you'll see provider buttons: LingModel (built-in, free), Claude, DeepSeek, GPT-4, and others.

For your first build, select LingModel — it's free, requires no API key, and works great for design tasks. If you want to use Claude or another provider, you'll need to add your API key first (see Setting up API keys).

Step 4: Run and preview

4

Click "Send" and watch it build

Once you've typed your prompt and selected a provider, click the blue "Send" button at the bottom. The AI will generate your design in real-time, and you'll see it rendered instantly in the preview pane on the right.

The preview updates as the code streams in — watch your idea come to life in real-time.

Tip: If you don't like the first result, click "Continue" and ask for changes: "Make the colors warmer," "Add a pricing table," "Switch to a dark theme." Each follow-up refines what you have.

Step 5: Refine (optional)

5

Iterate and improve

Use the "Continue" button below the response to ask for tweaks:

  • "Make the heading bigger"
  • "Change the accent color to blue"
  • "Add more spacing between sections"
  • "Include a call-to-action button"

Each follow-up builds on the previous output. You can also manually edit the HTML code in the "Code" tab and see your changes instantly in the preview.

Step 6: Export and download

6

Get your creation

Once you're happy, click the three-dots menu above the preview pane and choose:

  • Download .html — Get the raw HTML file to edit or host anywhere
  • Download .zip — For multi-page sites, download all files bundled
  • Export PDF — Perfect for documents and one-pagers
  • Export PPT — If your build has <section class="slide"> elements, each becomes a PowerPoint slide
Note: Exports are client-side only — nothing is uploaded to our servers. Your data stays private.

What's next?

Now that you've created your first build, you're ready to:

What's next

Setting up API keys

Unlock Claude, DeepSeek, GPT-4 and other providers

Understanding providers

Which AI is best for what task

Writing better prompts

Techniques for higher quality results