The Fastest Way From Idea to Working Web Page
Most no-code website builders require you to drag components around, understand layout grids, and fight with template constraints. What if you could just describe what you want in plain language and receive working HTML code you can use immediately?
That is what Artifacts in Kolbo Chat does. It is not a static code generator. It is a live chat-driven development environment where you describe, review, refine, and receive. And it works for people with zero coding background.
This guide shows you how to use it effectively.
What Artifacts Is
When you ask Kolbo Chat (powered by Claude or GPT-4o) to build something visual, a landing page, a pricing table, a contact form, a dashboard mockup, it does not just output code into the conversation. It opens a live preview panel next to the chat where you see the actual result, rendered in real time as it builds.
You can interact with that preview: scroll it, click buttons, fill in forms. If something is not right, you say so in the next message and it updates immediately.
Key properties:
- Self-contained HTML: every artifact is a single file with all CSS and JavaScript embedded. No external dependencies, no build tools, no server required.
- Live preview: see the result as it generates, not after a long wait
- Iterative refinement: describe changes in plain language, see them applied in the next response
- Shareable link: every artifact gets a unique URL you can share with clients, teammates, or embed in a page
What You Can Build
Artifacts handles anything that can be expressed as a single-page web experience. Practical examples:
Landing pages: hero section, features, testimonials, CTA. You provide the brand details, tone, and key selling points. The AI handles layout, typography, responsive design, and visual hierarchy.
Pricing tables: plans, features, pricing, and CTA buttons. Especially useful when you need to present multiple tiers clearly.
Contact forms: working forms with field validation and a submit action. Not connected to a backend by default, but the HTML output can be wired to any form service (Formspree, Typeform, Netlify Forms) with one line of code.
Email templates: structured HTML email layouts that work across email clients. Write the copy, describe the brand, receive a template ready for export into your email tool.
Data dashboards: mockups of analytics dashboards, KPI cards, chart placeholders. Useful for client presentations or product prototypes.
Calculators: interactive widgets like a mortgage calculator, savings estimator, or pricing quote tool, built with JavaScript and working in the browser without any backend.
Interactive elements: tabs, accordions, modals, image galleries. Any UI component you need for a page.
How to Brief It Well
The quality of what you get back is entirely determined by the quality of your brief. Generic input produces generic output. Specific input produces something you can use immediately.
A Good Landing Page Brief
What to include:
- Product or service name and one-line description
- Target audience: who is this page for?
- Primary CTA: what should the visitor do? (Sign up, buy, contact, download)
- Key selling points: 3 to 5 specific benefits, not generic claims
- Tone: formal/professional, conversational, bold/startup, premium/luxury
- Color palette if you have one (hex values, or a description like "dark navy and gold")
- Any elements you specifically want: testimonials section, FAQ, feature grid
Example brief:
"Build a landing page for Growflow, a project management tool for small agency teams. Audience: agency owners and project managers who are frustrated with tools that were built for big enterprise. CTA: start a free trial. Selling points: (1) 15-minute setup, no migration required; (2) designed specifically for teams of 5 to 20 people; (3) client-ready reports in one click. Tone: confident but approachable, not corporate. Colors: deep teal and white. Include: hero, 3-feature grid, one testimonial section, and a final CTA. No FAQ."
That brief produces something substantially more usable than "make a landing page for my project management tool."
The Iterative Refinement Process
Artifacts is designed for iteration. Do not try to get everything perfect in the first message. Use a two-step process:
First message: structure and content. Brief the overall layout, the copy, and the primary goal. Let it build the full page.
Second message: visual refinement. Review what you received and describe the changes: "make the headline larger," "change the background to dark mode," "add more space between sections," "the button should be more prominent," "move the testimonials above the pricing."
Third message: details. Fine adjustments: "use Inter font instead," "the hero image placeholder should be 16:9 not square," "change the CTA text from 'Get Started' to 'Start Free, No Card Required.'"
Each response updates the live preview. You see the result immediately.
Sharing and Publishing
Every artifact in Kolbo Chat gets a unique shareable link. Uses:
Client review: send the link and your client sees a live preview of their landing page, no download required. They can scroll, click, and interact with it.
Team review: share with your team for input before finalizing.
Direct use: for simple use cases, some people take the artifact URL and paste it directly into tools like Notion, Carrd, or as an iframe in Squarespace. For more complex integration, download the HTML file.
Download and deploy: download the single HTML file. Upload it to any web host that serves static files: Netlify, Vercel, GitHub Pages, or even a standard hosting panel. If your page is purely informational with no form backend, a single file upload is the entire deployment.
Practical Examples
Event Registration Page
Brief: "Build an event registration page for a one-day AI workshop for business owners, titled 'AI for the Modern Business.' Date: September 15, 2026, Tel Aviv. Price: $149. Include: event description (2 sentences), agenda (morning and afternoon blocks), speaker placeholder, and a register button (no form backend needed, just a button). Black and gold color scheme, premium feel."
What you receive: a fully styled event page with agenda section, speaker card, and a prominent registration CTA, in under two minutes.
Pricing Table for SaaS
Brief: "Create a pricing comparison table for a SaaS with three tiers. Starter: $19/month, up to 3 users, 5GB storage, email support. Pro: $49/month, up to 10 users, 25GB storage, priority support, API access. Enterprise: custom pricing, unlimited users, SSO, SLA, dedicated account manager. Highlight the Pro plan. Style: clean white, blue accent, rounded cards."
What you receive: a three-column pricing table with the Pro plan visually highlighted, ready to embed.
FAQ Page
Brief: "I have a list of 12 FAQs for a subscription software product. Build a clean FAQ page with accordion expand/collapse for each question. Include a search input that filters questions as you type. Minimal design, white background, gray text."
What you receive: a fully functional interactive FAQ with working search filter in JavaScript, no library dependencies.
What It Does Not Do
Artifacts is for static or JavaScript-powered front-end content. It does not connect to databases, handle user authentication, process payments, or send emails from a backend. What it builds runs entirely in the browser.
Forms need a backend connection. The form HTML will be correctly structured with all fields, but the "submit" action needs to point to a real service for the data to go anywhere. This requires one line of HTML change: action="https://formspree.io/your-id". Not a big step, but it is a manual one.
Custom fonts and images need separate hosting. If your brand uses a specific font that is not available on Google Fonts, the artifact will fall back to a similar one. Branded images need to be hosted and their URLs added to the design in a follow-up message.
Prompt Templates
Landing Page (General)
"Build a landing page for [product/service]. Target audience: [who]. Primary CTA: [action]. Key benefits: [1, 2, 3]. Tone: [style]. Colors: [palette]. Sections: [what to include]."
Email Template
"Create an HTML email template for [type: newsletter / transactional / promotional]. Brand: [name and description]. Subject line: [text]. Main content: [brief]. CTA: [button text and link]. Logo: [URL if available]. Colors: [palette]. Must work in Gmail and Outlook."
Calculator or Tool
"Build a [type of calculator] that calculates [what]. Inputs: [list fields]. Output: display [what result]. Include: clear button, result appears below in a highlighted box. Simple clean design."
Dashboard Mockup
"Create a dashboard UI mockup for [product]. Show: [list of metrics or data sections]. Use placeholder numbers. Include a simple sidebar nav with: [list of menu items]. Clean, modern SaaS style."
Getting Started
Open Kolbo Chat in Kolbo.AI, make sure you are on Claude or GPT-4o, and write your brief. Your first artifact is usually ready in under two minutes.
From there: iterate, refine, and share. For most informational web pages, the entire process from brief to publish-ready HTML takes under 30 minutes.
No design tools required. No template constraints. No fighting with layout grids. Just describe what you want and watch it appear.
