${inline(item.body)}
` + - `See what to build` + + `${escapeHtml(more)}` + ``; }).join(''); const intro = section.intro ? `${inline(section.intro)}
` : ''; diff --git a/src/content/marketing.css b/src/content/marketing.css index 8f60734..963f8ba 100644 --- a/src/content/marketing.css +++ b/src/content/marketing.css @@ -676,7 +676,7 @@ h3 { .footer-grid { display: grid; - grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr)); + grid-template-columns: 1.3fr repeat(6, minmax(0, 1fr)); gap: 30px; margin-bottom: 40px; } diff --git a/src/content/pages/ai-app-builder.js b/src/content/pages/ai-app-builder.js index dc093a6..d476625 100644 --- a/src/content/pages/ai-app-builder.js +++ b/src/content/pages/ai-app-builder.js @@ -336,5 +336,5 @@ export default { }, ], - related: ['ai-website-builder', 'for', 'what-to-build', 'guides/how-to-build-an-app-with-ai'], + related: ['ai-website-builder', 'use-cases', 'for', 'what-to-build', 'guides/how-to-build-an-app-with-ai'], }; diff --git a/src/content/pages/ai-deck-builder.js b/src/content/pages/ai-deck-builder.js new file mode 100644 index 0000000..2abf76d --- /dev/null +++ b/src/content/pages/ai-deck-builder.js @@ -0,0 +1,362 @@ +import { buildLink, LINKS } from '../site.js'; + +const starterPrompt = 'Build an 8-slide online presentation for a product launch: title, audience problem, product introduction, two benefit slides, a demo slide, pricing, and a closing call to action. Use clearly labeled placeholders for facts I have not supplied. Include keyboard and swipe navigation, fullscreen mode, and a print layout for saving to PDF. Make it readable on a laptop and a phone, ready to publish at a shareable URL.'; + +export default { + slug: 'ai-deck-builder', + parent: 'use-cases', + updated: '2026-09-23', + priority: 0.9, + changefreq: 'weekly', + navLabel: 'AI online deck builder', + + title: 'AI Online Deck Builder - Create & Share Presentations', + description: + 'Build an online deck with AI. Present in your browser, share one URL, and update the same link as your story changes. Print to PDF or download web files. Free to start.', + ogTagline: 'An online deck. One link to present and share.', + + hero: { + eyebrow: 'AI online deck builder', + h1: 'AI online deck builder for presentations you share by link', + lead: + 'Turn your outline into an online presentation with AI. Present in your browser, send the link to your audience, and edit and republish the deck at the same URL whenever your story changes.', + cta: { label: 'Build an online deck', href: buildLink(starterPrompt) }, + secondary: { label: 'How to write the prompt', href: '/guides/how-to-write-a-build-prompt/' }, + note: 'Free with a [Puter](' + LINKS.puter + ') account. Present online, print to PDF, or download web files. No PowerPoint or Google Slides export.', + demo: { + prompt: 'Build a 10-slide online pitch deck for my meal-kit startup, with browser navigation and a traction chart using my numbers', + app: { + name: 'seedround.puter.site', + header: 'Seed round deck', + blocks: [ + { + kind: 'stats', + items: [ + { value: '10', label: 'Slides' }, + { value: '18k', label: 'MRR' }, + { value: '41%', label: 'MoM growth' }, + ], + }, + { + kind: 'bars', + label: 'Weekly signups', + values: [3, 5, 4, 7, 9, 12, 16], + }, + ], + }, + }, + }, + + sections: [ + { + type: 'grid', + id: 'what-you-get', + heading: 'Your presentation, ready for the browser', + intro: + 'Go from an outline to an online deck with a consistent design, editable slides, and one link to present and share.', + items: [ + { + icon: 'layout', + title: 'Writes and designs the slides', + body: + 'Describe the deck, the audience, and the point you need to land. Add your outline, brand colors, logo, and images. Puter AI Builder works out the slide order, writes the copy, and designs a consistent presentation around them.', + }, + { + icon: 'eye', + title: 'Present and share from one URL', + body: + 'Publish the deck and open its link in a browser. Ask for arrow-key and swipe navigation, fullscreen mode, and speaker notes. Your audience can open the same presentation on a laptop, tablet, or phone.', + }, + { + icon: 'chart', + title: 'Live data and interactive slides', + body: + 'Your online slides can include a chart drawn from your own numbers, a pricing calculator, a working product demo, or a poll the room answers. Describe the interaction you want alongside the story.', + }, + { + icon: 'cursor', + title: 'Point at the slide you want changed', + body: + 'Click any heading, chart, or bullet in the live preview and say what to do with it. Adjust spacing, colors, and type on the spot, and those tweaks stay put through later changes.', + }, + { + icon: 'shieldCheck', + title: 'Checks its own work', + body: + 'After every change the builder runs the deck and watches for errors. If a slide breaks, it reads the file, fixes the cause, and verifies again before handing it back. Every version is saved.', + }, + { + icon: 'users', + title: 'Free to build, free to share at any scale', + body: + 'Publishing is free, and anything viewers use, like sign-in or an AI feature on a slide, is covered by their own [Puter](' + LINKS.puter + ') account. If the deck gets passed around, you don\'t get a surprise bill. [How it works](' + LINKS.userPays + ').', + }, + ], + }, + + { + type: 'split', + id: 'last-mile', + heading: 'Edit your online deck. Keep the same share link.', + intro: + 'Refine the copy and design in the preview, then republish when you are ready. The URL you already sent still opens your presentation.', + items: [ + { + title: 'Change exactly the slide you mean', + art: 'picker', + body: [ + 'Click the slide, the chart, or the one bullet that reads wrong in the live preview and say what should be different. No describing which of the twelve slides you mean.', + 'For styling, adjust spacing, colors, and type directly on the element. Those edits are kept in a stylesheet of your own that later changes leave alone.', + ], + }, + { + title: 'Publish updates at the same URL', + art: 'publish', + body: [ + 'Press Publish and the deck is at its own address, served over HTTPS, with nothing to configure. Send the link before the meeting, present from it during the meeting, and leave it up afterwards.', + 'Edit in the builder and publish again whenever the story changes. Anyone opening the same URL gets the updated deck. A private draft link lets a co-founder review changes before you publish them.', + ], + }, + { + title: 'Try a bolder version, keep the safe one', + art: 'history', + body: [ + 'Every change is saved as a version. Ask for a riskier layout or a rewritten narrative, and if it lands worse, go back in a click. Duplicate the project to keep an investor version and a customer version side by side.', + ], + }, + ], + }, + + { + type: 'steps', + id: 'how-to', + heading: 'How to build and share an online deck with AI', + intro: 'Four steps from your outline to an online presentation at its own URL.', + schema: { + name: 'How to build and share an online deck with AI', + description: + 'Create an online presentation from an outline with Puter AI Builder, refine the slides, and publish a link you can present from and update.', + }, + items: [ + { + title: 'Describe your online presentation', + body: + 'Say who it is for, what decision you want at the end, and roughly how many slides. Paste your outline or attach the document the deck should be based on. Add your real numbers, brand colors, logo, and images.', + }, + { + title: 'Watch it build', + body: + 'Puter AI Builder plans the slide order, writes the content, designs the slides, and shows the deck running in a live preview. A first version is usually ready in a couple of minutes.', + }, + { + title: 'Make it yours', + body: + 'Ask for changes in plain language, or click any slide element and say what should be different. Tighten the copy, swap a chart, add speaker notes. Every version is saved, so you can always go back.', + }, + { + title: 'Publish, present, and update', + body: + 'Press Publish to get your presentation URL. Open it in a browser to present, or send it to your audience. After an edit, republish at the same link. You can also print to PDF or download a zip of the web files.', + }, + ], + }, + + { + type: 'prompts', + id: 'starters', + heading: 'Start with an online deck for your next meeting', + intro: + 'Pick a presentation to build, then add your own story, facts, and style. Each one is made to present in a browser and share by link.', + items: [ + { + title: 'Investor pitch deck', + body: 'Problem, solution, market, traction, team, and the ask, with a live traction chart.', + prompt: + 'Build a 12-slide online seed-stage pitch deck for a B2B SaaS startup: problem, solution, product, market size, business model, traction with a line chart I can update from an editable table, competition, team, financial projections, and the ask. Use clearly labeled placeholders for figures I have not supplied. Keyboard and swipe navigation, a fullscreen mode, and a speaker notes panel I can toggle with the N key. Save my edits to my Puter account.', + }, + { + title: 'Sales deck with a pricing calculator', + body: 'A product story that ends on a slide the prospect can play with.', + prompt: + 'Build an online sales deck for a scheduling tool aimed at dental clinics: the problem they have, how the product solves it, placeholders for three real customer stories, and a final slide with an interactive ROI calculator where the prospect enters their number of chairs and monthly no-shows and sees estimated savings from clearly stated assumptions. Clean and confident, easy to read from across a room or from a shared link on a phone.', + }, + { + title: 'Quarterly business review', + body: 'Results, charts, wins, misses, and next quarter, from numbers you paste in.', + prompt: + 'Build an online quarterly business review deck with a title slide, headline numbers, revenue and churn charts drawn from a table of monthly figures I can edit in an admin view, top three wins, top three misses with what we learned, and next quarter priorities. Label missing figures as placeholders. Keep the figures saved to my Puter account so I can update them each quarter and present from the same URL.', + }, + { + title: 'Lecture deck with quiz slides', + body: 'Teaching slides that pause to check the room understood.', + prompt: + 'Build a 15-slide online lecture deck introducing photosynthesis for a first-year biology class, with a diagram slide, a worked example, and three multiple-choice quiz slides that reveal the answer on a click. Add a progress bar along the bottom, arrow-key and swipe navigation, and a printable handout view that puts two slides per page for browser PDF printing.', + }, + { + title: 'Conference talk with a timer', + body: 'Speaker notes, a visible clock, and a link the audience keeps.', + prompt: + 'Build an online deck for a 25-minute conference talk about remote team rituals that I will present from my browser: a bold title slide, section dividers, mostly one idea per slide with large type, a closing slide with my contact details and a QR code to this deck\'s URL. Include speaker notes that show only on my screen, an elapsed-time clock in the corner, and keyboard shortcuts for next, previous, and blackout.', + }, + { + title: 'Agency credentials deck', + body: 'Who you are, what you have done, and how to hire you, at a link you send prospects.', + prompt: + 'Build an online credentials deck for a small design agency: who we are, our process in four steps, six case studies each with a before-and-after image pair and one result metric, client logos, services and starting prices, and a contact slide with a short inquiry form that saves submissions to my Puter account. Use labeled placeholders for images, clients, and results I have not supplied. Sophisticated and image-led, readable on a phone when a prospect opens the link.', + }, + ], + }, + + { + type: 'grid', + id: 'beyond-slides', + columns: 2, + heading: 'An online presentation your audience can interact with', + intro: + 'Your deck runs as a web app on [Puter](' + LINKS.puter + '). Add a calculator, a live chart, or a product demo when it helps explain the story, and let your audience try it from the presentation link.', + items: [ + { + icon: 'chart', + title: 'Numbers that are current when you present', + body: + 'Charts drawn from a table you edit, a dashboard slide that reads from your data, a calculator the audience drives themselves. Store the figures in your Puter account and update them before each meeting instead of re-exporting a file. Storage, accounts, and a database come with every deck ([how it works](' + LINKS.userPays + ')).', + }, + { + icon: 'sparkles', + title: 'AI on the slide, if you want it', + body: + 'A slide that answers questions about your product in your voice, a live demo of the AI feature you are pitching, a summary generated from what the room typed in. The deck can use chat, vision, and image models directly through Puter, with no API keys to manage and no AI bill for you to carry.', + }, + ], + }, + + { + type: 'faq', + id: 'faq', + heading: 'AI online deck builder FAQ', + items: [ + { + q: 'What is an AI online deck builder?', + a: [ + 'An AI online deck builder turns your outline or plain-language description into a presentation you can open in a browser. Describe the audience, the story, and the point you need to land, and Puter AI Builder plans the slide order, writes the copy, and designs the slides.', + 'Publish the deck to get a URL for presenting and sharing. Edit it in the builder and republish whenever it changes; the same link opens the updated presentation. You can also print to PDF or download the deck as web files.', + 'You don\'t need to know how to code or design. You refine the deck the same way you started, by asking for changes or clicking the slide you want changed, then publish it in one click.', + ], + }, + { + q: 'Is the online deck builder free?', + a: [ + 'Yes. Building, publishing, and presenting are free with a [Puter](' + LINKS.puter + ') account, and no card is required. There is no watermark on the deck and no cap on how many people can open the link. Very heavy use can hit the free tier\'s limits, at which point you can upgrade your account; ordinary building and iterating do not.', + ], + }, + { + q: 'How long does it take to build a deck?', + a: [ + 'A first version usually lands in a couple of minutes. Getting it exactly right is a conversation, and most decks are finished in a handful of changes: tighten this slide, swap that chart, cut the two that drag. Every version is saved, so you can stop and pick it up before the meeting.', + ], + }, + { + q: 'Can I customize the generated deck?', + a: [ + 'Yes, all of it. Describe the look you want up front, from colors and fonts to mood, and attach your logo and images so the deck is built around them. Afterwards, click any element in the preview and say what should be different, or adjust spacing, colors, and type directly on it. There is no template underneath limiting what can change.', + ], + }, + { + q: 'Can I export to PowerPoint, Keynote, or Google Slides?', + a: [ + 'There is no PowerPoint, Keynote, or Google Slides export. Puter AI Builder creates an online presentation made of web files. Present from its URL, use your browser\'s Print option to save a PDF, or download a zip of the complete web project.', + 'Choose this workflow when you can present from a browser or share a link. If a client or conference requires an editable .pptx, .key, or Google Slides deck, you will need a tool that produces that format.', + ], + }, + { + q: 'Can I update the online deck after sharing its link?', + a: [ + 'Yes. Open the project in Puter AI Builder, describe your changes, and review them in the preview. Press Publish again to update the presentation at the same URL. Anyone opening that link gets the latest published version, so you do not need to send another address.', + 'A PDF or downloaded zip is a snapshot of the deck when you saved it. Print or download it again if you need a file with the latest changes.', + ], + }, + { + q: 'How do I present an online deck?', + a: [ + 'Open the link in a browser, press the fullscreen key, and use the arrow keys, a clicker, or swipes to move through the slides. Ask for speaker notes and you get a notes panel you toggle with a key on your own screen. Because it is a web page, the same link works on a laptop, a tablet, and a phone.', + 'If you want to present with no network at all, export the zip beforehand. The deck runs straight off your disk with no build step.', + ], + }, + { + q: 'What slides should be in a pitch deck?', + a: [ + 'The investor-standard order is problem, solution, product, market, business model, traction, competition, team, financials, and the ask, in ten to fourteen slides. Ask for a pitch deck and Puter AI Builder follows that structure by default, then reorders or drops slides when you tell it what your story actually needs.', + ], + }, + { + q: 'Can the AI write my financial projections and market numbers?', + a: [ + 'It can lay them out and chart them, and it will fill gaps with plausible-looking figures if you let it. Don\'t. Every AI deck tool is prone to invented statistics, and an investor will find them. Give it your real numbers, or a range you can defend, and ask it to mark anything it assumed so you can replace it before the meeting.', + 'The advantage of a web deck is that the numbers can live in a table you edit rather than in a dozen text boxes, so updating them next quarter is one change, not a redesign.', + ], + }, + { + q: 'Is it good enough for real investor presentations?', + a: [ + 'The structure, the design, and the mechanics are. The content is only as good as what you put in: a three-sentence prompt gets you a competent generic deck, while your notes, your numbers, and a clear ask get you a deck that sounds like you. Read every slide before you present it, the same as you would with any tool.', + ], + }, + { + q: 'Do I need design skills?', + a: [ + 'No. Layout, type, spacing, and color are handled for you and kept consistent across every slide. If something looks off, click it and say so, or adjust it directly. The one skill that matters is knowing what you want the room to decide at the end, and that was always your job.', + ], + }, + { + q: 'What happens when the AI gets a slide wrong?', + a: [ + 'Runtime errors are caught before you see them: after each change Puter AI Builder reloads the deck, watches for anything that breaks, and sends it back to the AI to fix and re-verify.', + 'For everything else, click the offending slide element and describe the fix in a sentence. If a change made the whole deck worse, version history restores the earlier one in a click.', + ], + }, + { + q: 'Who can see my deck, and is my data safe?', + a: [ + 'Nothing is public until you press Publish, and unpublishing is just as immediate. Before that, a private draft link lets one person review the work in progress without making it public. If you want to restrict a published deck, ask for a sign-in gate so viewers have to sign in with a [Puter](' + LINKS.puter + ') account before the slides load.', + 'Anything the deck stores, like figures behind a chart or answers to a poll slide, lives under each person\'s own Puter account, so viewers only ever touch their own data.', + ], + }, + { + q: 'Can my team build the deck together?', + a: [ + 'Each project belongs to one Puter account, so building happens from one account at a time. Share the private draft link for review and comments in whatever channel your team already uses, then fold the feedback in yourself. The published deck can be fully multi-user if you need it to be, for example a poll or Q&A slide the audience fills in.', + ], + }, + { + q: 'Do I own the deck?', + a: [ + 'Yes. The design, the content, and the files are yours, with no license to renew and no export wall. The deck is a normal folder of HTML, CSS, and JavaScript with no proprietary format, so you can download it as a zip at any time, host it on your own domain, or hand it to a designer to keep working on in an ordinary editor.', + ], + }, + { + q: 'How much does it cost to share the deck widely?', + a: [ + 'Nothing. Hosting is included, and anything viewers use, like sign-in or an AI feature on a slide, is covered by their own [Puter](' + LINKS.puter + ') account. If the link gets forwarded a thousand times, you don\'t get a surprise bill. [How it works](' + LINKS.userPays + ').', + ], + }, + { + q: 'When should I choose an online presentation?', + a: [ + 'An online deck fits meetings you present from your own browser, sales decks you send to prospects, teaching slides your class revisits, and updates that should stay available at one URL. It also gives your audience a place to try a calculator, chart, or demo inside the presentation.', + 'Puter AI Builder creates HTML, CSS, and JavaScript files you can download and host elsewhere. Use the published link for the current deck and browser PDF printing for a static copy. For a workflow that requires editing in PowerPoint, Keynote, or Google Slides, choose a tool with native slide-file export.', + ], + }, + ], + }, + + { + type: 'cta', + heading: 'Build your online deck. Share one link.', + body: 'Turn your outline into a browser presentation with AI, then edit and republish at the same URL. Free to start, hosting included.', + label: 'Build an online deck', + href: buildLink(starterPrompt), + }, + ], + + related: ['use-cases', 'ai-app-builder', 'ai-website-builder', 'guides/how-to-write-a-build-prompt'], +}; diff --git a/src/content/pages/ai-form-builder.js b/src/content/pages/ai-form-builder.js new file mode 100644 index 0000000..a8201ce --- /dev/null +++ b/src/content/pages/ai-form-builder.js @@ -0,0 +1,346 @@ +import { buildLink, LINKS } from '../site.js'; + +export default { + slug: 'ai-form-builder', + parent: 'use-cases', + updated: '2026-09-23', + priority: 0.9, + changefreq: 'weekly', + navLabel: 'AI form builder', + + title: 'AI Form Builder - Free forms, surveys, and quizzes with AI', + description: + 'Build a form with AI, no coding required. Describe it, get a working form that saves every submission to your Puter account, and publish it for free.', + ogTagline: 'Describe the form. Collect the responses.', + + hero: { + eyebrow: 'AI form builder', + h1: 'AI form builder that collects real responses', + lead: + 'Build a form with AI without writing a line of code. Puter AI Builder turns your description into a working form, with submissions saved to your account and a private view to read them.', + cta: { label: 'Start building', href: '/' }, + secondary: { label: 'How to write a build prompt', href: '/guides/how-to-write-a-build-prompt/' }, + note: 'Free with a [Puter](' + LINKS.puter + ') account. Runs in any modern browser, including on a phone.', + demo: { + prompt: 'Build a client intake form for my studio with a private page where I can read every submission', + app: { + name: 'intake.puter.site', + header: 'Submissions', + blocks: [ + { + kind: 'stats', + items: [ + { value: '23', label: 'This week' }, + { value: '91%', label: 'Completed' }, + { value: '4', label: 'Unread' }, + ], + }, + { + kind: 'list', + rows: [ + { title: 'Maya Chen', sub: 'Brand refresh · Tue 09:14', tag: 'New' }, + { title: 'Tom Okafor', sub: 'Product photos · Mon 16:40', tag: 'Read' }, + { title: 'Lena Ruiz', sub: 'Event coverage · Mon 11:02', tag: 'Replied' }, + ], + }, + ], + }, + }, + }, + + sections: [ + { + type: 'grid', + id: 'what-you-get', + heading: 'What you get', + intro: + 'Everything you need to go from a description to a form that is live and collecting responses.', + items: [ + { + icon: 'wand', + title: 'Writes the form from a description', + body: + 'Say what the form is for and Puter AI Builder writes the fields, labels, validation, error messages, and thank-you state, with multi-step layouts and conditional questions when you ask for them.', + }, + { + icon: 'database', + title: 'Submissions saved, nothing to set up', + body: + 'Every response is stored in your [Puter](' + LINKS.puter + ') account the moment it is sent. No spreadsheet to connect, no database to create, and no third-party form service holding your data.', + }, + { + icon: 'shieldCheck', + title: 'Checks and fixes its own work', + body: + 'After every change the builder runs the form and watches for errors. If a field breaks or a submit fails, it reads the file, fixes the cause, and verifies again before handing it back to you.', + }, + { + icon: 'cursor', + title: 'Point at the field you want changed', + body: + 'Click any field, label, or button in the live preview and say what to do with it. Precise edits to the exact question you mean, without describing where it is.', + }, + { + icon: 'globe', + title: 'Publish in one click, free hosting included', + body: + 'Your form goes live at its own link the moment you want it, ready to share anywhere a link goes. Change it later and the update is live instantly.', + }, + { + icon: 'users', + title: 'No per-response pricing', + body: + 'Hosting is included, and there is no plan that meters your forms or your responses. Anything visitors use, like sign-in or AI features, is covered by their own [Puter](' + LINKS.puter + ') account. [How it works](' + LINKS.userPays + ').', + }, + ], + }, + + { + type: 'split', + id: 'last-mile', + heading: 'A form that collects, not just a form that looks right', + intro: + 'Most form generators stop at the layout and leave the response handling to someone else. These three things are why the form you get here actually works end to end.', + items: [ + { + title: 'Responses land in your account', + art: 'backend', + body: [ + 'Submissions are saved to storage you own on [Puter](' + LINKS.puter + '), and the builder makes a private admin view alongside the form where you can read, search, and export them as CSV.', + 'For a public form that anyone can fill in without signing in, Puter AI Builder can deploy a serverless worker from the same conversation to collect the responses, so shared collection works without a server of your own.', + ], + }, + { + title: 'Errors get fixed before you see them', + art: 'verify', + body: [ + 'Every change is run and checked before it comes back to you. If validation breaks or a submit stops saving, Puter AI Builder fixes it and checks again.', + 'You spend your time on what the form should ask, not on why the submit button stopped working.', + ], + }, + { + title: 'Change exactly what you mean', + art: 'picker', + body: [ + 'Click a field in the live preview and say what you want changed: make it required, turn it into a dropdown, move it to step two. No describing where things are.', + 'Every change is saved as a version, so if a rewrite makes the form worse, go back to the previous one in a click and try again.', + ], + }, + ], + }, + + { + type: 'steps', + id: 'how-to', + heading: 'How to build a form with AI', + intro: 'Four steps from a description to a form that is collecting responses.', + schema: { + name: 'How to build a form with AI', + description: + 'Build and publish a working online form that saves submissions from a plain-English description using the AI form builder at builder.puter.com.', + }, + items: [ + { + title: 'Describe the form', + body: + 'Say what it is for, who fills it in, and the questions you know you need. Mention anything special: required fields, file uploads, multiple steps, a thank-you message. The more specific you are, the closer the first version will be.', + }, + { + title: 'Watch it build', + body: + 'Puter AI Builder writes the form, wires up saving to your account, runs it, and checks that a submission goes through. A first version is usually ready in a couple of minutes.', + }, + { + title: 'Refine by talking, or by pointing', + body: + 'Ask for the next change in plain language, or click any field in the preview and say what should be different. Every version is saved, so you can always go back.', + }, + { + title: 'Publish and share the link', + body: + 'Press Publish to get a public link. Responses show up in your private admin view as they arrive, and you can export the form itself whenever you like.', + }, + ], + }, + + { + type: 'prompts', + id: 'starters', + heading: 'Not sure where to start? Try one of these', + intro: + 'Pick one and Puter AI Builder makes it for you. Then make it yours by describing what to change.', + items: [ + { + title: 'Contact form', + body: 'Name, email, message, and an inbox you can actually read.', + prompt: + 'Build a contact form with name, email, subject, and message fields, inline validation, and a friendly thank-you state after sending. Save every submission to my Puter account and give me a private inbox page where I can read messages, mark them as handled, and export everything as CSV.', + }, + { + title: 'Client intake form', + body: 'A multi-step questionnaire for new clients, with a file upload.', + prompt: + 'Build a three-step client intake form for a design studio: contact details, then project goals and budget range, then a file upload for a brief or reference images. Show a progress bar, validate each step before moving on, save submissions and uploaded files to my Puter account, and give me an admin page to review each client.', + }, + { + title: 'Event registration', + body: 'Ticket types, dietary needs, and a live headcount.', + prompt: + 'Build an event registration form with name, email, ticket type (general, student, speaker), dietary requirements, and a plus-one option that reveals extra fields when checked. Save registrations to my Puter account and add a private dashboard showing total headcount, a breakdown by ticket type, and a CSV export.', + }, + { + title: 'Customer feedback survey', + body: 'Ratings, open answers, and a results page with charts.', + prompt: + 'Build a customer feedback survey with a 1 to 5 star rating for three areas, a net promoter score question, and two open text answers. Save responses to my Puter account and create a private results page with average scores per area, a bar chart of the NPS distribution, and a button that uses AI to summarize the open answers into themes.', + }, + { + title: 'Quiz with scoring', + body: 'Multiple choice, instant results, and a leaderboard.', + prompt: + 'Build a ten-question multiple-choice quiz about world geography with one question per screen, instant feedback after each answer, a final score with a shareable result, and a leaderboard. Save each attempt to my Puter account so the leaderboard persists, and let me edit the questions from a private admin page.', + }, + { + title: 'Job application form', + body: 'Resume upload, screening questions, and a review board.', + prompt: + 'Build a job application form with contact details, a resume upload, a portfolio link, three short screening questions, and a consent checkbox. Save applications and resumes to my Puter account and give me a private review board where I can move applicants between New, Shortlisted, and Rejected columns and add notes.', + }, + ], + }, + + { + type: 'grid', + id: 'beyond-the-form', + columns: 2, + heading: 'More than a form', + intro: + 'A form built here is a small app, so it can do anything an app can do. Everything it uses runs on [Puter](' + LINKS.puter + '), with the backend already there.', + items: [ + { + icon: 'sliders', + title: 'Logic, files, and multiple steps', + body: + 'Conditional questions that appear based on earlier answers, running totals and calculated fields, file uploads that are stored with the response, multi-page flows with a progress bar, and per-field validation. Ask for it in plain language and it is written into the form.', + }, + { + icon: 'chart', + title: 'Read responses your way', + body: + 'The private admin view is built to your description: a table with search and filters, a card per response, a chart of results, a CSV export button. Because the form can use AI models through Puter, it can also summarize open answers or tag responses for you, with no API keys to manage.', + }, + ], + }, + + { + type: 'faq', + id: 'faq', + heading: 'AI form builder FAQ', + items: [ + { + q: 'What is an AI form builder?', + a: [ + 'An AI form builder turns a plain-language description into a working online form. You say what the form is for and what it needs to ask, and the AI writes the questions, the field types, the validation, and the design, then shows you the result so you can try it right away.', + 'You don\'t need to know how to code. With Puter AI Builder you refine the form the same way you started, by asking for changes or clicking the field you want changed, and the form saves its submissions to your account from the first version. Hosting and storage are included, so there is nothing to connect or maintain yourself.', + 'Compared with a traditional form service, the difference is what you end up with: a normal set of web files you own, rather than a form living inside someone else\'s dashboard on a plan that meters your responses.', + ], + }, + { + q: 'How do I create a form with AI?', + a: [ + 'Describe the form in a sentence or two, watch Puter AI Builder write and run it in the live preview, make it yours by asking for changes or pointing at the field that should be different, then press Publish to get a link. The four steps above walk through each one.', + 'If you already have the questions, paste them into the chat, or attach the PDF or document they live in, and ask for them to be turned into a form.', + ], + }, + { + q: 'What types of forms can I build?', + a: [ + 'Contact forms, sign-up and waitlist forms, registration forms, intake questionnaires, order and booking requests, surveys, feedback forms, quizzes with scoring, applications with file uploads, and internal forms for a team. Anything that asks questions and needs the answers kept is a natural fit.', + 'Because the form is a small app rather than a widget, it can also be the front door to something bigger: an intake form that feeds a client list, a survey with a results dashboard, a quiz with a persistent leaderboard, or an application form with a review board. If you want to build on the data you collect, you can do it in the same project.', + ], + }, + { + q: 'Where do the submissions go, and how do I see responses?', + a: [ + 'Submissions are saved to your [Puter](' + LINKS.puter + ') account, in storage you own. Alongside the form, Puter AI Builder builds a private admin view where you can read responses, search and filter them, and export them as CSV. Describe the view you want and it is built that way.', + 'For a public form that anyone can fill in without an account, the builder can deploy a serverless worker from the same conversation to collect the responses. There is no separate form-service dashboard to log into: the admin view is part of the project and lives at a private link.', + ], + }, + { + q: 'Is Puter AI Builder free to use?', + a: [ + 'Yes. Building and publishing are free with a [Puter](' + LINKS.puter + ') account, and no card is required. Open Puter AI Builder, describe a form, and try it in the preview right away. Nothing is public until you decide to publish.', + 'There is no per-form or per-response plan. Very heavy use can hit the free tier\'s storage limits, at which point you can upgrade your Puter account; ordinary forms, surveys, and response volumes do not.', + ], + }, + { + q: 'How much does it cost to run a form?', + a: [ + 'Nothing to keep it online. Hosting is included, and anything visitors use, like sign-in or AI features, is covered by their own [Puter](' + LINKS.puter + ') account. If a form takes off, you don\'t get a surprise bill. [How it works](' + LINKS.userPays + ').', + ], + }, + { + q: 'Can I customize the design and branding?', + a: [ + 'Yes, all of it. Describe the look you want, attach your logo, and the form is designed that way from the start. Afterwards, click any element in the preview and say what should be different, or adjust spacing, colors, and type directly on it. There is no theme underneath limiting what can change, and no plan tier that unlocks removing someone else\'s branding.', + ], + }, + { + q: 'Can I add conditional logic, calculations, and multi-page forms?', + a: [ + 'Yes. Ask for questions that appear only after a particular answer, fields that calculate a total, steps with a progress bar, or a summary page before submitting, and it is written into the form. If a rule turns out wrong, say so in a sentence or click the field and describe the fix.', + ], + }, + { + q: 'Can I create a quiz or survey with AI?', + a: [ + 'Yes. A quiz can score answers, show feedback per question, and keep a leaderboard. A survey can use ratings, scales, and open answers, and come with a results page that charts the responses. Because the form can use AI models through Puter, it can also summarize open answers into themes for you.', + ], + }, + { + q: 'Will my form work on phones?', + a: [ + 'Yes. Forms are written responsively by default, and you can resize the preview to check them at any width. If a step reads badly on a small screen, say so and it gets fixed for that width specifically.', + ], + }, + { + q: 'Can I accept payments in my form?', + a: [ + 'Puter AI Builder does not process payments and has no native payment field. The usual approach is to collect the order or booking details in the form and then send people to a payment provider you already use, such as a checkout page or a payment link. The form handles everything around it: the questions, the confirmation, and the record of who asked for what.', + ], + }, + { + q: 'Are AI-generated forms accurate enough, and what happens when the AI gets it wrong?', + a: [ + 'The first version is a strong draft rather than a finished product, and the fastest way to treat it is as one. Read through the questions, fill the form in yourself in the preview, and check that a submission shows up in the admin view.', + 'Most runtime errors are caught before you see them: Puter AI Builder reloads the preview after each change, watches for errors, and sends them back to the AI to fix and re-verify. For everything else, tell it what is wrong in one sentence, or click the field and describe the fix. If a change made things worse overall, version history lets you restore an earlier snapshot and take a different run at it.', + ], + }, + { + q: 'Is my data safe? Is it HIPAA compliant?', + a: [ + 'Published forms are served over HTTPS, and submissions are stored under your own [Puter](' + LINKS.puter + ') account rather than in a third-party form service. There is no server of your own to patch or keep updated.', + 'Puter AI Builder does not claim HIPAA compliance or any other regulatory certification, and code you did not write is still code you are responsible for. For health information, financial details, or other sensitive personal data, review what was built and treat the AI as a fast first draft rather than a compliance review.', + ], + }, + { + q: 'Do I own the form? Can I put it on my own site or domain?', + a: [ + 'Yes. The form, the design, and every response are yours. There is no license to renew and no export wall. Keep it on [Puter](' + LINKS.puter + ') or take it somewhere else at any time.', + 'The project is a normal set of HTML, CSS, and JavaScript files with no build step, so you can download it as a zip and host it wherever your domain points. To keep it on Puter under your own domain, put your domain in front of the published link with your DNS provider\'s redirect or proxy tools.', + ], + }, + ], + }, + + { + type: 'cta', + heading: 'Turn your questions into a working form', + body: 'Build it with AI, no coding required. Free to start, hosting and response storage included.', + label: 'Start building', + href: buildLink(''), + }, + ], + + related: ['use-cases', 'ai-app-builder', 'ai-website-builder', 'guides/how-to-write-a-build-prompt'], +}; diff --git a/src/content/pages/ai-game-builder.js b/src/content/pages/ai-game-builder.js new file mode 100644 index 0000000..8346fd5 --- /dev/null +++ b/src/content/pages/ai-game-builder.js @@ -0,0 +1,353 @@ +import { buildLink, LINKS } from '../site.js'; + +export default { + slug: 'ai-game-builder', + parent: 'use-cases', + updated: '2026-09-23', + priority: 0.9, + changefreq: 'weekly', + navLabel: 'AI game builder', + + title: 'AI Game Builder - Make playable browser games for free', + description: + 'Build a game with AI, no coding required. Describe it, play it in the live preview, and publish a link anyone can play on a phone or desktop. Free to start.', + ogTagline: 'From a sentence to a playable game', + + hero: { + eyebrow: 'AI game builder', + h1: 'AI game builder that hands you a playable game', + lead: + 'Make a game with AI without writing a line of code. Puter AI Builder turns your idea into a browser game you can play right away and share with a link.', + cta: { label: 'Start building', href: '/' }, + secondary: { label: 'See what to build', href: '/what-to-build/' }, + note: 'Free with a [Puter](' + LINKS.puter + ') account. Runs in any modern browser, including on a phone.', + demo: { + prompt: 'Build an endless runner where a fox dodges obstacles, with a high score board', + app: { + name: 'foxdash.puter.site', + header: 'Fox Dash', + blocks: [ + { + kind: 'stats', + items: [ + { value: '1,240', label: 'Best run' }, + { value: '38', label: 'Players today' }, + { value: '312', label: 'Coins banked' }, + ], + }, + { + kind: 'list', + rows: [ + { title: 'Maya', sub: 'Run 14 · 1,240 m', tag: 'Top' }, + { title: 'Jonah', sub: 'Run 6 · 980 m', tag: 'New' }, + { title: 'Priya', sub: 'Run 22 · 870 m', tag: '3rd' }, + ], + }, + ], + }, + }, + }, + + sections: [ + { + type: 'grid', + id: 'what-you-get', + heading: 'What you get', + intro: + 'Everything you need to go from an idea to a game people can play.', + items: [ + { + icon: 'wand', + title: 'Writes the whole game', + body: + 'Describe the game and Puter AI Builder writes it: the mechanics, controls, scoring, a title screen, a game-over screen, and a restart. It runs in the live preview the moment it is written, so you play it instead of reading about it.', + }, + { + icon: 'shieldCheck', + title: 'Catches its own bugs', + body: + 'After every change the builder runs the game and watches for errors. If something breaks, it reads the file, fixes the cause, and verifies again before handing it back to you.', + }, + { + icon: 'cursor', + title: 'Point at what you want changed', + body: + 'Click the score counter, a button, or the player sprite in the live preview and say what to do with it. Precise edits to the exact thing you mean, without describing where it is.', + }, + { + icon: 'phone', + title: 'Playable on any phone from a link', + body: + 'Games work on phones, tablets, and desktops from the same link, with touch and keyboard controls as you ask for them. Anyone can add the game to their home screen and launch it full screen like a native app.', + }, + { + icon: 'database', + title: 'Saves, leaderboards, and multiplayer included', + body: + 'A backend comes with every game. Player accounts, saved progress, shared high-score tables, and peer-to-peer multiplayer are available from the moment the game exists, with nothing to set up.', + }, + { + icon: 'users', + title: 'Free to run at any scale', + body: + 'Hosting is included, and anything players use, like saves or AI features, is covered by their own [Puter](' + LINKS.puter + ') account. If your game goes viral, you don\'t get a surprise bill. [How it works](' + LINKS.userPays + ').', + }, + ], + }, + + { + type: 'split', + id: 'last-mile', + heading: 'A game that runs, not a demo that almost does', + intro: + 'The first version of a game is the easy part. Getting it to feel right, and keeping it working while you change things, is where the time goes. These three things get you there faster.', + items: [ + { + title: 'Errors get fixed before you see them', + art: 'verify', + body: [ + 'Every change is run and checked before it comes back to you. A collision that throws, a loop that stalls, a screen that never appears: Puter AI Builder sees the error, fixes it, and checks again.', + 'You spend your time on whether the game is fun, not on why it stopped working.', + ], + }, + { + title: 'Try a mechanic, undo it if it isn\'t fun', + art: 'history', + body: [ + 'Tuning a game means trying things: faster enemies, a double jump, a shorter timer. Every change is saved as a version, so you can try anything and go back in a click if it made the game worse.', + 'Nothing is spent on a failed attempt except the minute it took, and no version is ever lost.', + ], + }, + { + title: 'Your game is real web files', + art: 'files', + body: [ + 'What comes out is standard HTML, CSS, and JavaScript. Download the whole project as a zip and it runs on any static host, or straight off your disk.', + 'There is no proprietary runtime and no export wall, so the game is never stuck inside the tool that made it.', + ], + }, + ], + }, + + { + type: 'steps', + id: 'how-to', + heading: 'How to build a game with AI', + intro: 'Four steps from an idea to a game people can play.', + schema: { + name: 'How to build a game with AI', + description: + 'Build and publish a playable browser game from a plain-English description using the AI game builder at builder.puter.com.', + }, + items: [ + { + title: 'Describe the game', + body: + 'A sentence or two is enough: the genre, how the player moves, how they score, and how they lose. The more specific you are about the feel you want, the closer the first version will be.', + }, + { + title: 'Play it', + body: + 'Puter AI Builder writes the game, runs it, and checks that it works. A first playable version is usually ready in a couple of minutes, in the preview beside the chat.', + }, + { + title: 'Tune it by talking, or by pointing', + body: + 'Ask for the next change in plain language: harder levels, a power-up, a different look. Or click any element in the preview and say what should be different. Every version is saved, so you can always go back.', + }, + { + title: 'Publish it', + body: + 'Press Publish to get a public link anyone can play on a phone or a desktop. You can also export the game and take it anywhere.', + }, + ], + }, + + { + type: 'prompts', + id: 'starters', + heading: 'Not sure where to start? Try one of these', + intro: + 'Pick one and Puter AI Builder makes it for you. Then make it yours by describing what to change.', + items: [ + { + title: 'Endless runner', + body: 'One-tap jumping, rising speed, and a high score that sticks.', + prompt: + 'Build an endless runner where a fox runs across a scrolling forest, jumps with a tap or the space bar, dodges rocks and logs, and collects coins. Speed up gradually, show the distance and coin count during the run, and save my best run to my Puter account so it survives between visits.', + }, + { + title: 'Daily word puzzle', + body: 'A five-letter guessing game with streaks and a share button.', + prompt: + 'Build a daily word puzzle where I guess a five-letter word in six tries and each letter turns green, yellow, or gray. Use the same word for everyone on a given day, keep an on-screen keyboard that reflects what I have learned, save my streak and stats to my Puter account, and add a share button that copies my result as emoji squares.', + }, + { + title: 'Two-player pong', + body: 'Play a friend on another device over a link.', + prompt: + 'Build a two-player pong game where I create a room, share a link, and a friend on their own device joins to play against me in real time using Puter\'s peer-to-peer API. Add a first-to-seven scoreboard, a rematch button, and touch controls so it works on phones as well as with the keyboard.', + }, + { + title: 'AI trivia quiz', + body: 'Fresh questions on any topic, generated as you play.', + prompt: + 'Build a trivia quiz where I type a topic and the game uses AI to generate ten multiple-choice questions about it, one at a time, with a 15-second timer per question, instant feedback, and a final score screen. Save my past topics and scores to my Puter account so I can see how I improve.', + }, + { + title: 'Idle bakery', + body: 'A clicker with upgrades and progress that keeps going.', + prompt: + 'Build an idle clicker game where I tap to bake bread, earn coins, and buy upgrades like ovens and bakers that produce automatically. Show income per second, make upgrade prices rise each purchase, add a prestige reset that grants a permanent multiplier, and save my progress to my Puter account so the bakery is exactly where I left it.', + }, + { + title: 'Arcade with a leaderboard', + body: 'Breakout-style bricks and a global top-ten everyone shares.', + prompt: + 'Build a breakout game with a paddle, a ball, and rows of colored bricks worth different points, with a few power-ups like a wider paddle and a multi-ball. Add three levels of increasing difficulty and a global top-ten leaderboard stored in a Puter serverless worker so every player sees the same scores, entering a name when they make the list.', + }, + ], + }, + + { + type: 'grid', + id: 'beyond-single-player', + columns: 2, + heading: 'More than a single-player toy', + intro: + 'Most AI game makers stop at a share link. Every game built with Puter AI Builder runs on [Puter](' + LINKS.puter + '), so the backend is already there and your game can grow the moment you want it to.', + items: [ + { + icon: 'users', + title: 'Saves, leaderboards, and multiplayer', + body: + 'Players sign in with their own Puter account and their progress is stored under it, so a save is never lost. A shared high-score table can live in a serverless worker so everyone sees the same list, and real-time head-to-head play uses Puter\'s peer-to-peer API with no game server for you to run. Anything players use is covered by their own account ([how it works](' + LINKS.userPays + ')).', + }, + { + icon: 'sparkles', + title: 'AI inside the game', + body: + 'A character that talks back, a quiz that writes its own questions, a level description that changes every run, a background or sprite generated from a prompt. Your game can use chat, vision, and image models directly through Puter, with no API keys to manage and no AI bill for you to carry.', + }, + ], + }, + + { + type: 'faq', + id: 'faq', + heading: 'AI game builder FAQ', + items: [ + { + q: 'What is an AI game builder, and how does it work?', + a: [ + 'An AI game builder turns a plain-language description into a playable game. You say what the game is, how the player moves, how they score, and how they lose, and the AI writes the code, runs it, and shows it to you so you can play it right away.', + 'You don\'t need to know how to code. Every step, from the first description to publishing, works in plain English, and you tune the game the same way, by asking for changes or clicking the part you want changed. Hosting, player accounts, and saved data are included, so there is nothing to set up or maintain.', + 'Games built with Puter AI Builder are browser games: standard HTML, CSS, and JavaScript that run on any phone or desktop from a link. That makes them easy to share and easy to take with you, and it also sets the boundary of what the tool is for. It is not a replacement for a 3D engine or a console pipeline.', + ], + }, + { + q: 'Do I need to know how to code?', + a: [ + 'No. You describe the game and refine it in plain language. If you can code, you are free to read the files and edit them, and the builder will keep working alongside your changes, but nothing requires it.', + ], + }, + { + q: 'What kinds of games can I make?', + a: [ + 'Anything that runs well in a browser: arcade games, platformers, puzzle games, word and number games, quizzes and trivia, card and board games, idle and clicker games, text adventures, visual novels, and quick party games you play with friends on the same screen or over a link.', + 'Because a backend is included, those games can also have accounts, saved progress, shared leaderboards, AI-driven characters, and real-time multiplayer without any server of your own.', + ], + }, + { + q: 'Can AI really make a full game from a prompt?', + a: [ + 'It makes a complete, playable game from a prompt: mechanics, controls, scoring, screens, and a restart, usually in a couple of minutes. Whether that first version is fun is a different question, and it is the one you are there for. Treat the first build as a strong draft, then tune it: speed, difficulty, feel, and look, one change at a time.', + 'Puter AI Builder is made for that loop. Every change is run and checked before you see it, every version is saved so a bad idea costs nothing to undo, and you can point at the exact thing you want changed instead of describing it.', + ], + }, + { + q: 'Is it free to use?', + a: [ + 'Yes. Building and publishing are free with a [Puter](' + LINKS.puter + ') account, and no card is required. Open Puter AI Builder, describe a game, and play it in the preview right away. Nothing is public until you decide to publish.', + 'There is no credit meter that a failed attempt eats into. Very heavy use can hit the free tier\'s limits, at which point you can upgrade your Puter account. Ordinary building, tuning, and publishing do not.', + ], + }, + { + q: 'How much does it cost to run the game once people are playing it?', + a: [ + 'Nothing. Hosting is included, and anything players use, like saved progress or AI features, is covered by their own [Puter](' + LINKS.puter + ') account. If your game goes viral, you don\'t get a surprise bill. [How it works](' + LINKS.userPays + ').', + ], + }, + { + q: 'Can I make money with my games?', + a: [ + 'Yes. The game is yours, and there is no commission and no commercial-rights tier to unlock. Puter AI Builder does not process payments itself, so the usual approach is to link to a payment provider you already use, such as a checkout page or a payment link, and let the game handle everything around it: sign-in, unlocked content, and per-player data. Ads and sponsorships work the way they would on any web page you own.', + ], + }, + { + q: 'Do I own the games I make? Can I export them?', + a: [ + 'Yes. The code, the design, and everything you publish are yours. There is no license to renew and no export wall. Keep the game on [Puter](' + LINKS.puter + ') or take it somewhere else at any time.', + 'The project is a normal folder of files, and you can download the whole thing as a zip whenever you like. Because the output is standard HTML, CSS, and JavaScript with no build step, it runs on any static host or straight off your disk, and a developer can keep working on it in an ordinary editor.', + ], + }, + { + q: 'Can it make 3D games, or Unity and Unreal projects?', + a: [ + 'No. Puter AI Builder produces browser games built with standard web technology, which is a natural fit for 2D games and interface-driven games and a poor fit for a full 3D production. It does not produce Unity, Unreal, or Godot projects, console builds, or anything that needs a game engine\'s editor. If you are shipping to Steam or a console, a game engine with an AI assistant is the right tool, and this one is not.', + ], + }, + { + q: 'Does it generate art and sound?', + a: [ + 'Partly. Your game can use Puter\'s image generation models, so a background, an icon, or a sprite can be generated from a prompt, and the builder can draw simple shapes and animations directly in code. You can also attach your own images and a logo in the chat and they are saved into the project.', + 'It does not generate music or sound effect files. Simple sounds can be synthesized in code if you ask for them, and for anything more you should plan on bringing your own audio.', + ], + }, + { + q: 'Can I add multiplayer or a leaderboard?', + a: [ + 'Yes. A shared leaderboard can live in a Puter serverless worker, deployed from the same conversation, so every player sees the same list. Real-time head-to-head play between devices uses Puter\'s peer-to-peer API, with no game server for you to run or pay for.', + 'Balance, matchmaking rules, and anti-cheat are still design work. The builder writes what you ask for, and you decide what is fair.', + ], + }, + { + q: 'Will it work on phones? Can I put it on the App Store or Steam?', + a: [ + 'Every game works on phones and desktops from the same link, with touch controls as you ask for them. On a phone it can be added to the home screen with its own icon and launched full screen, so it opens and feels like a native app, with no store review, no fees, and updates that go live for everyone instantly.', + 'It does not produce App Store, Google Play, Steam, or console builds. If a store listing is the goal, export the files and wrap them with a tool made for that; the game itself will come with you.', + ], + }, + { + q: 'Can I build from my phone?', + a: [ + 'Yes. Puter AI Builder is fully usable on a phone, with the chat and the preview as two views you switch between, so you can build a game and play-test it on the same device. Long builds keep running while the screen is on, and a build interrupted by the browser suspending the tab picks back up when you return.', + ], + }, + { + q: 'What happens when the AI gets something wrong?', + a: [ + 'Most runtime errors are caught before you see them: Puter AI Builder reloads the preview after each change, watches for errors, and sends them back to the AI to fix and re-verify.', + 'For everything else, tell it what is wrong in one sentence, or click the offending element in the preview and describe the fix. If a change made the game worse overall, version history lets you restore an earlier snapshot and take a different run at it.', + ], + }, + { + q: 'Can I use it for teaching or with students?', + a: [ + 'Yes. It runs in any modern browser with nothing to install, building is free, and the result is readable code, which makes it a good way to show how a game is put together. Each student builds from their own [Puter](' + LINKS.puter + ') account, and anything they publish is theirs.', + ], + }, + ], + }, + + { + type: 'cta', + heading: 'Turn your idea into a playable game', + body: 'Build it with AI, no coding required. Free to start, hosting and backend included.', + label: 'Start building', + href: buildLink(''), + }, + ], + + related: ['use-cases', 'ai-app-builder', 'ai-website-builder', 'guides/how-to-write-a-build-prompt'], +}; diff --git a/src/content/pages/ai-landing-page-builder.js b/src/content/pages/ai-landing-page-builder.js new file mode 100644 index 0000000..b33001b --- /dev/null +++ b/src/content/pages/ai-landing-page-builder.js @@ -0,0 +1,345 @@ +import { buildLink, LINKS } from '../site.js'; + +export default { + slug: 'ai-landing-page-builder', + parent: 'use-cases', + updated: '2026-09-23', + priority: 0.9, + changefreq: 'weekly', + navLabel: 'AI landing page builder', + + title: 'AI Landing Page Builder - Free, no code, live in minutes', + description: + 'Build a landing page with AI, no coding required. Describe your offer, get a page with a signup form that saves leads, and publish it for free in minutes.', + ogTagline: 'Describe the offer. Publish the page.', + + hero: { + eyebrow: 'AI landing page builder', + h1: 'AI landing page builder that gets your page live', + lead: + 'Build a landing page with AI without writing a line of code. Puter AI Builder turns your offer into a live page, complete with a signup form that saves leads and free hosting.', + cta: { label: 'Start building', href: '/' }, + secondary: { label: 'How to write the prompt', href: '/guides/how-to-write-a-build-prompt/' }, + note: 'Free with a [Puter](' + LINKS.puter + ') account. Runs in any modern browser, including on a phone.', + demo: { + prompt: 'Build a launch page for my newsletter with a waitlist form and one clear call to action', + app: { + name: 'launchlist.puter.site', + header: 'Waitlist', + blocks: [ + { + kind: 'stats', + items: [ + { value: '312', label: 'Signups' }, + { value: '41', label: 'This week' }, + { value: '88', label: 'Referred' }, + ], + }, + { + kind: 'bars', + label: 'Signups per day', + values: [4, 9, 6, 12, 8, 14, 11], + }, + ], + }, + }, + }, + + sections: [ + { + type: 'grid', + id: 'what-you-get', + heading: 'What you get', + intro: + 'Everything you need to go from an offer to a live landing page.', + items: [ + { + icon: 'layout', + title: 'Writes and designs the page for you', + body: + 'Describe what you are launching and who it is for, and Puter AI Builder designs the page: hero, headline, benefits, proof, FAQ, and call to action, written for your offer rather than adapted from a template.', + }, + { + icon: 'mail', + title: 'A signup form that saves', + body: + 'Waitlists, lead forms, and email capture store what people send, so the leads are yours to read whenever you want. Ask for the fields you need and where they should go.', + }, + { + icon: 'phone', + title: 'Built for the phone first', + body: + 'Most landing page traffic arrives from an ad or a link on a phone. Every page works at any width from the start, and you can check it narrow in the preview and ask for changes on small screens specifically.', + }, + { + icon: 'cursor', + title: 'Change anything by pointing at it', + body: + 'Click the headline, the button, or a section in the live preview and say what should be different. Adjust spacing, colors, and type on the spot, and those tweaks stay put through later changes.', + }, + { + icon: 'globe', + title: 'Publish in one click, free hosting included', + body: + 'Your page goes live at its own link the moment you want it, ready to put behind an ad or in a bio. Update it anytime and the change is live instantly.', + }, + { + icon: 'users', + title: 'Free to run at any scale', + body: + 'Hosting is included, and anything visitors use, like sign-in or AI features, is covered by their own [Puter](' + LINKS.puter + ') account. If your campaign takes off, you don\'t get a surprise bill. [How it works](' + LINKS.userPays + ').', + }, + ], + }, + + { + type: 'split', + id: 'last-mile', + heading: 'A page you can put an ad behind', + intro: + 'A landing page has one job, and a broken form or a headline you can\'t change quickly gets in the way of it. These three things keep you moving.', + items: [ + { + title: 'Errors get fixed before you see them', + art: 'verify', + body: [ + 'Every change is run and checked before it comes back to you. If the form stops submitting or a section throws an error, Puter AI Builder reads the file, fixes the cause, and checks again.', + 'You spend your time on the offer and the headline, not on why the button stopped working.', + ], + }, + { + title: 'Try a new headline, keep the old one', + art: 'history', + body: [ + 'Every change is saved as a version. Rewrite the hero, swap the proof section, or try a different call to action, and if the new version reads worse, go back to the previous one in a click.', + 'Duplicating a project gives you a second copy with its own link, so two variations of the same page can be live at the same time.', + ], + }, + { + title: 'Nothing is locked in', + art: 'files', + body: [ + 'The page is plain HTML, CSS, and JavaScript with no build step and no proprietary format. Download the whole thing as a zip and host it on your own domain, or hand it to a developer.', + 'Keep it on [Puter](' + LINKS.puter + ') or take it somewhere else at any time. There is no plan to keep paying to keep the page up.', + ], + }, + ], + }, + + { + type: 'steps', + id: 'how-to', + heading: 'How to build a landing page with AI', + intro: 'Four steps from an offer to a live landing page.', + schema: { + name: 'How to build a landing page with AI', + description: + 'Build and publish a landing page with a working signup form from a plain-English description using the AI landing page builder at builder.puter.com.', + }, + items: [ + { + title: 'Describe the offer', + body: + 'A sentence or two is enough: what you are launching, who it is for, and what you want a visitor to do. Name the one action, whether that is joining a waitlist, booking a call, or downloading a guide. The more specific you are, the closer the first version will be.', + }, + { + title: 'Watch it build', + body: + 'Puter AI Builder designs the page, writes the copy, wires the form, and shows it running in a live preview. A first version is usually ready in a couple of minutes.', + }, + { + title: 'Make it convert', + body: + 'Ask for a sharper headline, more proof, or a shorter form in plain language, or click any element in the preview and say what should be different. Every version is saved, so you can always go back.', + }, + { + title: 'Publish it', + body: + 'Press Publish to get a live link you can put behind an ad, in a bio, or in an email. Free hosting is included, and you can keep editing after it is live.', + }, + ], + }, + + { + type: 'prompts', + id: 'starters', + heading: 'Try one of these', + intro: 'Pick one and Puter AI Builder makes it for you. Then make it yours by describing what to change.', + items: [ + { + title: 'SaaS waitlist', + body: 'A launch page with an email waitlist, feature highlights, and a referral counter.', + prompt: + 'Build a launch landing page for a SaaS product with a bold hero and one clear call to action, three feature highlights with icons, a short founder note, and an email waitlist form. Save every signup to my Puter account with a timestamp, show the waitlist count on the page, and make it look great on a phone.', + }, + { + title: 'Lead magnet download', + body: 'A guide in exchange for an email, with the file delivered right after signup.', + prompt: + 'Build a lead magnet landing page for a free PDF guide with a hero that states the outcome, three bullet points on what is inside, a testimonial, and a name and email form. Store each submission in my Puter account, then show a thank-you state with the download link. High contrast, minimal, fast to read.', + }, + { + title: 'Webinar registration', + body: 'Date, speakers, what attendees will learn, and a registration form.', + prompt: + 'Build a webinar registration page with a countdown to the event date, the topic and three takeaways, speaker bios with photos, a registration form for name, email, and company, and a confirmation state after submitting. Save registrations to my Puter account and add a calendar link on the confirmation.', + }, + { + title: 'Coming soon page', + body: 'One screen, one line, one email box, live before the product is.', + prompt: + 'Build a coming soon landing page for a new product with a single screen: a striking headline, one line of description, an email signup box, and a subtle animated background. Store signups in my Puter account and show a thank-you message in place of the form after someone joins.', + }, + { + title: 'Consulting lead page', + body: 'Services, outcomes, proof, and a book-a-call form for a solo consultant.', + prompt: + 'Build a lead generation landing page for a marketing consultant with a hero that names the client and the result, a section on how the engagement works in three steps, client logos and two testimonials, pricing starting-at figures, and a book-a-call form that asks for name, email, company, and budget. Save every inquiry to my Puter account.', + }, + { + title: 'App pre-launch page', + body: 'Screenshots, a feature list, and a notify-me form for a mobile app.', + prompt: + 'Build a pre-launch landing page for a mobile app with a phone mockup showing screenshots, a headline and subheadline, a feature list with icons, an FAQ accordion, and a notify-me email form. Save signups to my Puter account and add sticky call-to-action buttons on mobile. Bright, playful, and quick to load.', + }, + ], + }, + + { + type: 'grid', + id: 'convert', + columns: 2, + heading: 'Built to be found and to be tested', + intro: + 'A landing page is only as good as the traffic it gets and the changes you make after launch. Both are easier when the page is plain web files you fully control.', + items: [ + { + icon: 'search', + title: 'The basics a search engine needs', + body: + 'The output is plain HTML, which is the easiest thing there is for a search engine to read. Ask for a title and description that match your keyword, headings in the right order, social preview tags, and fast-loading images, and they are written into the page.', + }, + { + icon: 'refresh', + title: 'Two versions, two links', + body: + 'There is no built-in split test. Instead, duplicate the project, change the headline or the offer in the copy, and publish both. Each gets its own link, so you can send half your traffic to each and compare with whatever analytics you already use. Version history means either page can be rolled back in a click.', + }, + ], + }, + + { + type: 'faq', + id: 'faq', + heading: 'AI landing page builder FAQ', + items: [ + { + q: 'What is an AI landing page builder?', + a: [ + 'An AI landing page builder turns a plain-language description of an offer into a complete landing page. You say what you are launching, who it is for, and what you want a visitor to do, and the AI writes the headline and copy, designs the layout, adds the form, and shows the page running in minutes rather than days.', + 'Unlike a template builder, it does not start from someone else\'s layout and ask you to bend it. The page is designed around your description, works on phones from the start, and comes with the basics a search engine needs already in place.', + 'With Puter AI Builder you refine it the same way you started, by asking for changes or clicking the part you want changed, then publish it in one click. The one thing worth doing yourself is reading the copy, since the AI writes a first draft of your offer rather than the final word.', + ], + }, + { + q: 'Do I need design or coding skills?', + a: [ + 'No. Every step, from the first description to publishing, works in plain English. If you can describe what you are selling and who it is for, you can build the page. If you do know design, you can direct it precisely: name the fonts, the palette, and the mood, or click an element and adjust spacing, color, and type on the spot.', + ], + }, + { + q: 'How long does it take to create a landing page?', + a: [ + 'A first version is usually ready in a couple of minutes. Getting the headline, the proof, and the form exactly how you want them is a conversation, and most pages are finished in a handful of changes. Every version is saved, so you can stop and pick it up later.', + ], + }, + { + q: 'Is it free to create and publish a landing page?', + a: [ + 'Yes. Building and publishing are free with a [Puter](' + LINKS.puter + ') account, and no card is required. Publishing is not behind a paywall: the page goes live at its own link the moment you press Publish. Very heavy use can hit the free tier\'s limits, at which point you can upgrade your account; ordinary building and publishing do not.', + ], + }, + { + q: 'What kinds of landing pages can I build?', + a: [ + 'Product launches, SaaS waitlists, lead magnets, webinar and event registration, coming soon pages, app pre-launch pages, consulting and service lead pages, newsletter signups, and campaign pages for a specific ad or audience. Anything that is one offer and one action is a natural fit.', + 'Because a backend is included, the page can also do more than collect an email: sign-in, per-user data, and AI features such as a chatbot that knows your product are available when you need them, and the same project can grow into a full website or app later.', + ], + }, + { + q: 'Can I customize the AI-generated page?', + a: [ + 'Yes, all of it. Describe the look you want, from colors and fonts to layout and tone, and it is designed that way from the start. Afterwards, click any element in the preview and say what should be different, or adjust spacing, colors, and type directly on it. There is no theme underneath limiting what can change, and you can edit the code itself if you want to.', + ], + }, + { + q: 'Is the landing page mobile-friendly?', + a: [ + 'Yes. Pages are written responsively by default, and you can resize the preview to check. If the hero reads badly at a particular width or the form is awkward to fill on a phone, say so and it gets fixed for that width specifically.', + ], + }, + { + q: 'Where do form submissions and leads go?', + a: [ + 'Forms save what people send, so the leads are yours to read. Ask for signups to be stored in your Puter account and for a simple view where you can see them, or a CSV export you can drop into whatever you use for email.', + 'Puter AI Builder does not send email sequences or run a CRM. If you need automated follow-up, export your leads to the email tool you already use.', + ], + }, + { + q: 'Can I publish the landing page on my own domain?', + a: [ + 'Every published page gets its own link on puter.site, served over HTTPS, with nothing to configure. If you want your own domain, export the page and host it wherever your domain points, or put your domain in front of the published page with your DNS provider\'s redirect or proxy tools.', + ], + }, + { + q: 'Can I A/B test and track conversions?', + a: [ + 'There is no built-in split test or analytics dashboard. What you can do is duplicate the project, change one thing, and publish both copies at their own links, then split your traffic between them.', + 'For measurement, the page is plain HTML, so the tracking snippet from your analytics tool goes in the same way it would on any page you own. Ask for it to be added and for the form submission to fire an event.', + ], + }, + { + q: 'Can I connect it to my marketing tools?', + a: [ + 'There is no integrations directory. The page is standard web files, so anything you could add to a hand-written HTML page, such as an embed code, a tracking pixel, or a link to a checkout or booking page, you can ask for here. Puter AI Builder does not process payments itself, so for paid offers link to a payment provider you already use.', + ], + }, + { + q: 'Does it help with SEO?', + a: [ + 'Yes. The output is plain HTML, which is the easiest thing there is for a search engine to read. Ask for the specifics you want, such as a title and description that match your keyword, headings in the right order, and social preview tags, and they will be written into the page.', + ], + }, + { + q: 'What happens when the AI gets something wrong?', + a: [ + 'Most runtime errors are caught before you see them: Puter AI Builder reloads the preview after each change, watches for errors, and sends them back to the AI to fix and re-verify.', + 'For everything else, tell it what is wrong in one sentence, or click the offending element in the preview and describe the fix. If a change made the page worse overall, version history lets you restore an earlier snapshot and take a different run at it.', + ], + }, + { + q: 'Do I own the page? Can I export it?', + a: [ + 'Yes. The design, the copy, and the files are yours. There is no license to renew and no export wall. Download the whole project as a zip whenever you like. It is standard HTML, CSS, and JavaScript with no build step, so it runs on any static host or straight off your disk.', + ], + }, + { + q: 'How much does it cost to run the page?', + a: [ + 'Nothing. Hosting is included, and anything visitors use, like sign-in or AI features, is covered by their own [Puter](' + LINKS.puter + ') account. If your campaign takes off, you don\'t get a surprise bill. [How it works](' + LINKS.userPays + ').', + ], + }, + ], + }, + + { + type: 'cta', + heading: 'Turn your offer into a live landing page', + body: 'Build it with AI, no coding required. Free to start, hosting and a form that saves included.', + label: 'Start building', + href: buildLink(''), + }, + ], + + related: ['use-cases', 'ai-app-builder', 'ai-website-builder', 'guides/how-to-write-a-build-prompt'], +}; diff --git a/src/content/pages/ai-portfolio-builder.js b/src/content/pages/ai-portfolio-builder.js new file mode 100644 index 0000000..dccfa67 --- /dev/null +++ b/src/content/pages/ai-portfolio-builder.js @@ -0,0 +1,359 @@ +import { buildLink, LINKS } from '../site.js'; + +export default { + slug: 'ai-portfolio-builder', + parent: 'use-cases', + updated: '2026-09-23', + priority: 0.9, + changefreq: 'weekly', + navLabel: 'AI portfolio builder', + + title: 'AI Portfolio Builder - Create a portfolio website free with AI', + description: + 'Build a portfolio website with AI from your resume, images, and copy. Galleries, case studies, and a contact form that saves messages. Free to publish.', + ogTagline: 'Your work, on a site of its own', + + hero: { + eyebrow: 'AI portfolio builder', + h1: 'AI portfolio builder that turns your work into a live site', + lead: + 'Describe what you do, attach your work, and Puter AI Builder designs a portfolio website around it: galleries, case studies, an about page, and a contact form that reaches you. Published in minutes, free.', + cta: { label: 'Start building', href: '/' }, + secondary: { label: 'Built for photographers', href: '/for/photographers/' }, + note: 'Free with a [Puter](' + LINKS.puter + ') account. Runs in any modern browser, including on a phone.', + demo: { + prompt: 'Build a portfolio for my product design work with case studies and a contact form', + app: { + name: 'linokafor.puter.site', + header: 'Lin Okafor, Product Designer', + blocks: [ + { + kind: 'stats', + items: [ + { value: '12', label: 'Projects shown' }, + { value: '4', label: 'Case studies' }, + { value: '3', label: 'New messages' }, + ], + }, + { + kind: 'list', + rows: [ + { title: 'Rebanking onboarding', sub: 'Case study · Fintech', tag: 'Featured' }, + { title: 'Atlas design system', sub: 'Case study · B2B SaaS', tag: '2026' }, + { title: 'Nightjar mobile app', sub: 'Case study · Consumer', tag: 'Shipped' }, + ], + }, + ], + }, + }, + }, + + sections: [ + { + type: 'grid', + id: 'what-you-get', + heading: 'What you get', + intro: + 'Everything a portfolio needs to get you hired, with nothing to install and nothing to configure.', + items: [ + { + icon: 'wand', + title: 'A design built around your work', + body: + 'There is no template underneath. Say what you make and the mood you want, from quiet and editorial to bold and dark, and Puter AI Builder lays out the galleries, case-study pages, about page, and navigation to suit it.', + }, + { + icon: 'folder', + title: 'Starts from what you already have', + body: + 'Attach your images, logo, PDFs, and a resume or CV, or paste your bio and project descriptions into the chat. They are saved into the project and used as the source material for the site.', + }, + { + icon: 'mail', + title: 'A contact form that reaches you', + body: + 'Messages from the contact form are stored in your own [Puter](' + LINKS.puter + ') account, so an inquiry from a recruiter or client is yours to read, with no form service to sign up for.', + }, + { + icon: 'cursor', + title: 'Point at the detail you want changed', + body: + 'Click a thumbnail, a heading, or a caption in the live preview and say what should be different. Adjust spacing, color, and type on the spot, and those tweaks survive later changes.', + }, + { + icon: 'shieldCheck', + title: 'Checks its own work before you see it', + body: + 'After every change the site is reloaded and watched for errors. A broken gallery or a filter that stops working is fixed and re-verified before the turn is handed back to you.', + }, + { + icon: 'globe', + title: 'Live in one click, hosted for free', + body: + 'Publish puts your portfolio on its own address, served over HTTPS, ready to paste into an application or a bio. Hosting is included, and visitors do not need an account to see it. [How the free model works](' + LINKS.userPays + ').', + }, + ], + }, + + { + type: 'split', + id: 'your-work', + heading: 'Made from your work, not from a template', + intro: + 'Portfolio builders usually hand you a layout and ask you to pour your work into it. This one starts the other way round.', + items: [ + { + title: 'Your files are the brief', + art: 'files', + body: [ + 'Drop in the project images, your logo, a PDF case study, and your resume. Puter AI Builder reads what it needs and writes the pages from it: project titles, descriptions, an about page in your voice, and the right skills in the right order.', + 'It is a first draft of you rather than the final word, so read the copy before you share it. Changing a line is a sentence in the chat.', + ], + }, + { + title: 'Inquiries land in your account', + art: 'backend', + body: [ + 'A portfolio exists to start conversations, so the contact form is not decorative. Submissions are saved to your own [Puter](' + LINKS.puter + ') account and you can ask for a simple private inbox page to read them.', + 'The same backend is there if you want more later: a sign-in-only client area, a private page for work under NDA, or an AI feature on the page. Nothing to set up, and anything a visitor uses is covered by their own account.', + ], + }, + { + title: 'Try a bolder look, keep the one that lands', + art: 'history', + body: [ + 'Every change is saved as a version. Ask for a full-bleed gallery, a dark theme, or a completely different typeface, and if you liked the previous one better, restore it in a click.', + 'Duplicate the project to keep a second variation alongside the first, each with its own preview and its own link.', + ], + }, + ], + }, + + { + type: 'steps', + id: 'how-to', + heading: 'How to build a portfolio with AI', + intro: 'Four steps from a folder of work to a link you can send.', + schema: { + name: 'How to build a portfolio with AI', + description: + 'Build and publish a portfolio website from your own work, resume, and a plain-English description using the AI portfolio builder at builder.puter.com.', + }, + items: [ + { + title: 'Say what you do and attach your work', + body: + 'One or two sentences: your discipline, who you want to reach, and the feel you are after. Attach images, a resume, or a PDF of past projects, or paste in links and descriptions.', + }, + { + title: 'Watch the site take shape', + body: + 'Puter AI Builder designs the pages, places your work, writes the first-draft copy, and shows the site running in a live preview. A first version is usually ready in a couple of minutes.', + }, + { + title: 'Refine it by pointing and asking', + body: + 'Reorder projects, swap a hero image, tighten the bio, or click any element and say what should change. Every version is saved, so you can experiment freely.', + }, + { + title: 'Publish and send the link', + body: + 'Press Publish for a public address you can put on a resume, a job application, or a social profile. Keep editing after it is live, and download the files whenever you want.', + }, + ], + }, + + { + type: 'prompts', + id: 'starters', + heading: 'Portfolio prompts to start from', + intro: + 'Pick the one closest to your field and attach your work. Then make it yours by describing what to change.', + items: [ + { + title: 'Product designer', + body: 'Case studies with problem, process, and outcome, plus a filterable project grid.', + prompt: + 'Build a product design portfolio with a short hero introducing me, a project grid filterable by type (mobile, web, design systems), and a case-study page per project with sections for the problem, my process, and the outcome, with image galleries in each. Add an about page built from my attached resume and a contact form that saves messages to my Puter account.', + }, + { + title: 'Photographer', + body: 'Full-screen galleries by series, a lightbox, and a booking inquiry form.', + prompt: + 'Build a photography portfolio with a full-bleed hero image, galleries organized by series (weddings, portraits, editorial) with a lightbox and keyboard navigation, an about page with my photo and bio, session pricing, and a booking inquiry form that saves each request to my Puter account. Lazy-load images so it stays fast on a phone.', + }, + { + title: 'Developer', + body: 'Projects with live links, a tech stack section, and a downloadable resume.', + prompt: + 'Build a developer portfolio with a projects section where each card has a screenshot, description, tech stack tags, and links to the live site and the repository, an experience timeline generated from my attached resume, a skills section, a resume download button, and a contact form whose submissions are saved to my Puter account. Dark theme with a light toggle.', + }, + { + title: 'Writer or journalist', + body: 'Clips sorted by publication and topic, with reading-time estimates.', + prompt: + 'Build a writing portfolio with a clean, typography-first design, a clips page where each piece shows the headline, publication, date, topic tag, and a link to the original, filters by topic and publication, a short bio page, a testimonials section from editors, and a contact form that stores messages in my Puter account.', + }, + { + title: 'Illustrator or artist', + body: 'An image-first gallery, commissions info, and a shop link.', + prompt: + 'Build an illustration portfolio with a masonry gallery of my attached artwork, tags for medium and subject that filter the gallery, a commissions page with what I offer and current availability, a link out to my print shop, and a contact form that saves inquiries to my Puter account. Playful colors and generous whitespace.', + }, + { + title: 'Student or career changer', + body: 'Coursework, personal projects, and an AI assistant that answers questions from your resume.', + prompt: + 'Build a portfolio for someone starting out, with a projects section for coursework and personal projects, a skills-in-progress section, an about page built from my attached resume, and a small chat widget that uses Puter AI to answer visitor questions about my background using the resume text. Include a contact form that saves messages to my Puter account.', + }, + ], + }, + + { + type: 'grid', + id: 'what-to-include', + columns: 2, + heading: 'What to put in a portfolio', + intro: + 'The tool matters less than the choices. A few that come up in every hiring conversation, and how to get them built.', + items: [ + { + icon: 'star', + title: 'Strongest work first, and fewer pieces', + body: + 'Six to ten pieces you are proud of beat thirty you are not. Tell Puter AI Builder which projects are featured and it will give them the space on the home page, with the rest behind a filter or an archive page.', + }, + { + icon: 'book', + title: 'Case studies that show your thinking', + body: + 'For design, UX, and engineering work, a page per project with the problem, your role, the process, and the result does more than a grid of thumbnails. Attach the PDF or paste the notes and ask for a case-study page built from them.', + }, + { + icon: 'users', + title: 'An about page that sounds like you', + body: + 'A photo, a paragraph in the first person, and where you are based. The AI drafts it from your resume; you fix the two sentences that are not quite you. Ask for it to be shorter or warmer and it will be.', + }, + { + icon: 'mail', + title: 'One obvious way to reach you', + body: + 'A contact form on every page footer, plus your email and the links you actually check. Submissions are saved to your account, and you can ask for an inbox page so nothing gets lost.', + }, + ], + }, + + { + type: 'faq', + id: 'faq', + heading: 'AI portfolio builder FAQ', + items: [ + { + q: 'What is an AI portfolio builder?', + a: [ + 'An AI portfolio builder takes your work, your resume, and a short description of what you do, and produces a finished portfolio website: the layout, the galleries, the case-study pages, the copy, and the contact form, without you picking a template or writing code.', + 'The difference from a template-based portfolio maker is where it starts. A template asks you to fit your work into someone else\'s layout. Puter AI Builder starts from your description and your files and designs around them, then lets you refine the result by asking for changes or clicking the part you want different. The output is a normal website you own.', + ], + }, + { + q: 'How do I make a portfolio website with AI?', + a: [ + 'Open Puter AI Builder, describe your discipline and the feel you want, and attach your work: images, a resume or CV, PDFs of past projects, or pasted descriptions. A first version appears in the live preview within a couple of minutes. Reorder projects, change the look, and fix the copy by asking in plain language or clicking the element in question, then press Publish to get a link. The steps above walk through each stage.', + ], + }, + { + q: 'Can I build a portfolio with AI for free?', + a: [ + 'Yes. Building, previewing, and publishing a portfolio are free with a [Puter](' + LINKS.puter + ') account, and no card is required. The published site is served on its own puter.site address with HTTPS. Very heavy use can hit the free tier\'s limits, at which point you can upgrade your account; building and publishing a portfolio does not.', + ], + }, + { + q: 'How long does it take to build an AI portfolio?', + a: [ + 'A first version usually takes a couple of minutes. Getting it exactly right is a short conversation: most portfolios are done in a handful of changes, and the longest part is usually choosing which work to show. Every version is saved, so you can stop and come back later.', + ], + }, + { + q: 'Can AI build my portfolio from my resume?', + a: [ + 'Yes. Attach your resume or CV as a PDF or text file and it becomes source material: the experience timeline, the skills list, and the about page are drafted from it, and you can ask for a resume download button on the site as well.', + 'Puter AI Builder does not pull from GitHub, Dribbble, or Behance automatically. Paste the links and descriptions you want included, or attach the images, and they are placed for you.', + ], + }, + { + q: 'What should I include in my portfolio, and how many projects?', + a: [ + 'A small number of your strongest pieces, a case study or two that show how you think, a short about page with a photo, and one clear way to contact you. Six to ten projects is plenty for most fields; recruiters rarely get past the first few.', + 'If you do not have client work yet, coursework, personal projects, and redesigns of existing products all count. Say so in the prompt and the site is framed accordingly, with a skills-in-progress section rather than a fake client list.', + ], + }, + { + q: 'Do I need design or coding skills?', + a: [ + 'No. You describe the site and the AI designs and codes it. Taste still helps: knowing which pieces to lead with, and that the copy should be shorter, is most of what makes a portfolio good, and you supply that in plain language. If you can code, the project is standard HTML, CSS, and JavaScript you can edit directly.', + ], + }, + { + q: 'Can I use my own high-resolution images, and will they slow the site down?', + a: [ + 'Yes, attach them and they are saved into the project and placed where you ask. Large originals are the usual reason a portfolio loads slowly, so ask for lazy loading and thumbnails that open the full image in a lightbox, and export web-sized versions for the gallery rather than print files. If a page feels slow on a phone, say so and it gets fixed for that page.', + ], + }, + { + q: 'Can visitors contact me through my portfolio?', + a: [ + 'Yes. Ask for a contact or booking form and submissions are stored in your own [Puter](' + LINKS.puter + ') account, where you can read them, and you can ask for a private inbox page inside the site. Add your email and social links alongside it so people can use whichever they prefer.', + ], + }, + { + q: 'Will my portfolio be mobile-friendly?', + a: [ + 'Yes. Sites are written responsively from the start, and you can resize the preview to check any width. Galleries reflow, case studies stay readable, and the contact form works with a thumb. If something reads badly on a particular screen size, say which one and it is fixed there specifically.', + ], + }, + { + q: 'Can I use a custom domain?', + a: [ + 'Every published portfolio gets its own puter.site address with HTTPS included. If you want your own domain, export the site and host it wherever your domain points, or put your domain in front of the published site with your DNS provider\'s redirect or proxy tools. There is no domain purchase or connection built into the builder itself.', + ], + }, + { + q: 'Can I optimize my AI portfolio for SEO?', + a: [ + 'Yes. The output is plain HTML, which search engines read easily. Ask for the specifics: a title and description on each page, descriptive alt text for your images, headings that name your discipline and city, a sitemap, and social preview images, and they are written into the pages. Remember that a portfolio mostly gets found through the link you share, so the site title and social preview matter most.', + ], + }, + { + q: 'Do I own the portfolio, and can I move it later?', + a: [ + 'Yes. The design, the copy, and the files are yours. Download the whole project as a zip at any time; it is standard HTML, CSS, and JavaScript with no build step and no proprietary format, so it runs on any static host or straight off your disk. If you outgrow the builder or a developer takes over, they continue in an ordinary editor. There is no export wall and no plan to keep paying to keep access.', + ], + }, + { + q: 'What happens if the AI gets it wrong, or a change breaks something?', + a: [ + 'Most breakages are caught before you see them: after each change the preview is reloaded and watched for errors, and anything it throws goes back to the AI to fix and re-verify.', + 'For everything else, tell it what is off in a sentence, or click the element and describe the fix. If a redesign made the site worse overall, restore the previous version from history and try a different direction. The copy is the thing to read yourself, since the AI drafts a description of you and only you know what is accurate.', + ], + }, + { + q: 'What does it cost to keep the portfolio online?', + a: [ + 'Nothing. Hosting on puter.site is included, and anything a visitor uses that touches the backend, such as sending a message through the form or asking the on-page AI assistant a question, is covered by their own [Puter](' + LINKS.puter + ') account rather than yours. A portfolio that gets a burst of traffic after a viral post does not produce a bill. [How it works](' + LINKS.userPays + ').', + ], + }, + ], + }, + + { + type: 'cta', + heading: 'Put your work on a site of its own', + body: 'Describe what you do, attach your work, and publish a portfolio with AI. Free to build, free to host.', + label: 'Start building', + href: buildLink(''), + }, + ], + + related: ['use-cases', 'ai-website-builder', 'ai-app-builder', 'for/photographers', 'guides/how-to-build-a-website-with-ai'], +}; diff --git a/src/content/pages/ai-prototype-generator.js b/src/content/pages/ai-prototype-generator.js new file mode 100644 index 0000000..a949a56 --- /dev/null +++ b/src/content/pages/ai-prototype-generator.js @@ -0,0 +1,348 @@ +import { buildLink, LINKS } from '../site.js'; + +export default { + slug: 'ai-prototype-generator', + parent: 'use-cases', + updated: '2026-09-23', + priority: 0.9, + changefreq: 'weekly', + navLabel: 'AI prototype generator', + + title: 'AI Prototype Generator - Working prototypes in minutes, free', + description: + 'Generate an interactive prototype from a plain-English description. A real working web app, not a mockup: share a link for user testing, edit by pointing, free.', + ogTagline: 'Prototypes that actually run', + + hero: { + eyebrow: 'AI prototype generator', + h1: 'AI prototype generator that gives you a working prototype', + lead: + 'Describe the product and Puter AI Builder generates an interactive prototype you can click through, type into, and share at a link. It is real code with a real backend, so the prototype that wins testing can become the product without a rebuild.', + cta: { label: 'Start building', href: '/' }, + secondary: { label: 'How to write a build prompt', href: '/guides/how-to-write-a-build-prompt/' }, + note: 'Free with a [Puter](' + LINKS.puter + ') account. Runs in any modern browser, including on a phone.', + demo: { + prompt: 'Prototype a meal planning app with a weekly grid, a recipe library, and a grocery list', + app: { + name: 'mealgrid.puter.site', + header: 'This week', + blocks: [ + { + kind: 'stats', + items: [ + { value: '18', label: 'Meals planned' }, + { value: '3', label: 'Slots open' }, + { value: '24', label: 'Grocery items' }, + ], + }, + { + kind: 'list', + rows: [ + { title: 'Lemon garlic pasta', sub: 'Tue dinner · 25 min', tag: 'Planned' }, + { title: 'Shakshuka', sub: 'Sat brunch · 30 min', tag: 'New' }, + { title: 'Thai green curry', sub: 'Sun dinner · 40 min', tag: 'Leftovers' }, + ], + }, + ], + }, + }, + }, + + sections: [ + { + type: 'grid', + id: 'what-you-get', + heading: 'What you get', + intro: + 'Everything you need to go from an idea to a prototype people can actually try.', + items: [ + { + icon: 'eye', + title: 'A prototype you can actually use', + body: + 'The preview is the real app, not a rendering. Click through the screens, fill in the forms, and use it exactly as a tester would, on a phone or a desktop.', + }, + { + icon: 'link', + title: 'A link for user testing', + body: + 'Share a private draft link before anything is public, or publish to a free puter.site address. Testers open it on any device with no install and no account on your side to set up.', + }, + { + icon: 'cursor', + title: 'Point at what should change', + body: + 'Click any element in the live preview and say what to do with it. Move a button, reword a step, swap a layout, without describing where it is.', + }, + { + icon: 'history', + title: 'Branch ideas, keep every version', + body: + 'Every change is saved as a version you can restore in a click. Duplicate the project to try a second direction while the first stays intact, each with its own preview and its own link.', + }, + { + icon: 'database', + title: 'Real data and real sign-in', + body: + 'Accounts, a database, file storage, and AI models are built in with nothing to set up. Your prototype can save what testers enter instead of faking it with placeholder text.', + }, + { + icon: 'download', + title: 'Graduates without a rebuild', + body: + 'The prototype is standard HTML, CSS, and JavaScript that you own. Keep building on it until it is the product, publish it, or export the whole thing as a zip and take it anywhere.', + }, + ], + }, + + { + type: 'split', + id: 'real-prototype', + heading: 'A prototype that survives contact with users', + intro: + 'A clickable mockup shows what a product would look like. A working prototype shows whether it works. These three things are what make the difference.', + items: [ + { + title: 'Testers never land on a broken screen', + art: 'verify', + body: [ + 'After every change Puter AI Builder runs the prototype and watches for errors. If a screen breaks, it reads the file, fixes the cause, and checks again before handing it back.', + 'You spend a testing session watching people use the product, not apologizing for a button that does nothing.', + ], + }, + { + title: 'Try a second direction without losing the first', + art: 'history', + body: [ + 'Every change is saved as a version. If a round of feedback sends you somewhere worse, go back to the version that tested well and take a different run at it.', + 'When two ideas are worth comparing, duplicate the project and build the other one alongside it. Each copy gets its own preview, history, and link, so you can put both in front of users.', + ], + }, + { + title: 'The prototype is already the foundation', + art: 'backend', + body: [ + 'Because every prototype runs on [Puter](' + LINKS.puter + '), sign-in, a database, storage, and AI models are there from the first version. A signup flow can really create an account; a dashboard can really save data.', + 'That means the prototype that wins does not get thrown away and rebuilt. Keep iterating in the same project until it is the product, and the people who use it cover their own storage and AI through their own Puter account, so it costs you nothing to run. [How it works](' + LINKS.userPays + ').', + ], + }, + ], + }, + + { + type: 'steps', + id: 'how-to', + heading: 'How to generate a prototype with AI', + intro: 'Four steps from an idea to a prototype people can try.', + schema: { + name: 'How to generate a prototype with AI', + description: + 'Generate an interactive, working prototype from a plain-English description using the AI prototype generator at builder.puter.com.', + }, + items: [ + { + title: 'Describe the product', + body: + 'A sentence or two is enough: what it is, who it is for, and the flow you want to test. Attach screenshots, sketches, or a logo as reference if you have them. The more specific you are, the closer the first version will be.', + }, + { + title: 'Watch it build', + body: + 'Puter AI Builder writes the screens and the logic, runs the prototype, and checks that it works. A first version is usually ready in a couple of minutes, running in a live preview you can use right away.', + }, + { + title: 'Refine it by talking, or by pointing', + body: + 'Ask for the next change in plain language, or click any element in the preview and say what should be different. Every version is saved, so you can branch an idea and always get back.', + }, + { + title: 'Share it and test it', + body: + 'Send a private draft link, or press Publish for a public one. Watch people use it, bring the feedback back into the chat, and keep going in the same project until the prototype is the product.', + }, + ], + }, + + { + type: 'prompts', + id: 'starters', + heading: 'Not sure where to start? Try one of these', + intro: + 'Pick one and Puter AI Builder generates it for you. Then make it yours by describing what to change.', + items: [ + { + title: 'Onboarding flow', + body: 'A signup and first-run flow you can put in front of testers this afternoon.', + prompt: + 'Prototype the onboarding flow for a budgeting app: a welcome screen, sign-in with a Puter account, a three-step setup that asks for monthly income, top spending categories, and a savings goal, and a first dashboard that reflects those answers. Save the answers to the user\'s Puter account so returning testers skip setup.', + }, + { + title: 'SaaS dashboard', + body: 'The main screen of a product, with real interactions instead of a static picture.', + prompt: + 'Prototype the main dashboard for a customer support tool with a sidebar, a ticket list I can filter by status and priority, a ticket detail panel with a reply box, and a small stats strip at the top. Seed it with twenty realistic sample tickets and let me add and edit tickets, saving them to my Puter account.', + }, + { + title: 'Mobile booking app', + body: 'A phone-sized flow from browsing to a confirmed booking.', + prompt: + 'Prototype a mobile app for booking a dog groomer: a list of groomers with photos and ratings, a groomer profile with services and prices, a date and time picker, and a confirmation screen. Make it phone-first with a bottom tab bar, and save bookings to the user\'s Puter account so they show up under a My bookings tab.', + }, + { + title: 'Marketplace listing', + body: 'Search, filters, and a listing page for a two-sided marketplace idea.', + prompt: + 'Prototype a marketplace for renting camera gear: a search page with filters for category, price per day, and location, a results grid with sample listings, a listing detail page with a photo gallery and availability calendar, and a request-to-rent form. Let signed-in users post their own listings, saved to their Puter account.', + }, + { + title: 'AI feature concept', + body: 'Test whether an AI-powered feature is actually useful before building the whole product.', + prompt: + 'Prototype a feature where a user pastes a long meeting transcript and gets a summary, a list of decisions, and action items with owners, generated by AI. Show the results in three tabs, let the user edit and check off action items, and save each processed meeting to their Puter account for a history view.', + }, + { + title: 'Internal tool', + body: 'A quick working version of the tool your team keeps asking for, to check the workflow before committing.', + prompt: + 'Prototype an internal tool for approving expense reports: a submit form with line items and receipt uploads, a queue for approvers with approve and reject buttons and a comment field, and a status page for submitters. Store receipts and reports in the Puter account and use a Puter serverless worker so approvers and submitters see the same queue.', + }, + ], + }, + + { + type: 'grid', + id: 'prototype-vs-mockup', + columns: 2, + heading: 'Working prototype or clickable mockup?', + intro: + 'Most AI prototype generators produce design files: screens linked with hotspots, meant to be viewed and then handed to engineering. Puter AI Builder produces something different, and it is worth knowing which one you need.', + items: [ + { + icon: 'zap', + title: 'What a working prototype is good for', + body: + 'Usability testing where people type real things and expect real results. Validating a flow end to end, including sign-in and saved data. Showing investors or stakeholders something they can use rather than watch. And building the actual product afterwards, because nothing gets thrown away: the prototype is real web files with a backend already attached.', + }, + { + icon: 'pen', + title: 'What it is not', + body: + 'It does not produce Figma files, design layers, or a canvas of artboards, and there is no export to design tools. You can attach screenshots, sketches, and images as reference and ask for the prototype to follow them, but the output is always a running app. If your goal is a pixel-perfect spec for a design review, a design tool is the better fit; if your goal is to find out whether the product works, this is.', + }, + ], + }, + + { + type: 'faq', + id: 'faq', + heading: 'AI prototype generator FAQ', + items: [ + { + q: 'What is an AI prototype generator?', + a: [ + 'An AI prototype generator turns a plain-language description of a product into a prototype you can interact with. You describe the screens and the flow, and the AI produces them in minutes instead of the days it takes to wireframe, design, and wire up a prototype by hand.', + 'Most tools in this category generate design mockups: static screens linked together so a click on one takes you to the next. Puter AI Builder generates a working web app instead. The screens are real, the buttons run real logic, the forms save real data, and the whole thing runs at a link anyone can open. You refine it by asking for changes or clicking the part you want changed.', + ], + }, + { + q: 'Do I need design or coding experience?', + a: [ + 'No. Every step works in plain English, from the first description to sharing the link. The AI designs the screens, picks sensible defaults for anything you did not specify, and writes the code. You refine it the same way, by asking for changes or clicking the element you want changed.', + 'If you do know how to code, the output is ordinary HTML, CSS, and JavaScript that you can read and edit, so nothing is hidden from you either.', + ], + }, + { + q: 'What kinds of prototypes can I generate?', + a: [ + 'Anything that runs in a browser: onboarding and signup flows, dashboards, mobile-first apps, marketplaces, booking flows, internal tools, landing pages, and AI-powered features. Multi-screen flows with navigation are the normal case, not the exception.', + 'Because a backend is included, prototypes can go further than a mockup: sign-in that creates a real account, forms that save, per-user data, file uploads, AI chat or image generation, and shared state through a serverless worker for multi-user scenarios.', + ], + }, + { + q: 'How long does it take to generate a prototype?', + a: [ + 'A first working version usually lands in a couple of minutes. Getting it exactly right for a test is a handful of changes on top of that. Every version is saved, so you can stop, share what you have, and pick it up after feedback comes in.', + ], + }, + { + q: 'Is the AI prototype generator free?', + a: [ + 'Yes. Generating, editing, and publishing prototypes are free with a [Puter](' + LINKS.puter + ') account, and no card is required. Nothing is public until you decide to share it.', + 'Very heavy use can hit the free tier\'s limits, at which point you can upgrade your Puter account. Ordinary prototyping, sharing, and iterating do not.', + ], + }, + { + q: 'Can I customize the prototype after it is generated?', + a: [ + 'Yes, all of it. Ask for changes in plain language, or click any element in the live preview and say what should be different. For styling, adjust spacing, colors, and type directly on the element, and those tweaks stay put through later changes. There is no template underneath limiting what can change.', + ], + }, + { + q: 'Can I test the prototype with real data?', + a: [ + 'Yes. Every prototype comes with a database, file storage, and user accounts built in, so a form can really save and a dashboard can really read what was saved. Ask for realistic sample data to be seeded so the first screen testers see is not empty.', + 'Each tester\'s data is stored under their own [Puter](' + LINKS.puter + ') account, and shared data, like a queue everyone sees, runs in a serverless worker when you ask for it.', + ], + }, + { + q: 'How do I share the prototype with users, clients, or my team?', + a: [ + 'Two ways. Share a private draft link to the work-in-progress preview, so a client or a tester can look at it without anything being public. Or press Publish and get a public puter.site link that anyone can open on any device, with no install.', + 'Both keep working as you iterate: publish again and everyone with the link sees the new version. On a phone the prototype can be added to the home screen and opened like an installed app.', + ], + }, + { + q: 'Can I start from a sketch, a screenshot, or an existing design?', + a: [ + 'Yes, as reference. Attach screenshots, sketches, images, a logo, PDFs, or text files in the chat, or share a link to an existing site, and describe what to keep and what to change. Puter AI Builder uses them to shape the prototype.', + 'There is no direct import of Figma or Sketch files, and no automatic sketch-to-design conversion. Attaching an image and saying "make it look like this" is the workflow.', + ], + }, + { + q: 'Can I export the prototype to Figma?', + a: [ + 'No. Puter AI Builder generates a working app, not design files, so there is no Figma export and no design layers to hand over. What you can export is the project itself: a zip of standard HTML, CSS, and JavaScript that runs anywhere.', + 'If your team needs a design spec, the usual approach is to point the designer at the running prototype and let them work from that, rather than trying to move it back into a design tool.', + ], + }, + { + q: 'What happens when the AI gets something wrong?', + a: [ + 'Most runtime errors are caught before you see them: Puter AI Builder reloads the preview after each change, watches for errors, and sends them back to the AI to fix and re-verify.', + 'For everything else, tell it what is wrong in one sentence, or click the offending element in the preview and describe the fix. If a change made the prototype worse overall, version history lets you restore an earlier snapshot and take a different run at it.', + ], + }, + { + q: 'What happens when the prototype needs to become the real product?', + a: [ + 'Keep going in the same project. Because the prototype is real code running on a real backend, there is no rebuild step: add the features you skipped, tighten the design, and publish. Apps built this way run with accounts, storage, and hosting included.', + 'Two honest limits. Puter AI Builder does not process payments itself, so the usual approach is to link out to a payment provider you already use. And for anything handling money, health information, or other people\'s personal data, read what was built before you rely on it, and treat the AI as a fast first draft rather than a security review.', + ], + }, + { + q: 'Can I generate a mobile app prototype?', + a: [ + 'Yes. Ask for a phone-first layout and resize the preview to check it at any width. The published prototype works on any phone from the link, and it can be added to the home screen with its own icon so it opens like an installed app.', + 'It is a web app, not a native one. Puter AI Builder does not produce iOS or Android binaries or App Store listings, which for a prototype is usually the point: testers open a link, and updates reach everyone instantly.', + ], + }, + { + q: 'Do I own the prototype, and can I export it?', + a: [ + 'Yes. The code, the design, and everything you publish are yours. Export the whole project as a zip at any time; it is standard HTML, CSS, and JavaScript with no build step, so it runs on any static host or straight off your disk. Keep it on [Puter](' + LINKS.puter + ') or take it somewhere else, with no license to renew and no export wall.', + ], + }, + ], + }, + + { + type: 'cta', + heading: 'Generate a prototype people can actually try', + body: 'Describe it, share the link, and keep the one that works. Free to start, backend and hosting included.', + label: 'Start building', + href: buildLink(''), + }, + ], + + related: ['use-cases', 'ai-app-builder', 'ai-website-builder', 'guides/how-to-write-a-build-prompt'], +}; diff --git a/src/content/pages/ai-saas-builder.js b/src/content/pages/ai-saas-builder.js new file mode 100644 index 0000000..d55c715 --- /dev/null +++ b/src/content/pages/ai-saas-builder.js @@ -0,0 +1,351 @@ +import { buildLink, LINKS } from '../site.js'; + +export default { + slug: 'ai-saas-builder', + parent: 'use-cases', + updated: '2026-09-23', + priority: 0.9, + changefreq: 'weekly', + navLabel: 'AI SaaS builder', + + title: 'AI SaaS Builder - Build and launch a SaaS for free', + description: + 'Build a SaaS with AI, no coding required. Sign-in, per-user data, AI features, and hosting are included, and running costs don\'t grow with your users. Free to start.', + ogTagline: 'From an idea to a product people can sign in to', + + hero: { + eyebrow: 'AI SaaS builder', + h1: 'AI SaaS builder that ships a product people can sign in to', + lead: + 'Build a SaaS with AI without writing a line of code. Puter AI Builder turns your idea into a working product with sign-in, per-user data, and hosting included, and it costs you nothing to run as your users grow.', + cta: { label: 'Start building', href: '/' }, + secondary: { label: 'See the use cases', href: '/use-cases/' }, + note: 'Free with a [Puter](' + LINKS.puter + ') account. Runs in any modern browser, including on a phone.', + demo: { + prompt: 'Build a SaaS for freelancers to track time and send invoices, with sign-in and a pricing page', + app: { + name: 'tallyhours.puter.site', + header: 'Tally', + blocks: [ + { + kind: 'stats', + items: [ + { value: '312', label: 'Active users' }, + { value: '1,204', label: 'Invoices this month' }, + { value: '92%', label: 'Paid on time' }, + ], + }, + { + kind: 'bars', + label: 'Signups, last 7 days', + values: [12, 18, 15, 24, 31, 27, 38], + }, + ], + }, + }, + }, + + sections: [ + { + type: 'grid', + id: 'what-you-get', + heading: 'What you get', + intro: + 'Everything a SaaS needs on day one, built into every app without a line of setup.', + items: [ + { + icon: 'lock', + title: 'Sign-in on day one', + body: + 'Your users sign in with their own [Puter](' + LINKS.puter + ') account. No user table, no session handling, and no password reset flow to write or maintain.', + }, + { + icon: 'database', + title: 'Per-user data, isolated by default', + body: + 'Each person\'s records, settings, and files are stored under their own account. Nobody can see anyone else\'s data unless you deliberately build a shared space.', + }, + { + icon: 'zap', + title: 'Shared state and public APIs', + body: + 'When your product needs a team workspace, a webhook, or an API other software can call, Puter AI Builder deploys a serverless worker from the same conversation.', + }, + { + icon: 'sparkles', + title: 'AI features without API keys', + body: + 'Chat, vision, and image generation models are available to the product you build, with no provider keys to hold and no AI bill for you to carry.', + }, + { + icon: 'globe', + title: 'Publish in one click, free hosting included', + body: + 'Your product goes live at its own address the moment you want it, served over HTTPS, ready to share with a link and install on a home screen.', + }, + { + icon: 'receipt', + title: 'Costs that don\'t grow with your users', + body: + 'People who use your product cover their own storage and AI usage through their own [Puter](' + LINKS.puter + ') account. A thousand users cost you the same as one. [How it works](' + LINKS.userPays + ').', + }, + ], + }, + + { + type: 'split', + id: 'last-mile', + heading: 'A product you can hand to strangers', + intro: + 'The gap between a demo and a product other people rely on is where most SaaS attempts stall. These three things close it.', + items: [ + { + title: 'It checks its own work', + art: 'verify', + body: [ + 'After every change Puter AI Builder runs the app in the preview and watches for errors. If something breaks, it reads the file, fixes the cause, and verifies again before handing it back to you.', + 'Every change is also saved as a version. If a new feature makes the product worse, restore the previous version in a click and take a different run at it.', + ], + }, + { + title: 'The backend is already there', + art: 'backend', + body: [ + 'Accounts, a key-value database, file storage, AI models, and serverless workers are available from the moment the app exists. There is no database to provision, no auth provider to connect, and no hosting account to create.', + 'That is most of the work of a SaaS backend done before you type the first prompt, and none of it is yours to keep running.', + ], + }, + { + title: 'You own the code, and you can leave', + art: 'files', + body: [ + 'The product is a normal folder of HTML, CSS, and JavaScript with no build step and no proprietary runtime. Download it as a zip whenever you like and host it anywhere.', + 'Refining it is precise, too: click any element in the live preview and say what should change about that exact button, table, or plan card.', + ], + }, + ], + }, + + { + type: 'steps', + id: 'how-to', + heading: 'How to build a SaaS with AI', + intro: 'Four steps from an idea to a product with its first users.', + schema: { + name: 'How to build a SaaS with AI', + description: + 'Build a working SaaS product with sign-in and per-user data from a plain-English description using the AI SaaS builder at builder.puter.com.', + }, + items: [ + { + title: 'Describe the product', + body: + 'Say who it is for, the job it does, and what a user should see after signing in. Mention the free and paid tiers if you have them in mind. The more specific you are, the closer the first version will be.', + }, + { + title: 'Watch it build', + body: + 'Puter AI Builder writes the app with sign-in and per-user storage wired in, runs it, and checks that it works. A first version is usually ready in a couple of minutes.', + }, + { + title: 'Refine it by talking, or by pointing', + body: + 'Ask for the next feature in plain language, or click any element in the preview and say what should be different. Every version is saved, so you can always go back.', + }, + { + title: 'Publish and get your first users', + body: + 'Press Publish to get a public link. Share it, add a link to your checkout page when you are ready to charge, and keep publishing changes as users tell you what they need.', + }, + ], + }, + + { + type: 'prompts', + id: 'starters', + heading: 'Not sure where to start? Try one of these', + intro: + 'Pick one and Puter AI Builder makes it for you. Then make it yours by describing what to change.', + items: [ + { + title: 'Time tracking and invoicing', + body: 'Timers per client, invoices from logged hours, and a pricing page.', + prompt: + 'Build a SaaS for freelancers where each user signs in, adds clients and projects, runs a timer or logs hours by hand, and turns logged hours into an invoice with their rate, tax, and a printable PDF. Add a landing page with a free and a pro tier, and save each user\'s data to their own Puter account.', + }, + { + title: 'Client portal for agencies', + body: 'Each client sees their own projects, files, and approvals.', + prompt: + 'Build a client portal SaaS where an agency signs in, creates a workspace per client, uploads deliverables, and posts status updates, and each client signs in to see only their own projects, download files, and approve or request changes on each deliverable. Use a Puter serverless worker so the agency and its clients share the same workspace data.', + }, + { + title: 'AI writing assistant', + body: 'Templates, tone controls, and a history of everything generated.', + prompt: + 'Build an AI writing assistant SaaS where users sign in, pick a template like blog outline, product description, or cold email, fill in a few fields, choose a tone, and get a draft they can edit and regenerate. Save every draft to the user\'s Puter account with search, and show usage this month on a settings page.', + }, + { + title: 'Feedback board and public roadmap', + body: 'Users submit ideas, vote, and watch statuses change.', + prompt: + 'Build a feedback board SaaS where anyone can submit a feature request and upvote others, signed-in users can comment, and an admin view lets me set each request to Planned, In progress, or Shipped and pin it to a public roadmap page. Use a Puter serverless worker so all visitors see the same board.', + }, + { + title: 'Booking SaaS for solo practitioners', + body: 'Availability, a public booking page per user, and reminders.', + prompt: + 'Build a booking SaaS where a coach or consultant signs in, sets weekly availability and session types with durations, and gets a public booking page at their own link where clients pick a slot and leave their email. Show the owner a calendar of upcoming sessions and save everything to their Puter account.', + }, + { + title: 'Team knowledge base', + body: 'Shared docs with search, and an AI answer box on top.', + prompt: + 'Build a knowledge base SaaS where a team signs in, writes and organizes docs in folders with a rich text editor, searches across everything, and asks a question in an AI answer box that replies using only the team\'s docs. Use a Puter serverless worker so everyone on the team sees the same docs.', + }, + ], + }, + + { + type: 'grid', + id: 'two-questions', + columns: 2, + heading: 'The two questions every SaaS founder asks', + intro: + 'Can it keep each customer\'s data separate, and can it charge them? Here is exactly where Puter AI Builder stands on both.', + items: [ + { + icon: 'users', + title: 'Multi-tenancy', + body: + 'Isolation is the default, not a feature you add. Every user\'s data is stored under their own [Puter](' + LINKS.puter + ') account, so one customer cannot reach another\'s records even if the app has a bug in its UI. When customers need to share, such as a team workspace or an agency and its clients, the shared part runs in a serverless worker you control, and everything else stays per user.', + }, + { + icon: 'receipt', + title: 'Billing', + body: + 'Puter AI Builder does not process payments or manage subscriptions itself. The usual approach is to link to a checkout page or payment link from a provider you already use, then gate paid features in the app around who has paid. What the product does cover is everything around the transaction: sign-in, per-user data, the free tier, and the features people are paying for.', + }, + ], + }, + + { + type: 'faq', + id: 'faq', + heading: 'AI SaaS builder FAQ', + items: [ + { + q: 'What is an AI SaaS builder?', + a: [ + 'An AI SaaS builder turns a plain-language description into a working software product that other people can sign in to and use. You describe what the product does and who it is for, and the AI designs the screens, sets up sign-in and per-user data, writes the logic, and runs the result so you can try it right away.', + 'It is different from an AI website builder, which produces a marketing site with a pricing page and a signup form but no product behind them. A SaaS builder produces the product: accounts, data that belongs to each user, and the features they came for. With Puter AI Builder the backend that makes this possible is included, so there is nothing to connect or host yourself.', + ], + }, + { + q: 'Do I need coding experience to build a SaaS?', + a: [ + 'No. Every step, from the first description to publishing, works in plain English, and you refine the product the same way, by asking for changes or clicking the element you want changed. Puter AI Builder runs the app after every change and fixes errors it finds before handing it back.', + 'What helps more than coding is clarity about the product: who the user is, the one job it does, and what they see after signing in. Our [guide to writing a build prompt](/guides/how-to-write-a-build-prompt/) covers how to describe that well.', + ], + }, + { + q: 'How do I create my own SaaS with it?', + a: [ + 'Describe the product, watch Puter AI Builder build it with sign-in and per-user storage wired in, refine it by asking for changes or pointing at what should be different, then press Publish to get a public link. The four steps above walk through each one, and the starter prompts give you a complete description to begin from.', + ], + }, + { + q: 'How long does it take to build a SaaS with AI?', + a: [ + 'A first working version with sign-in usually lands in a couple of minutes. Getting it to the point where you would show a paying customer is a conversation, and most products get there in a handful of changes. Every version is saved, so you can stop and pick it up later.', + ], + }, + { + q: 'How much does it cost to build a SaaS?', + a: [ + 'Building is free with a [Puter](' + LINKS.puter + ') account, and no card is required. Open Puter AI Builder, describe a product, and use it in the preview right away. Publishing is free too, and nothing is public until you decide.', + 'Very heavy use can hit the free tier\'s limits, at which point you can upgrade your Puter account. Ordinary building, publishing, and iterating do not.', + ], + }, + { + q: 'How much does it cost to run once I have users?', + a: [ + 'Nothing. The people who use your product cover their own storage and AI usage through their own [Puter](' + LINKS.puter + ') account, and hosting is included. Your infrastructure cost does not grow with your user count, so a product that takes off does not come with a surprise bill. [How it works](' + LINKS.userPays + ').', + 'This is the opposite of the usual SaaS economics, where every new free user costs you money in database rows and AI calls before they have paid you anything.', + ], + }, + { + q: 'Can I accept payments or subscriptions?', + a: [ + 'Puter AI Builder does not process payments or manage subscriptions itself, and there is no built-in checkout. The usual approach is to link to a payment provider you already use, such as a checkout page or a payment link, and gate paid features in your app around who has paid.', + 'Everything around the transaction is covered by the product you build: sign-in, per-user data, the free tier, and the features people are paying for. If built-in recurring billing is the deciding factor for you, a platform that bundles it may be a better fit, and you can still export what you build here and use it anywhere.', + ], + }, + { + q: 'Can I build a multi-tenant SaaS?', + a: [ + 'Yes, and isolation is the default rather than something you add. Each user\'s records and files are stored under their own [Puter](' + LINKS.puter + ') account, so one customer cannot reach another\'s data.', + 'When customers need to share data, such as a team workspace, an agency and its clients, or a public board, ask for it and Puter AI Builder deploys a serverless worker to hold the shared part. Everything else stays per user. The starter prompts above show both patterns.', + ], + }, + { + q: 'Does it support real data, sign-in, and integrations?', + a: [ + 'Yes. Sign-in, a key-value database, file storage, and AI models are built into every product, with nothing to set up. Data is real and persists between visits under each user\'s account.', + 'For integrations, a serverless worker can receive webhooks, expose a public API, or call other services on your users\' behalf. The app itself can also call any public API directly from the browser, the same way any web app can.', + ], + }, + { + q: 'Is it production-ready?', + a: [ + 'The pieces that usually make a first SaaS fragile are handled for you: hosting over HTTPS with nothing to patch, accounts you did not have to implement, per-user data isolation by default, and a preview that catches runtime errors before you see them. Many products built this way are used by real customers.', + 'What it does not replace is judgment. Code you did not write is still code you are responsible for. Read what was built before you charge for it, use the preview to try the empty state and bad input, and for anything handling money, health information, or other people\'s sensitive data, treat the AI as a fast first draft rather than a security review.', + ], + }, + { + q: 'Can a SaaS built here scale as it grows?', + a: [ + 'Hosting is static and served from Puter, so traffic to the app itself is not something you provision for. Storage and AI usage scale with your users because each user brings their own account for it, which is also why your costs stay flat. Shared workloads in a serverless worker scale with the platform rather than with a server you run.', + 'The practical ceiling is the same as for any web app: as the product grows, keep features focused and the data model simple. Because the output is standard web files, you can also hand the code to a developer at any point without starting over.', + ], + }, + { + q: 'Do I own the code? Can I export it?', + a: [ + 'Yes. The code, the design, and everything you publish are yours. There is no license to renew and no export wall, and export is not gated to a paid plan. Download the whole project as a zip whenever you like.', + 'Because the output is standard HTML, CSS, and JavaScript with no build step, an editor and a browser are the only tools you need to keep working on it elsewhere. Keep it on [Puter](' + LINKS.puter + ') or take it somewhere else at any time.', + ], + }, + { + q: 'What happens when the AI gets something wrong?', + a: [ + 'Most runtime errors are caught before you see them: Puter AI Builder reloads the preview after each change, watches for errors, and sends them back to the AI to fix and re-verify.', + 'For everything else, tell it what is wrong in one sentence, or click the offending element in the preview and describe the fix. If a change made things worse overall, version history lets you restore an earlier snapshot and take a different run at it.', + ], + }, + { + q: 'Can I use a custom domain?', + a: [ + 'Every published product gets its own puter.site address, served over HTTPS with nothing to configure. If you want your own domain, export the project and host it wherever your domain points, or put your domain in front of the published address with your DNS provider\'s redirect or proxy tools.', + ], + }, + { + q: 'Can I build a mobile app, or publish to the App Store and Google Play?', + a: [ + 'Every product you build works on phones and on the web from the same link, and on a phone it can be added to the home screen with its own icon so it opens like a native app. Puter AI Builder does not produce native iOS or Android binaries, so it does not publish to the app stores. For most SaaS that is a feature: there is no review to wait for, no fees, and updates go live for everyone instantly.', + ], + }, + ], + }, + + { + type: 'cta', + heading: 'Turn your idea into a product with users', + body: 'Build a SaaS with AI, no coding required. Free to start, with sign-in, data, and hosting included.', + label: 'Start building', + href: buildLink(''), + }, + ], + + related: ['use-cases', 'ai-app-builder', 'ai-website-builder', 'what-to-build'], +}; diff --git a/src/content/pages/ai-software-builder.js b/src/content/pages/ai-software-builder.js new file mode 100644 index 0000000..40c7476 --- /dev/null +++ b/src/content/pages/ai-software-builder.js @@ -0,0 +1,353 @@ +import { buildLink, LINKS } from '../site.js'; + +export default { + slug: 'ai-software-builder', + parent: 'use-cases', + updated: '2026-09-23', + priority: 0.9, + changefreq: 'weekly', + navLabel: 'AI software builder', + + title: 'AI Software Builder - Build business software for free', + description: + 'Build internal tools and business software with AI, no coding required. Sign-in, a database, storage, and hosting are included. Free with a Puter account, no lock-in.', + ogTagline: 'Describe the tool. Run the business on it.', + + hero: { + eyebrow: 'AI software builder', + h1: 'AI software builder that turns a description into working business software', + lead: + 'Describe the internal tool, portal, or workflow your team needs and Puter AI Builder writes it, runs it, and fixes its own errors. Sign-in, a database, and hosting are already there.', + cta: { label: 'Start building', href: '/' }, + secondary: { label: 'Browse use cases', href: '/use-cases/' }, + note: 'Free with a [Puter](' + LINKS.puter + ') account. Runs in any modern browser, nothing to install.', + demo: { + prompt: 'Build a helpdesk for our IT team with staff sign-in, ticket priorities, and a weekly volume chart', + app: { + name: 'helpdesk.puter.site', + header: 'Helpdesk', + blocks: [ + { + kind: 'stats', + items: [ + { value: '23', label: 'Open tickets' }, + { value: '2h', label: 'Median response' }, + { value: '61', label: 'Resolved this week' }, + ], + }, + { + kind: 'bars', + label: 'Tickets per day', + values: [9, 14, 11, 17, 8, 3, 2], + }, + ], + }, + }, + }, + + sections: [ + { + type: 'grid', + id: 'what-you-get', + heading: 'What you get', + intro: + 'The parts of business software that usually take a team to set up, already done.', + items: [ + { + icon: 'lock', + title: 'Sign-in with no user table to build', + body: + 'People sign in to your software with their [Puter](' + LINKS.puter + ') account. No password reset flow to write, no sessions to manage, and each person\'s data is kept under their own account from the first login.', + }, + { + icon: 'database', + title: 'A database with no schema to design', + body: + 'Records, settings, and files are stored through Puter.js the moment the software exists. There is no database server to provision, no migration to run, and no connection string to keep secret.', + }, + { + icon: 'zap', + title: 'Shared data and automations', + body: + 'When a tool needs state everyone sees, a webhook, scheduled work, or a small API, Puter AI Builder deploys a serverless worker from the same conversation. Multi-user software without a server of your own.', + }, + { + icon: 'shieldCheck', + title: 'Runs clean before it reaches you', + body: + 'Each change is loaded in the live preview and watched for runtime errors. Anything that throws goes back to the AI, which reads the file, repairs the cause, and re-verifies before the turn is reported as done.', + }, + { + icon: 'download', + title: 'Standard files, no lock-in', + body: + 'The output is plain HTML, CSS, and JavaScript with no build step. Download the whole project as a zip at any time and host it on any static host, or hand it to a developer to keep going.', + }, + { + icon: 'users', + title: 'Free to run for a team of any size', + body: + 'Everyone who uses your software covers their own storage and AI usage through their own [Puter](' + LINKS.puter + ') account, so ten users or ten thousand cost you the same: nothing. [How it works](' + LINKS.userPays + ').', + }, + ], + }, + + { + type: 'split', + id: 'real-software', + heading: 'Built like software, not a mockup', + intro: + 'The gap between a generated screen and a tool a team relies on is auth, data, and reliability. These three close it.', + items: [ + { + title: 'The backend is already running', + art: 'backend', + body: [ + 'Every project can call Puter.js for accounts, a key-value store, file storage, and AI models the moment it is created, already authenticated. The usual first week of setup does not happen.', + 'For anything that has to live outside the browser, a serverless worker gives you shared state, webhooks, scheduled jobs, or a public API without renting or patching a server. Real-time features like screen sharing and live collaboration use Puter\'s peer-to-peer API.', + ], + }, + { + title: 'Software that checks itself', + art: 'verify', + body: [ + 'A turn is not finished until the preview runs without errors. If a change breaks something, the AI sees the error, fixes the file that caused it, and runs it again before you ever look.', + 'Every turn is also snapshotted with a note about what changed. Restore any earlier version in a click, and a safety snapshot is taken first so the restore itself can be undone.', + ], + }, + { + title: 'Yours to take anywhere', + art: 'files', + body: [ + 'The project is a normal folder of web files. There is no proprietary runtime, no framework to learn, and no export wall between you and the code.', + 'Keep it published on Puter, or download the zip and put it on your own hosting. Puter itself is [open source](' + LINKS.puterGithub + '), so the platform underneath is not a black box either.', + ], + }, + ], + }, + + { + type: 'steps', + id: 'how-to', + heading: 'How to build software with AI', + intro: 'Four steps from a problem your team has to a tool that solves it.', + schema: { + name: 'How to build software with AI', + description: + 'Build working business software with sign-in, a database, and hosting from a plain-English description using the AI software builder at builder.puter.com.', + }, + items: [ + { + title: 'Describe the workflow', + body: + 'Say who uses the software, what they record, and what they need to see. Mention sign-in if more than one person will use it and shared data if everyone should see the same records.', + }, + { + title: 'Let it build and check itself', + body: + 'Puter AI Builder writes the screens, wires up storage and accounts, runs the result, and repairs any runtime error it finds. Longer builds show a plain-language checklist of what is done and what is left.', + }, + { + title: 'Refine by pointing or asking', + body: + 'Click the exact table, button, or field in the preview and say what should change, or ask in a sentence. Adjust spacing, colors, and type directly, and those edits stay put through later turns.', + }, + { + title: 'Share it with the team', + body: + 'Send a private draft link for feedback first, then press Publish to put it on its own address. Teammates sign in with their own accounts, and updates go live the moment you publish again.', + }, + ], + }, + + { + type: 'prompts', + id: 'starters', + heading: 'Software teams actually ask for', + intro: + 'Pick one and Puter AI Builder makes it. Then describe how your business does it differently.', + items: [ + { + title: 'IT helpdesk', + body: 'Tickets with priorities, assignment, and a shared queue for the whole team.', + prompt: + 'Build an IT helpdesk where staff sign in with their Puter account to submit tickets with a title, description, and priority, and agents can assign tickets, change the status (Open, In progress, Resolved), and leave comments. Use a Puter serverless worker so every agent sees the same queue, and show open tickets by priority on a dashboard.', + }, + { + title: 'Employee onboarding tracker', + body: 'Checklists per new hire, owners for each task, and a view of who is behind.', + prompt: + 'Build an employee onboarding tracker where I create a checklist template of tasks with an owner and a due offset in days, start a new hire from the template with a start date, and see each hire\'s progress with overdue tasks highlighted. Save everything to my Puter account and let me export a hire\'s checklist as CSV.', + }, + { + title: 'Expense approvals', + body: 'Submit, approve, reject, and see totals by month and category.', + prompt: + 'Build an expense approval tool where employees sign in, submit an expense with an amount, category, date, and a receipt photo, and a manager sees a queue to approve or reject with a note. Store receipts as files in Puter, keep shared records in a Puter serverless worker, and show approved totals per month and per category.', + }, + { + title: 'Client portal', + body: 'Each client sees only their own projects, files, and status updates.', + prompt: + 'Build a client portal where I sign in as the admin to create projects, upload deliverables, and post status updates, and each client signs in with their own Puter account to see only their projects, download their files, and leave comments. Store files in Puter storage and shared project data in a serverless worker.', + }, + { + title: 'Field inspection reports', + body: 'Photos, checklists, and an AI-written summary from a phone on site.', + prompt: + 'Build a field inspection app for a phone where an inspector picks a site, works through a checklist with pass, fail, and notes per item, attaches photos, and gets an AI-generated summary of the issues found using Puter\'s vision model. Save reports to my Puter account and produce a clean printable report page for each inspection.', + }, + { + title: 'Shift roster', + body: 'Weekly schedule, swap requests, and a view each person can check on their phone.', + prompt: + 'Build a shift roster where a manager builds a weekly schedule by assigning staff to morning, afternoon, and night shifts, staff sign in to see their own week and request a swap, and the manager approves or declines swaps. Keep the schedule in a Puter serverless worker so everyone sees the current version, and make it easy to read on a phone.', + }, + ], + }, + + { + type: 'grid', + id: 'fit', + columns: 2, + heading: 'What it is good for, and what it is not', + intro: + 'An AI software builder is only useful if you know its edges before you start. Here are ours.', + items: [ + { + icon: 'check', + title: 'A good fit', + body: + 'Internal tools, trackers, approval workflows, client and member portals, dashboards over your own records, admin panels, and AI-assisted tools like summarizers and intake assistants. Anything a web page can do, with real sign-in and real storage behind it, and multi-user when you need it.', + }, + { + icon: 'code', + title: 'Not the right tool', + body: + 'Native iOS or Android binaries, desktop installers, and software that must run on your own servers. Everything built here is web software: it installs to a home screen like an app and the files can be hosted anywhere, but backend code runs as Puter workers, not on a machine you manage. It also does not process payments itself.', + }, + ], + }, + + { + type: 'faq', + id: 'faq', + heading: 'AI software builder FAQ', + items: [ + { + q: 'What is an AI software builder?', + a: [ + 'An AI software builder takes a description of what a piece of software should do and produces the software itself: the screens, the data model, the logic, and the plumbing between them. Where an AI app builder tends to mean a single-purpose app, an AI software builder is expected to handle the things business software needs, such as sign-in for several people, records that persist, files, and workflows that move between users.', + 'Puter AI Builder does this in the browser. You describe the tool, it writes the files, runs them in a live preview, checks them for errors, and connects them to accounts, storage, and a database through Puter.js. You refine the result by asking for changes or clicking the part that should be different, then publish it to its own address.', + ], + }, + { + q: 'Can I build software without any coding knowledge?', + a: [ + 'Yes. The whole process happens in plain English, from the first description to publishing, and the builder fills in conventional choices where you have not specified something rather than leaving you a skeleton. If a request is genuinely ambiguous, you get at most one short round of product questions with suggested answers, never technical ones.', + 'You do not need to read the code, but you can. It is standard HTML, CSS, and JavaScript, so a developer can pick it up later without learning a platform.', + ], + }, + { + q: 'What kinds of software can I build with it?', + a: [ + 'The software small teams keep needing and rarely get built: ticketing and helpdesks, approval workflows, onboarding and compliance trackers, client portals, CRMs, inventory and asset registers, scheduling, dashboards, admin panels, and internal knowledge tools.', + 'Because the software can use Puter\'s accounts, storage, AI models, workers, and peer-to-peer connections, it can be multi-user, include AI features like summarizing or classifying records, and support real-time collaboration, all without a separate backend project.', + ], + }, + { + q: 'Is it real software or just a prototype?', + a: [ + 'Real software. The preview is the actual program running, not a rendering: people can sign in, save records, upload files, and come back tomorrow to find their data. Publishing puts the same files on a public address with HTTPS handled for you.', + 'What makes it more than a prototype is what is behind it. Each person\'s data is stored under their own [Puter](' + LINKS.puter + ') account, shared data lives in a serverless worker, and every change is verified before it is handed back. What it is not is a substitute for a review: for anything that handles money, health information, or other people\'s personal data, read what was built before you rely on it.', + ], + }, + { + q: 'Is there a free AI software builder? What is the catch?', + a: [ + 'Puter AI Builder is free to use with a [Puter](' + LINKS.puter + ') account, no card required, and publishing is free too. There is no credit meter to watch while you iterate.', + 'The honest limits: very heavy use can reach the free tier\'s limits, at which point you can upgrade your Puter account, and the people who use what you build bring their own Puter account for the storage and AI they consume. Ordinary building, publishing, and iterating do not run into either.', + ], + }, + { + q: 'How much does it cost to run for my team?', + a: [ + 'Nothing, at any size. Each person using your software covers their own storage and AI usage through their own [Puter](' + LINKS.puter + ') account, so there is no per-seat fee and no bill that grows with adoption. [How the user-pays model works](' + LINKS.userPays + ').', + ], + }, + { + q: 'How do several people use the same software with shared data?', + a: [ + 'Say so in the prompt. Sign-in comes from Puter accounts, so every user has their own identity with nothing for you to manage. Data that belongs to one person, like their settings or drafts, is stored under their account automatically.', + 'Data everyone should see, like a shared ticket queue or a schedule, goes in a serverless worker that Puter AI Builder deploys from the same conversation. Ask for roles, such as an admin who can create projects and clients who can only see their own, and it is written into the logic.', + ], + }, + { + q: 'What happens when the AI gets it wrong?', + a: [ + 'Runtime errors are mostly caught before you see them: after each change the preview is reloaded and watched, and anything it throws is sent back to the AI to fix and re-verify. A turn is not reported as done until the software runs clean.', + 'When the logic is wrong rather than broken, tell it in a sentence or click the element that misbehaves and describe the fix. If a change made things worse, restore the previous version from history and take a different run at it. Restores are themselves undoable.', + ], + }, + { + q: 'Can I change something small after it is built?', + a: [ + 'Yes, and small changes are the easy case. Click the field, column, or button in the preview and say what should be different, so you never have to explain which of four similar cards you mean. For spacing, colors, size, and type, adjust them directly on the element and the result is committed to a stylesheet the AI leaves alone on later turns.', + ], + }, + { + q: 'Can my team build it with me?', + a: [ + 'The project itself belongs to one [Puter](' + LINKS.puter + ') account, so building happens from one account at a time rather than as simultaneous editing. You can share a private draft link so colleagues can try the work in progress before anything is public, and duplicate a project to branch off a variation.', + 'The software you build is a different matter: it can be fully multi-user, with teammates and clients signing in with their own accounts and shared records in a worker.', + ], + }, + { + q: 'Do I own the code, and can I move it to my own codebase or hosting?', + a: [ + 'Yes. Everything generated is yours, with no license to renew and no export wall. Download the whole project as a zip whenever you like. It is plain web files with no build step, so it runs on any static host or straight off a disk, and a developer can continue in an ordinary editor.', + 'Calls to accounts, storage, and AI go through Puter.js, which keeps working from any host. Worker code runs on Puter rather than on a server you operate, which is the one part that is not lift-and-shift.', + ], + }, + { + q: 'Can it build desktop software or native mobile apps?', + a: [ + 'No. Puter AI Builder produces web software only. It does not output a desktop installer or an iOS or Android binary, and it does not publish to app stores.', + 'What you get instead is closer than it sounds: every project ships with a web manifest and icon set, so it installs to a phone home screen or a desktop and opens full screen like an installed app, with updates live for everyone the moment you publish.', + ], + }, + { + q: 'Can it connect to my spreadsheets, existing tools, or APIs?', + a: [ + 'You can attach CSVs, PDFs, images, and text files, and they are saved into the project for the builder to read and import, so starting from an existing spreadsheet export is straightforward. There is no directory of ready-made integrations or a live sync with a spreadsheet, so do not expect a one-click connector.', + 'For two-way connections, a serverless worker can receive webhooks and expose an API, and the software can call outside services the way any web software does. Describe the service and what should happen, and treat the result as a first draft to test against the real thing.', + ], + }, + { + q: 'Is it secure enough for business data?', + a: [ + 'The defaults keep the risk small. Published software is served over HTTPS with the certificate handled for you, there is no server of your own to patch, and each person\'s data lives under their own [Puter](' + LINKS.puter + ') account, so users only touch what is theirs unless you deliberately share it through a worker.', + 'What the builder does not do is audit your requirements for you. If your organization needs specific compliance guarantees, check Puter\'s current terms and documentation against them, and review the generated logic around permissions before you roll it out.', + ], + }, + { + q: 'Do AI software builders replace developers?', + a: [ + 'For the long tail of internal tools that never justified a developer\'s time, yes, in the sense that the tool gets built at all. For software with strict compliance needs, unusual integrations, or heavy custom infrastructure, a developer is still the right call, and the export makes handing off easy.', + 'The practical shift is that the person who understands the workflow can now build the first working version themselves, and a developer, if one is involved at all, starts from running software rather than from a document.', + ], + }, + ], + }, + + { + type: 'cta', + heading: 'Build the tool your team keeps asking for', + body: 'Describe it, and get working software with sign-in, a database, and hosting. Free to build, free to run.', + label: 'Start building', + href: buildLink(''), + }, + ], + + related: ['use-cases', 'ai-app-builder', 'ai-website-builder', 'what-to-build'], +}; diff --git a/src/content/pages/ai-ui-builder.js b/src/content/pages/ai-ui-builder.js new file mode 100644 index 0000000..2556ef5 --- /dev/null +++ b/src/content/pages/ai-ui-builder.js @@ -0,0 +1,367 @@ +import { buildLink, LINKS } from '../site.js'; + +const starterPrompt = 'Build a responsive web interface for my app that works on phones, tablets, and desktops. Include clear navigation, touch-friendly controls, and forms with validation. Use sample content I can replace and show me the result in the live preview.'; + +export default { + slug: 'ai-ui-builder', + parent: 'use-cases', + updated: '2026-09-23', + priority: 0.9, + changefreq: 'weekly', + navLabel: 'AI UI builder', + + title: 'AI UI Builder - Web & Responsive Mobile UI, Free', + description: + 'Build web and responsive mobile UI with AI. Describe your screens, refine layouts in a live preview, then publish free or export HTML, CSS, and JavaScript.', + ogTagline: 'One interface. Every screen size.', + + hero: { + eyebrow: 'AI UI builder', + h1: 'AI UI builder for web and responsive mobile interfaces', + lead: + 'Describe your screens and get a working web interface that adapts to desktops, tablets, and phones. Click through the UI, refine the layout at each size, and publish it to a link, without writing code.', + cta: { label: 'Build my UI', href: buildLink(starterPrompt) }, + secondary: { label: 'How to write a good prompt', href: '/guides/how-to-write-a-build-prompt/' }, + note: 'Free with a [Puter](' + LINKS.puter + ') account. Build responsive web UI for desktop and mobile browsers.', + demo: { + prompt: 'Design a running app UI with weekly activity, a workout list, and layouts for desktop and phone screens', + app: { + name: 'stride.puter.site', + header: 'This week', + blocks: [ + { + kind: 'stats', + items: [ + { value: '42 km', label: 'Distance' }, + { value: '5', label: 'Workouts' }, + { value: '5:12', label: 'Avg pace' }, + ], + }, + { + kind: 'bars', + label: 'Kilometers per day', + values: [6, 0, 8, 5, 0, 12, 11], + }, + ], + }, + }, + }, + + sections: [ + { + type: 'grid', + id: 'what-you-get', + heading: 'What you get', + intro: + 'Working screens, responsive layouts, and interactions you can try on desktop and mobile.', + items: [ + { + icon: 'layout', + title: 'Designs the whole interface', + body: + 'Describe the screen and Puter AI Builder designs it: layout, hierarchy, navigation, forms, cards, tables, empty states, and sensible default content, written for you rather than adapted from a template.', + }, + { + icon: 'code', + title: 'Interactions you can try immediately', + body: + 'The output is standard HTML, CSS, and JavaScript running in a live preview. Buttons press, forms validate, tabs switch. You can click through it and use it exactly as a visitor would, from the first version.', + }, + { + icon: 'cursor', + title: 'Point at what you want changed', + body: + 'Click any element in the preview and say what to do with it. Precise edits to the exact button, card, or column you mean, without describing where it is.', + }, + { + icon: 'phone', + title: 'Layouts for desktop and touch screens', + body: + 'Start with responsive layouts, then refine how each screen adapts: a sidebar that becomes a mobile menu, cards that stack on a phone, and controls with room to tap. Resize the preview and ask for changes at a specific width.', + }, + { + icon: 'database', + title: 'Wired to a real backend', + body: + 'Sign-in, per-user data, file storage, and AI models are available to the interface the moment it exists, with nothing to set up. A settings screen can actually save. A chat UI can actually answer.', + }, + { + icon: 'download', + title: 'Publish or export, no lock-in', + body: + 'Publish in one click to a free public link, or download the whole project as a zip. There is no build step and no proprietary format, so the files run on any static host or straight off your disk.', + }, + ], + }, + + { + type: 'split', + id: 'last-mile', + heading: 'Refine your UI from the first screen to the final layout', + intro: + 'The gap between a generated screen and an interface that holds up is where most of the time goes. These three things close it.', + items: [ + { + title: 'It runs before you see it', + art: 'verify', + body: [ + 'After every change the preview is reloaded and watched for runtime errors. If something breaks, Puter AI Builder reads the file, fixes the cause, and checks again before handing the interface back to you.', + 'Every turn is also saved as a version. If a redesign makes things worse, restore the previous one in a click and take a different run at it.', + ], + }, + { + title: 'Fine-tune by pointing, not re-prompting', + art: 'picker', + body: [ + 'Click any element in the running interface and describe what should change about that specific piece. No more explaining which of the four cards you mean.', + 'For styling, adjust spacing, color, size, and type directly on the selected element and watch it update live. Those tweaks are committed to a stylesheet of your own, and the AI leaves it alone on later turns.', + ], + }, + { + title: 'Real files you can take anywhere', + art: 'files', + body: [ + 'The project is a normal folder of HTML, CSS, and JavaScript. Download it as a zip whenever you like, hand it to a developer, or drop it into an existing codebase.', + 'Or publish it right here for free. Anything people use inside it, like sign-in or AI features, is covered by their own [Puter](' + LINKS.puter + ') account, so running it costs you nothing at any scale. [How it works](' + LINKS.userPays + ').', + ], + }, + ], + }, + + { + type: 'steps', + id: 'how-to', + heading: 'How to build web and mobile UI with AI', + intro: 'Four steps from a screen description to a responsive web interface you can share.', + schema: { + name: 'How to build web and mobile UI with AI', + description: + 'Generate a web interface, refine its desktop and mobile layouts, and publish it using the AI UI builder at builder.puter.com.', + }, + items: [ + { + title: 'Describe the interface', + body: + 'Say what the screens are for, the parts they need, and the look you want. Describe the desktop layout and what should change on a phone, such as a sidebar becoming bottom navigation or a table becoming cards. Attach a logo or reference images if you have them.', + }, + { + title: 'Watch it build', + body: + 'Puter AI Builder writes the HTML, CSS, and JavaScript, runs the interface in the live preview, and checks that it works. A first version is usually ready in a couple of minutes.', + }, + { + title: 'Check desktop and mobile layouts', + body: + 'Resize the preview and try the navigation, buttons, and forms at wide and narrow widths. Ask for changes or click an element to adjust it. Every version is saved, so you can go back.', + }, + { + title: 'Publish it, or take the files', + body: + 'Press Publish to get a public link with free hosting included, then open it on a phone to check touch controls and share it for feedback. Or download the project as a zip and keep working with the web files elsewhere.', + }, + ], + }, + + { + type: 'prompts', + id: 'starters', + heading: 'Not sure where to start? Try one of these', + intro: + 'Pick one and Puter AI Builder makes it for you. Then make it yours by pointing at what to change.', + items: [ + { + title: 'Analytics dashboard', + body: 'Sidebar, KPI cards, a chart, and a sortable table that reads well on any screen.', + prompt: + 'Design an analytics dashboard UI with a collapsible sidebar, four KPI cards across the top, a weekly line chart, a sortable table of recent orders, and a dark mode toggle. Use realistic sample data and keep the layout clean at phone and desktop widths.', + }, + { + title: 'Mobile onboarding flow', + body: 'Three steps with large touch targets, a progress indicator, and a summary.', + prompt: + 'Build a responsive web onboarding flow with three steps and a progress indicator: pick a plan, set up a profile with an avatar upload, and choose notification preferences. Use a single column with large touch targets on phones and a centered panel on desktop. Save the answers to my Puter account and show an editable summary screen.', + }, + { + title: 'Settings screen', + body: 'Responsive tabs, validated forms, toggles, and a save bar when needed.', + prompt: + 'Design a responsive settings page with a left tab list on desktop and a compact section selector on phones (Profile, Security, Notifications). Include form fields with inline validation, toggle switches, and a sticky save bar that appears only when something has changed. Save the settings to my Puter account so they persist between visits.', + }, + { + title: 'Pricing section', + body: 'Three tiers, a monthly and yearly toggle, and a comparison table.', + prompt: + 'Design a pricing section with three tiers, a monthly and yearly toggle that updates the prices, a highlighted recommended plan, a feature comparison table below, and an FAQ accordion. High contrast, generous spacing, and easy to read on a phone.', + }, + { + title: 'Kanban board', + body: 'Desktop columns, a mobile list, labels, due dates, and search.', + prompt: + 'Build a responsive kanban board UI with desktop columns for To do, In progress, and Done, drag-and-drop cards with colored labels and due dates, a modal to edit a card, and search. On phones, show one status list at a time and provide a move-to-status menu on each card so dragging is optional. Keep the board saved to my Puter account.', + }, + { + title: 'Chat interface', + body: 'Side-by-side chats on desktop, a focused conversation on mobile, and real AI replies.', + prompt: + 'Design a responsive chat interface with a conversation list beside the active chat on desktop. On phones, show one conversation at a time with a back button to the list. Include message timestamps, a typing indicator, and a multi-line composer that stays usable when the phone keyboard opens. Wire it to Puter\'s AI chat and save conversations to my Puter account.', + }, + ], + }, + + { + type: 'grid', + id: 'responsive-layouts', + columns: 2, + heading: 'One web interface, layouts for every screen', + intro: + 'Describe how people will use the UI at a desk and on the move. The same project can adapt its navigation, content, and controls to the space available.', + items: [ + { + icon: 'layout', + title: 'Room to work on desktop', + body: + 'Use sidebars, multi-column layouts, sortable tables, and detail panels where there is room for them. Ask for loading, empty, and error states, then click through the flow in the preview to see how the screens work together.', + }, + { + icon: 'phone', + title: 'Comfortable to use on a phone', + body: + 'Ask for stacked cards, compact navigation, readable text, and buttons with room to tap. Specify how forms behave when the keyboard opens and give drag or hover interactions a tap-based alternative. Publish the same project to a link that opens in a mobile browser.', + }, + ], + }, + + { + type: 'faq', + id: 'faq', + heading: 'AI UI builder FAQ', + items: [ + { + q: 'What is an AI UI builder?', + a: [ + 'An AI UI builder turns a plain-language description into a user interface: the layout, the components, the styling, and the states in between. You say what the screen is for and what it needs, and the AI designs it and builds it, usually in minutes.', + 'Puter AI Builder creates working web UI in HTML, CSS, and JavaScript, with responsive layouts for desktop and mobile browsers. You can click through the screens, refine individual elements, use Puter accounts and storage when needed, and publish the interface or download its files.', + ], + }, + { + q: 'Do I need design or coding skills?', + a: [ + 'No. Everything from the first description to publishing works in plain English. You refine the interface the same way, by asking for changes or clicking the element you want changed, and you can adjust spacing, colors, and type directly on an element without touching code.', + 'If you do know design or code, it helps. Precise descriptions get closer first versions, and the output is ordinary HTML, CSS, and JavaScript you can read and edit yourself.', + ], + }, + { + q: 'Is the AI UI builder free?', + a: [ + 'Yes. Building and publishing are free with a [Puter](' + LINKS.puter + ') account, and no card is required. Open Puter AI Builder, describe an interface, and use it in the preview right away. Nothing is public until you decide to publish.', + 'Very heavy use can hit the free tier\'s limits, at which point you can upgrade your Puter account. Ordinary building, iterating, and publishing do not.', + ], + }, + { + q: 'What types of UI can I build?', + a: [ + 'Dashboards, admin panels, settings and profile screens, onboarding flows, forms, tables and data views, kanban boards, chat interfaces, landing pages, pricing sections, and complete multi-screen apps. Anything a web page can show, at phone or desktop size.', + 'Because the interface can use Puter\'s accounts, storage, and AI models, it can also be a working product rather than a front for nothing: a settings page that saves, a login that logs in, a chat that answers.', + ], + }, + { + q: 'Can I edit the generated UI?', + a: [ + 'Yes, in three ways. Ask for a change in plain language. Click an element in the live preview and describe what should be different about that piece specifically. Or select an element and adjust its spacing, color, size, and type directly, watching it update as you go.', + 'Direct visual edits are committed to a stylesheet of your own, which the AI leaves alone on later turns, so a tweak you made by hand does not get undone by the next request.', + ], + }, + { + q: 'Does it support responsive design?', + a: [ + 'Yes. Interfaces are written responsively by default. Resize the preview to check phone, tablet, and desktop widths, then ask for changes to a particular layout: stack the cards on mobile, collapse the sidebar, or shorten the table. Check the published interface on the devices your audience uses, including touch controls and forms with the keyboard open.', + ], + }, + { + q: 'Can I build mobile UI for iPhone and Android?', + a: [ + 'Yes, as responsive web UI that opens in the browser on iPhone and Android. Ask for phone-sized screens, bottom navigation, touch-friendly controls, and layouts that adapt when the screen gets wider. The same published link works on desktop too.', + 'The output is web files. Native iOS or Android interfaces and app-store packages are outside this builder\'s scope.', + ], + }, + { + q: 'Can I use the UI in a real product?', + a: [ + 'Yes. The interface is real, production-format code, not a prototype export: standard HTML, CSS, and JavaScript with no build step. People publish it as-is with hosting included, or download it and integrate it elsewhere.', + 'Code you did not write is still code you are responsible for. For anything handling money, health information, or other people\'s personal data, read what was built and treat the AI as a fast first draft rather than a security review.', + ], + }, + { + q: 'Can I connect a backend?', + a: [ + 'One is already connected. Every interface built here can use user accounts, a key-value database, file storage, and chat, vision, and image models through [Puter](' + LINKS.puter + '), with no API keys to manage and nothing to set up. When something has to run outside the browser, like shared state, a webhook, or a public API, Puter AI Builder can deploy a serverless worker from the same conversation.', + 'If you want the interface to talk to a backend you already have, describe the API and it will be wired up like any other web page would be.', + ], + }, + { + q: 'Can I export the UI, and in what format?', + a: [ + 'Yes. Download the whole project as a zip at any time. It is standard HTML, CSS, and JavaScript with no framework and no proprietary format, so it runs on any static host, in any editor, or straight off your disk. There is no export wall and no license to renew.', + ], + }, + { + q: 'Can I export to Figma, or import a Figma design?', + a: [ + 'Puter AI Builder creates editable web files. It does not export to Figma or import Figma files and design-system libraries.', + 'You can attach screenshots, a logo, and reference files to the chat, or share a link to an existing site, and describe the layout, styling, and mobile behavior you want to follow.', + ], + }, + { + q: 'Does it output React or Tailwind components?', + a: [ + 'No. The output is complete pages in plain HTML, CSS, and JavaScript, with no framework and no build step. That is what makes the files portable and immediately publishable, and it is why a browser and an editor are the only tools needed to keep working on them.', + 'For an existing React project, the exported files can serve as a reference, but adapting them to your components and build setup is a separate development step.', + ], + }, + { + q: 'What happens when the AI gets the UI wrong?', + a: [ + 'Runtime errors are mostly caught before you see them: Puter AI Builder reloads the preview after each change, watches for errors, and sends them back to the AI to fix and re-verify. A turn is not reported as done until the interface runs clean.', + 'For everything else, tell it what is wrong in one sentence, or click the offending element and describe the fix. If a change made things worse overall, version history lets you restore an earlier snapshot in a click and try a different direction.', + ], + }, + { + q: 'Will later changes undo the tweaks I already made?', + a: [ + 'Not the visual ones. Spacing, color, size, and type adjustments you make directly on an element are committed to a stylesheet of your own, and the AI leaves that file alone on later turns. Larger edits are made surgically to the files involved rather than by rewriting the whole project, and every turn is saved as a version you can restore if something drifts.', + ], + }, + { + q: 'When is this UI builder a good fit?', + a: [ + 'Use it to build a responsive web interface you can try, customize, and publish: a dashboard, an onboarding flow, settings screens, or a complete web app. You edit by describing changes or selecting elements, and can add sign-in, saved data, or AI through Puter.', + 'The output is HTML, CSS, and JavaScript. If your delivery requires editable Figma layers, framework components, or native mobile code, those are different output formats and require another workflow.', + ], + }, + { + q: 'How much does it cost to run what I build?', + a: [ + 'Nothing. Hosting is included, and anything people use inside the interface, like sign-in, storage, or AI features, is covered by their own [Puter](' + LINKS.puter + ') account. There are no credits to watch and no surprise bill if it takes off. [How it works](' + LINKS.userPays + ').', + ], + }, + { + q: 'Can my team collaborate?', + a: [ + 'Each project belongs to one [Puter](' + LINKS.puter + ') account, so building happens from one account at a time. You can share a private link to the work-in-progress preview so a teammate or client can look before anything is published, and duplicate a project to branch off a variation without touching the original.', + 'The interface you build can be fully multi-user: people sign in with their own accounts, and shared data can live in a serverless worker so everyone sees the same thing.', + ], + }, + ], + }, + + { + type: 'cta', + heading: 'Build your web and mobile UI', + body: 'Describe the screens, refine the responsive layouts, and publish a working web interface. Free to start, hosting included.', + label: 'Build my UI', + href: buildLink(starterPrompt), + }, + ], + + related: ['use-cases', 'ai-app-builder', 'ai-website-builder', 'guides/how-to-write-a-build-prompt'], +}; diff --git a/src/content/pages/ai-website-builder.js b/src/content/pages/ai-website-builder.js index d3ab7c9..44fd4c3 100644 --- a/src/content/pages/ai-website-builder.js +++ b/src/content/pages/ai-website-builder.js @@ -310,5 +310,5 @@ export default { }, ], - related: ['ai-app-builder', 'for', 'guides/how-to-build-a-website-with-ai', 'what-to-build'], + related: ['ai-app-builder', 'use-cases', 'for', 'guides/how-to-build-a-website-with-ai', 'what-to-build'], }; diff --git a/src/content/pages/for.js b/src/content/pages/for.js index cf6ba60..a2d8ddb 100644 --- a/src/content/pages/for.js +++ b/src/content/pages/for.js @@ -212,5 +212,5 @@ export default { }, ], - related: ['ai-app-builder', 'ai-website-builder', 'what-to-build', 'guides/how-to-write-a-build-prompt'], + related: ['ai-app-builder', 'ai-website-builder', 'use-cases', 'what-to-build', 'guides/how-to-write-a-build-prompt'], }; diff --git a/src/content/pages/index.js b/src/content/pages/index.js index 0cf98f2..b0d45f5 100644 --- a/src/content/pages/index.js +++ b/src/content/pages/index.js @@ -8,9 +8,23 @@ // // Profession pages live under /for/ and are built by the verticalPage factory // (src/content/verticals.js): shared skeleton, fully individual copy. +// +// Use-case pages (ai-form-builder, ai-game-builder, ...) are top-level URLs +// that nest under the /use-cases/ hub via `parent`, which gives them a +// breadcrumb and routes their crawl path through the hub. import aiAppBuilder from './ai-app-builder.js'; import aiWebsiteBuilder from './ai-website-builder.js'; +import useCases from './use-cases.js'; +import aiLandingPageBuilder from './ai-landing-page-builder.js'; +import aiFormBuilder from './ai-form-builder.js'; +import aiPortfolioBuilder from './ai-portfolio-builder.js'; +import aiUiBuilder from './ai-ui-builder.js'; +import aiPrototypeGenerator from './ai-prototype-generator.js'; +import aiSoftwareBuilder from './ai-software-builder.js'; +import aiSaasBuilder from './ai-saas-builder.js'; +import aiDeckBuilder from './ai-deck-builder.js'; +import aiGameBuilder from './ai-game-builder.js'; import whatToBuild from './what-to-build.js'; import features from './features.js'; import vibeCoding from './vibe-coding.js'; @@ -36,6 +50,16 @@ import guideBuildPrompt from './guide-build-prompt.js'; export const PAGES = [ aiAppBuilder, aiWebsiteBuilder, + useCases, + aiLandingPageBuilder, + aiFormBuilder, + aiPortfolioBuilder, + aiUiBuilder, + aiPrototypeGenerator, + aiSoftwareBuilder, + aiSaasBuilder, + aiDeckBuilder, + aiGameBuilder, whatToBuild, features, vibeCoding, diff --git a/src/content/pages/use-cases.js b/src/content/pages/use-cases.js new file mode 100644 index 0000000..b08f934 --- /dev/null +++ b/src/content/pages/use-cases.js @@ -0,0 +1,148 @@ +import { buildLink } from '../site.js'; + +// The hub for use-case pages: the things people most often open the builder to +// make, one card each. Its job is routing, in the same spirit as /for/: name +// the thing in one card, and hand the reader to a page written for it. +// +// Every card opens a landing page written for that job. To add a use case, +// write its page (see ai-form-builder.js), register it in index.js with +// `parent: 'use-cases'`, and add a card here. + +const cases = [ + { + icon: 'layout', + label: 'Apps', + slug: 'ai-app-builder', + body: 'Trackers, CRMs, portals, and tools with a real backend: sign-in, storage, and a database, with no server to run.', + }, + { + icon: 'globe', + label: 'Websites', + slug: 'ai-website-builder', + body: 'A multi-page site in your own style, live on a real URL, that you update by describing the change.', + }, + { + icon: 'zap', + label: 'Landing pages', + slug: 'ai-landing-page-builder', + body: 'One page that sells one thing: a headline, the benefits, some proof, and a call to action, published in minutes.', + }, + { + icon: 'pen', + label: 'Forms', + slug: 'ai-form-builder', + body: 'Signups, surveys, intake, and RSVPs, with the responses saved where you can see them and no form service in between.', + }, + { + icon: 'camera', + label: 'Portfolios', + slug: 'ai-portfolio-builder', + body: 'Your work, shown the way you want it seen, with a contact form and a design that is yours rather than a template.', + }, + { + icon: 'sliders', + label: 'UI', + slug: 'ai-ui-builder', + body: 'Web and responsive mobile UI, from desktop dashboards to touch-friendly phone screens. Preview, refine, and publish one interface for every screen size.', + }, + { + icon: 'eye', + label: 'Prototypes', + slug: 'ai-prototype-generator', + body: 'A working prototype at a link you can hand to testers, versioned so you can branch ideas, and able to become the product.', + }, + { + icon: 'briefcase', + label: 'Software', + slug: 'ai-software-builder', + body: 'Internal tools and business software with sign-in, a database, and storage included, and nothing to host yourself.', + }, + { + icon: 'users', + label: 'SaaS', + slug: 'ai-saas-builder', + body: 'Accounts, per-user data, AI features, and hosting from day one, with running costs that do not grow with your users.', + }, + { + icon: 'file', + label: 'Online decks', + slug: 'ai-deck-builder', + body: 'An online presentation you share with a link and present in a browser. Refine the slides, republish, and keep the same URL.', + }, + { + icon: 'wand', + label: 'Games', + slug: 'ai-game-builder', + body: 'Puzzles, arcade games, and word games, playable in the browser and on a phone, published to a link you can send.', + }, +]; + +export default { + slug: 'use-cases', + updated: '2026-09-23', + priority: 0.8, + changefreq: 'weekly', + navLabel: 'Use cases', + + title: 'AI Builder Use Cases: Apps, Websites, Forms, and More | Puter', + description: + 'Use cases for Puter AI Builder: apps, websites, landing pages, forms, portfolios, SaaS, decks, games, and more. Describe what you need and get it built, free.', + ogTagline: 'One builder, eleven jobs', + + hero: { + eyebrow: 'Use cases', + h1: 'One builder for whatever you need to make', + lead: + 'Apps, websites, landing pages, forms, and more, all from a plain-English description. Pick a use case below to see how it works for that job.', + cta: { label: 'Start building free', href: '/' }, + secondary: { label: 'Browse prompts', href: '/what-to-build/' }, + note: 'Free with a Puter account. No code, no templates to fight, nothing to install.', + demo: { + prompt: 'Build a landing page for my app with a signup form and pricing', + app: { + name: 'launch.puter.site', + header: 'Signups', + blocks: [ + { + kind: 'stats', + items: [ + { value: '312', label: 'Signups' }, + { value: '4.8%', label: 'Conversion' }, + { value: '38', label: 'Today' }, + ], + }, + { + kind: 'bars', + label: 'Signups by day', + values: [20, 35, 48, 42, 70, 88, 64], + }, + ], + }, + }, + }, + + sections: [ + { + type: 'personas', + id: 'use-cases', + heading: 'Pick the job', + intro: + 'Every card is one kind of thing the builder makes well, and opens a page written for that job: what you get, how to build it, prompts to start from, and the questions people ask.', + more: 'Read more', + items: cases, + after: [ + 'Not on the list? The list is where people start, not where the tool stops. Describe the thing in the [builder](/) directly, or see the [pages written for specific professions](/for/).', + ], + }, + + + + { + type: 'cta', + heading: 'Describe the thing you need', + body: 'Pick a card above for a running start, or just start typing. One sentence is enough.', + label: 'Open the builder', + href: buildLink(''), + }, + ], +}; diff --git a/src/content/site.js b/src/content/site.js index 1e440fc..2255d01 100644 --- a/src/content/site.js +++ b/src/content/site.js @@ -64,6 +64,7 @@ export const LINKS = { export const HEADER_NAV = [ { label: 'App builder', slug: 'ai-app-builder' }, { label: 'Website builder', slug: 'ai-website-builder' }, + { label: 'Use cases', slug: 'use-cases' }, { label: "Who it's for", slug: 'for' }, { label: 'What to build', slug: 'what-to-build' }, { label: 'Features', slug: 'features' }, @@ -82,6 +83,18 @@ export const FOOTER_NAV = [ { label: 'Features', slug: 'features' }, ], }, + { + heading: 'Use cases', + links: [ + { label: 'All use cases', slug: 'use-cases' }, + { label: 'Landing pages', slug: 'ai-landing-page-builder' }, + { label: 'Forms', slug: 'ai-form-builder' }, + { label: 'Portfolios', slug: 'ai-portfolio-builder' }, + { label: 'Prototypes', slug: 'ai-prototype-generator' }, + { label: 'SaaS', slug: 'ai-saas-builder' }, + { label: 'Games', slug: 'ai-game-builder' }, + ], + }, { heading: 'Made for', links: [ diff --git a/src/css/styles.css b/src/css/styles.css index 184ca07..08bddee 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1893,6 +1893,10 @@ audio::-webkit-media-controls-play-button, audio::-webkit-media-controls-panel { .chat-copyright { flex-shrink: 0; padding: 24px 0 12px; + /* Reclaim the column's 20px side padding: the seven-link nav below needs + ~570px on one line, and the column's content box is 560px. */ + margin-left: -20px; + margin-right: -20px; display: flex; flex-direction: column; align-items: center; @@ -1916,7 +1920,7 @@ audio::-webkit-media-controls-play-button, audio::-webkit-media-controls-panel { justify-content: center; align-items: center; gap: 6px 16px; - max-width: 560px; + max-width: 600px; } .chat-footer-nav a { @@ -4229,6 +4233,11 @@ body.preview-active.chat-hidden .chat { padding-left: 14px; padding-right: 14px; } + /* Keep the footer's reclaimed side padding in step with the column's. */ + .chat-copyright { + margin-left: -14px; + margin-right: -14px; + } /* iOS Safari zooms the whole page when an input with font-size < 16px gets focus. Bump the interactive text fields to 16px to suppress that. */ @@ -4484,6 +4493,10 @@ body.preview-active.chat-hidden .chat { padding-left: 10px; padding-right: 10px; } + .chat-copyright { + margin-left: -10px; + margin-right: -10px; + } .chat-tagline { font-size: 1.2rem; } .chat-tagline-sub { font-size: 0.95rem; } } diff --git a/src/index.html b/src/index.html index 4e48b46..25a0713 100644 --- a/src/index.html +++ b/src/index.html @@ -135,6 +135,7 @@