Visitors usually need three answers quickly: what work the company accepts, where it works, and whether its project experience matches their job. A gallery without context cannot answer those questions.
This guide shows a business owner how to prepare the facts, use an AI coding tool to build a static Next.js website, review it, and create a temporary public version for checking. The result is a static company site with service areas, project categories, selected work, and inquiry details. It is not a replacement for a booking system, customer database, or professional review.
Decide what the first version must do
Keep the first release narrow. A visitor should understand the business, decide whether it is relevant, and reach the correct next step. Adding accounts or live records turns a simple company website into a software project with different security and operating responsibilities.
Write down the source of truth for each item before opening the AI tool:
| Information | What the owner must supply |
|---|---|
| Work types | New builds, renovation, repair, commercial work, or other actual services |
| Service area | Cities or distance limits the company really covers |
| Projects | Photos, dates, scope, and owner permission |
| Qualifications | Current licenses and certifications that may be advertised |
| Inquiry | Information needed before an estimate |
Remove secrets, private customer material, internal contracts, unpublished financial information, and high-resolution source assets from the working folder. If a fact is missing, mark it for confirmation; do not ask AI to fill the gap convincingly.
Send this planning prompt first:
I lead a company in the [industry] industry. The company is called [company name] and provides [product or service] to [target customer]. A common customer problem is [problem], and our difference from similar companies is [difference]. I want visitors to [book / request a quote / call / buy]. Do not write code yet. First create a one-page list covering the website goal, target customer, core value, information I must supply, and recommended pages. Do not invent case studies, prices, reviews, or credentials.
Read the answer as an information checklist. Correct the facts before asking for layout or code.
Choose a visual direction without copying the example
The reference below is a local working asset from the Sakupa website guide's prompt toolbox. It is for composition, spacing, typography, and visual hierarchy—not for names, copy, figures, reviews, or business claims.
Swiss Modernism suits factual project information. Strong alignment, numbered sections, and disciplined captions help visitors compare work without turning the page into a visual collage.
Attach the image to the AI tool, then use the exact style direction recorded for this article:
Use the attached reference image only for visual direction. Do not copy company names, text, numbers, testimonials, or claims from it.
Design with Swiss Modernism 2.0. Use: strict grid system (12 columns), Helvetica/Inter fonts, mathematical spacing, asymmetric balance, high contrast, minimal decoration, clean hierarchy, single accent color.
Make the layout readable on mobile and desktop. First turn this direction into a design rule sheet covering color, typography, spacing, buttons, images, and dividers. Wait for my approval before implementation.
Approve the resulting design rules before implementation. Check text size, contrast, mobile behavior, navigation, button labels, and whether the style still fits the business.
Build a static Next.js site in small steps
A static site is a set of files produced in advance. It is a good fit for company information that does not need a server to calculate a private response for each visitor. State that boundary explicitly:
Build this business website with the Next.js App Router and ensure output: 'export' produces static files. Pages, images, navigation, and small browser-side interactions are allowed. Do not use a database, login, Next.js API Routes, Server Actions, request-time rendering, private environment variables, or features that require server processing. Before implementation, list any requirement that cannot fit a static website and propose an alternative that needs no backend.
Create service, project, company, and contact sections. Give every project image a useful caption and size images for the web before adding more pages.
Implement only the home page first. Do not create all pages at once. The home page must include a headline that explains the business, a short description, one primary action, three core benefits, genuine trust information, and footer contact details. Reuse the approved design rules. When complete, tell me which devices and content I should check, and wait for my approval before building the next page.
Open the local result yourself. Follow every navigation link, read the page on a phone-sized screen, and replace every placeholder or unconfirmed statement with either an approved fact or a deliberate omission.
Separate automated checks from owner approval
AI can find broken links, missing alternative text, layout problems, and files that should not enter the build. It cannot authorize a photograph, certify a qualification, or decide that a commercial promise is safe.
Perform a pre-delivery review of the current static Next.js website. Separate the result into “Checked by AI” and “I must confirm.” AI should check widths 375, 768, 1024, and 1440; keyboard navigation; text contrast; image alternative text; reduced motion; links; 404 behavior; static build; and whether .env files, secrets, customer data, or non-public files entered the output. The human section must list company information, prices, business promises, permissions, privacy, and form destinations.
For this construction company, the owner must personally approve photo ownership, project addresses, license wording, service boundaries, estimate conditions, and safety claims. Keep a dated copy of the approved text and assets so the source of each public claim is clear.
Install Sakupa MCP, then fully restart the AI tool
For the preview-and-inspection example, this guide uses Sakupa MCP, which is developed by the author. It is one implementation option in the workflow, not a requirement for building the website.
Paste the current configuration into an AI tool that supports MCP:
Install and enable the latest version of Sakupa MCP in the current AI tool using the following configuration:
{
"mcpServers": {
"sakupa": {
"command": "npx",
"args": ["-y", "@sakupa/mcp@latest"]
}
}
}
After saving the configuration, fully quit the AI application and start it again. Merely closing the project, opening another window, or continuing the same chat is not enough. Reopen the website project after the restart.
Now verify the connection before allowing any initialization, inspection, upload, or publication:
Confirm that Sakupa MCP is connected and that the init, analyze, and deploy tools are available. Do not initialize, analyze, upload, or publish anything yet. If the tools are unavailable, check whether the Sakupa MCP configuration was loaded after the AI tool restarted.
Stop here if init, analyze, and deploy are not available. Check the MCP configuration and restart the AI tool again; do not continue on the assumption that the connection probably worked.
Initialize and inspect before publishing
Once the three tools are visible, prepare the open project without publishing it:
Use Sakupa to prepare the project currently open in this AI tool for first-time use. Do not ask me to choose a folder, and do not publish the website. Tell me whether it was successful when complete.
Only after that succeeds, inspect the actual publishable output:
Use Sakupa to inspect the current project and identify the actual website content that can be published. Inspect only; do not upload or make anything public. Tell me what is ready to publish, whether any files should not be made public, and what still requires my confirmation.
Read the inspection result. Remove secrets, private files, source material, and anything you cannot explain. Compare the publishable page with the approved facts, not just with the local preview.
Require a final confirmation before deployment
Publishing changes who can see the site. The AI tool must explain access, duration, and anything the owner needs to retain, then wait for an explicit answer:
Use Sakupa to publish the website that passed the previous inspection. Before making it public for the first time, explain who can access it, how long the free website remains available, and what I need to keep safe. Wait for my explicit confirmation before publishing. When complete, give me the working URL and the expiration time with time zone.
Open the returned URL in a separate browser session. Check the title, images, mobile layout, links, contact destination, and expiration time. A successful tool response is not proof that the public page is correct.
Keep private or dynamic work outside the static site
Do not place live project dashboards, subcontractor systems, customer records, and estimate calculators that require private data in this public build. Use an established service designed for those jobs and link to it when appropriate. This keeps the company site easy to review and reduces the amount of sensitive data handled by the website project.
Construction licensing, advertising, warranty, and safety rules differ across countries and regions. Have a qualified local reviewer check regulated statements.
The practical stopping point is a small site whose facts the owner can verify and whose public output has been inspected. Add another feature only when someone has accepted responsibility for its data, security, cost, and maintenance.
Top comments (0)