{"id":896,"date":"2025-12-12T15:49:05","date_gmt":"2025-12-12T20:49:05","guid":{"rendered":"https:\/\/fixyourowncredit.studio1live.com\/downloads\/?post_type=download&#038;p=896"},"modified":"2025-12-12T15:49:07","modified_gmt":"2025-12-12T20:49:07","slug":"a-i-web-build-kit","status":"publish","type":"download","link":"https:\/\/fixyourowncredit.studio1live.com\/downloads\/downloads\/a-i-web-build-kit\/","title":{"rendered":"A.I. Web Build Kit"},"content":{"rendered":"<body>\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"640\" height=\"288\" src=\"https:\/\/i0.wp.com\/fixyourowncredit.studio1live.com\/downloads\/wp-content\/uploads\/2025\/12\/webbuilder.png?resize=640%2C288&#038;ssl=1\" alt=\"\" class=\"wp-image-897\" loading=\"lazy\" srcset=\"https:\/\/i0.wp.com\/fixyourowncredit.studio1live.com\/downloads\/wp-content\/uploads\/2025\/12\/webbuilder.png?resize=1024%2C460&amp;ssl=1 1024w, https:\/\/i0.wp.com\/fixyourowncredit.studio1live.com\/downloads\/wp-content\/uploads\/2025\/12\/webbuilder.png?resize=300%2C135&amp;ssl=1 300w, https:\/\/i0.wp.com\/fixyourowncredit.studio1live.com\/downloads\/wp-content\/uploads\/2025\/12\/webbuilder.png?resize=768%2C345&amp;ssl=1 768w, https:\/\/i0.wp.com\/fixyourowncredit.studio1live.com\/downloads\/wp-content\/uploads\/2025\/12\/webbuilder.png?w=1332&amp;ssl=1 1332w, https:\/\/i0.wp.com\/fixyourowncredit.studio1live.com\/downloads\/wp-content\/uploads\/2025\/12\/webbuilder.png?w=1280&amp;ssl=1 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>self-hosted <strong>AI Web Build Kit<\/strong>: a single page your users open, fill a few fields, drop assets or a ZIP, and it spits out a ready-to-deploy static-site <strong>ZIP<\/strong> (plus a live server preview). Works on any cheap cPanel host (PHP + ZipArchive).<\/p>\n\n\n\n<p>Below is a <strong>copy-paste starter<\/strong> you can upload as <code>public_html\/ai-web-build-kit\/<\/code>. It has:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>a builder UI (<code>index.html<\/code>)<\/li>\n\n\n\n<li>a PHP build endpoint that assembles pages and zips them (<code>kit\/api\/build.php<\/code>)<\/li>\n\n\n\n<li>two starter templates (Landing, Portfolio)<\/li>\n\n\n\n<li>merging of an <strong>optional ZIP<\/strong> the user uploads (your \u201cone-click ZIP merge\u201d)<\/li>\n\n\n\n<li>a simple \u201cindex.html creator\u201d via form fields (headline, hero media, features, pages, etc.)<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\">\n\n\n\n<h1 class=\"wp-block-heading\">How it works (for your users)<\/h1>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Visit <code>\/ai-web-build-kit\/<\/code><\/li>\n\n\n\n<li>Fill site name, colors, hero, features, pages<\/li>\n\n\n\n<li>(Optional) upload images\/CSS\/JS <strong>or<\/strong> a prepared site ZIP (it will merge)<\/li>\n\n\n\n<li>Click <strong>Build &amp; Download ZIP<\/strong><\/li>\n\n\n\n<li>Upload that ZIP to cPanel \u2192 <strong>Extract<\/strong> \u2192 site is live<\/li>\n<\/ol>\n\n\n\n<p>It also writes a <strong>preview<\/strong> at <code>\/ai-web-build-kit\/kit\/_output\/{your-site-slug}\/index.html<\/code> so people can click around before downloading.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Deploy steps (once)<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In cPanel \u2192 <strong>File Manager<\/strong>, create a folder: <code>public_html\/ai-web-build-kit\/<\/code>.<\/li>\n\n\n\n<li>Add the files above in the same tree (create subfolders as shown).<\/li>\n\n\n\n<li>Ensure PHP has <strong>ZipArchive<\/strong> (most hosts do by default).<\/li>\n\n\n\n<li>Visit <code>https:\/\/yourdomain.com\/ai-web-build-kit\/<\/code> and try a build.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\">\n\n\n\n<h2 class=\"wp-block-heading\">Roadmap ideas (easy next steps)<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Template packs<\/strong>: drop more HTML templates in <code>kit\/templates\/<\/code> (the builder auto-picks by filename you add to the <code>&lt;select&gt;<\/code>).<\/li>\n\n\n\n<li><strong>Theme presets<\/strong>: palette dropdown that sets brand\/accent combos.<\/li>\n\n\n\n<li><strong>Form blocks<\/strong>: prebuilt sections (pricing, FAQ, testimonials) toggled by checkboxes.<\/li>\n\n\n\n<li><strong>Auto-deploy<\/strong> options: SFTP push or cPanel API call to extract the ZIP server-side (optional; many hosts block APIs, so keep \u201cdownload + extract\u201d as the default).<\/li>\n\n\n\n<li><strong>Content \u201cAI help\u201d<\/strong>: a text area where users paste bullets; your server can transform them into headings\/paragraphs before baking pages. (Keep it local\/simple unless you wire an external LLM API.)<\/li>\n<\/ul>\n\n\n\n<p><strong>Local AI Web Build Kit (v2)<\/strong> that already includes a <em>chat-style<\/em> builder (no external APIs). It\u2019s rule-based JavaScript that lives entirely in the browser and fills the form for you; then PHP zips the finished site. This gives users that \u201ctalk to the builder\u201d feel without any network calls.<\/p>\n\n\n\n<p><strong>Download it here:<\/strong><br><a>Download AI Web Build Kit v2 (local)<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What\u2019s inside (v2)<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>\/index.html<\/code> \u2014 UI with two sides:\n<ul class=\"wp-block-list\">\n<li><strong>Chat Builder (local)<\/strong>: users type things like <code>title My Great Site<\/code>, <code>pages About, Contact<\/code>, <code>add feature Fast Builds | Zip your site<\/code>, <code>brand color #6ee7b7<\/code>, <code>template landing<\/code>, <code>build<\/code>.<\/li>\n\n\n\n<li><strong>Form<\/strong>: always in sync with chat, so power users can tweak fields directly.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><code>kit\/api\/build.php<\/code> \u2014 assembles pages and <strong>creates a ZIP<\/strong> + <strong>live preview<\/strong> folder. (Requires PHP <code>ZipArchive<\/code>).<\/li>\n\n\n\n<li><code>kit\/templates\/<\/code> \u2014 <strong>Landing<\/strong> and <strong>Portfolio<\/strong> starter templates + base CSS.<\/li>\n\n\n\n<li>Optional <strong>\u201cmerge a ZIP\u201d<\/strong>: users can upload a prepared site ZIP (e.g., <code>assets\/*, pages\/*, index.html<\/code>) and it merges into the build.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Install (once)<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In cPanel \u2192 File Manager, create <code>public_html\/ai-web-build-kit\/<\/code>.<\/li>\n\n\n\n<li>Upload &amp; extract the ZIP above into that folder.<\/li>\n\n\n\n<li>Visit <code>https:\/\/yourdomain.com\/ai-web-build-kit\/<\/code>.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Use (as a user)<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the page and <strong>chat<\/strong>:\n<ul class=\"wp-block-list\">\n<li><code>title My Great Site<\/code><\/li>\n\n\n\n<li><code>tagline The simplest builder<\/code><\/li>\n\n\n\n<li><code>headline Build once. Deploy anywhere.<\/code><\/li>\n\n\n\n<li><code>sub Generate your static site ZIP in seconds.<\/code><\/li>\n\n\n\n<li><code>brand color #6ee7b7<\/code><\/li>\n\n\n\n<li><code>accent color #93c5fd<\/code><\/li>\n\n\n\n<li><code>template landing<\/code><\/li>\n\n\n\n<li><code>pages About, Contact<\/code><\/li>\n\n\n\n<li><code>add feature Fast Builds | Zip production site<\/code><\/li>\n\n\n\n<li><code>gallery assets\/images\/hero.jpg, assets\/images\/shot-2.jpg<\/code><\/li>\n\n\n\n<li><code>links Docs | https:\/\/example.com\/docs; Contact | mailto:me@example.com<\/code><\/li>\n\n\n\n<li><code>build<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Or fill the <strong>form<\/strong> directly. The <strong>Build &amp; Download ZIP<\/strong> button outputs:\n<ul class=\"wp-block-list\">\n<li>A <strong>ZIP<\/strong> you can save and upload anywhere;<\/li>\n\n\n\n<li>A <strong>live preview<\/strong> served from <code>\/ai-web-build-kit\/kit\/_output\/{your-site}\/index.html<\/code>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Why this fits your plan<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Local-first, free<\/strong>: no keys, no 3rd-party calls.<\/li>\n\n\n\n<li><strong>Few clicks<\/strong>: users can just chat \u2192 build \u2192 download \u2192 extract in cPanel.<\/li>\n\n\n\n<li><strong>Extensible<\/strong>: when you\u2019re ready, we\u2019ll create a sibling directory like <code>\/ai-web-build-kit-cloud\/<\/code> that swaps the local rule-based parser for a real LLM back end. Same UI flow; just more brains.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Next upgrades (still local)<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Extra templates<\/strong>: drop more HTML files in <code>kit\/templates\/<\/code> and I\u2019ll add them to the template selector.<\/li>\n\n\n\n<li><strong>Section toggles<\/strong>: pricing\/FAQ\/testimonials blocks you can include by chat (<code>add pricing<\/code>, etc.).<\/li>\n\n\n\n<li><strong>cPanel auto-extract<\/strong> (optional): a PHP endpoint that, if given your cPanel creds, can upload &amp; extract the ZIP automatically. (Many hosts restrict this; download-and-extract stays the safe default.)<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Images \/ MP4 \/ MP3 \/ PDFs<\/strong><br>Upload all as assets. Use them as:\n<ul class=\"wp-block-list\">\n<li><strong>Hero background<\/strong>: set image or video URL (MP4) in the form.<\/li>\n\n\n\n<li><strong>Gallery<\/strong>: paste asset paths (one per line); they get lazy-loaded.<\/li>\n\n\n\n<li><strong>Inline media<\/strong>: in pages you import, you can embed <code>&lt;audio src=\"assets\/your.mp3\" controls&gt;<\/code> or <code>&lt;video src=\"assets\/your.mp4\" controls&gt;<\/code> or link PDFs.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u201cMatch image to document title\u201d auto-pairing<\/strong><br>When you <strong>Ingest<\/strong> a doc (DOCX\/RTF\/ODT\/TXT\/MD\/HTML; PDF best-effort), we compute a <strong>slug<\/strong> from its title. At build time, any asset whose filename <strong>equals<\/strong> or <strong>starts with<\/strong> that slug (e.g. <code>the-forest-report.jpg<\/code>, <code>the-forest-report-1.png<\/code>) is ideal to use for cover\/gallery. This is a simple, dependable rule without AI.<\/li>\n\n\n\n<li><strong>Links<\/strong><br>Footer links are <code>Text | URL<\/code> per line. You can also put any links in imported page HTML itself.<\/li>\n\n\n\n<li><strong>PDFs<\/strong><br>If your host has <code>pdftotext<\/code>, we\u2019ll extract text into HTML. If not, we <strong>embed<\/strong> the PDF with a fallback download link. (All local.)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u201cMore style options\u201d \u2014 without AI<\/h2>\n\n\n\n<p>New <strong>Style<\/strong> tab includes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Paste CSS \u2192 auto-map<\/strong>: drop any CSS snippet; we parse <strong>colors<\/strong>, <strong>font-family<\/strong>, <strong>border-radius<\/strong> and map to the site variables. We then generate a <strong>custom override<\/strong> file (<code>assets\/override.css<\/code>) you can edit freely.<\/li>\n\n\n\n<li><strong>Custom CSS textarea<\/strong>: everything here is appended to the build, so advanced users can paste\/modify rules directly.<\/li>\n\n\n\n<li><strong>Copy example<\/strong>: one-click button copies a sample style block users can tweak.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u201cCopy\/paste an example style and match it\u201d<\/h2>\n\n\n\n<p>The \u201cStyleBot\u201d analyzes pasted CSS, grabs the first two colors (brand\/accent), first <code>font-family<\/code>, and first <code>border-radius<\/code>, then:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>applies them to the form colors,<\/li>\n\n\n\n<li>generates a starter <code>override.css<\/code> with those values,<\/li>\n\n\n\n<li>leaves comments inviting the user to refine.<\/li>\n<\/ul>\n\n\n\n<p>No AI; just deterministic parsing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Document ingestion \u2192 pages<\/h2>\n\n\n\n<p>In <strong>Ingest<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Upload DOCX\/RTF\/ODT\/TXT\/MD\/HTML\/PDF \u2192 we convert to HTML and show a preview.<\/li>\n\n\n\n<li>Click <strong>Add as Page<\/strong> \u2192 it\u2019s added to the project with a proper title + slug.<\/li>\n\n\n\n<li>Build \u2192 we output that page plus nav links.<br>(For PDFs w\/o text extraction, we embed the PDF viewer and expect the actual PDF to be uploaded as an asset.)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">What to tell users (simple rules)<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Name your images<\/strong> to match the document title\/slug for auto-pairing.<\/li>\n\n\n\n<li><strong>Keep assets inside<\/strong> <code>assets\/<\/code> (the builder handles this automatically).<\/li>\n\n\n\n<li>For <strong>video hero<\/strong>, just set the MP4 URL as the hero background and choose \u201cVideo\u201d.<\/li>\n\n\n\n<li>Paste any <strong>brand CSS<\/strong> you like\u2014colors, font, radius get picked up.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Deploy steps<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Upload &amp; extract the v3 ZIP to <code>public_html\/ai-web-build-kit\/<\/code>.<\/li>\n\n\n\n<li>Visit <code>\/ai-web-build-kit\/<\/code>.<\/li>\n\n\n\n<li>Use <strong>Ingest<\/strong> to convert docs \u2192 Add as Page.<\/li>\n\n\n\n<li>Paste CSS in <strong>Style<\/strong> (optional) \u2192 Apply.<\/li>\n\n\n\n<li><strong>Build &amp; Download ZIP<\/strong> \u2192 extract wherever you want the site to live<\/li>\n\n\n\n<li>\n<\/ol>\n\n\n\n<p><\/p>\n<\/body>","protected":false},"excerpt":{"rendered":"<p>self-hosted AI Web Build Kit: a single page your users open, fill a few fields, drop assets or a ZIP, and it spits out a ready-to-deploy static-site ZIP (plus a live server preview). Works on any cheap cPanel host (PHP + ZipArchive). Below is a copy-paste starter you can upload as public_html\/ai-web-build-kit\/. It has: How &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/fixyourowncredit.studio1live.com\/downloads\/downloads\/a-i-web-build-kit\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;A.I. Web Build Kit&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"template":"","edd-categories":[],"edd-tags":[],"class_list":["post-896","download","type-download","status-publish","hentry","entry","edd-download"],"aioseo_notices":[],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fixyourowncredit.studio1live.com\/downloads\/wp-json\/wp\/v2\/edd-downloads\/896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fixyourowncredit.studio1live.com\/downloads\/wp-json\/wp\/v2\/edd-downloads"}],"about":[{"href":"https:\/\/fixyourowncredit.studio1live.com\/downloads\/wp-json\/wp\/v2\/types\/download"}],"author":[{"embeddable":true,"href":"https:\/\/fixyourowncredit.studio1live.com\/downloads\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/fixyourowncredit.studio1live.com\/downloads\/wp-json\/wp\/v2\/edd-downloads\/896\/revisions"}],"predecessor-version":[{"id":898,"href":"https:\/\/fixyourowncredit.studio1live.com\/downloads\/wp-json\/wp\/v2\/edd-downloads\/896\/revisions\/898"}],"wp:attachment":[{"href":"https:\/\/fixyourowncredit.studio1live.com\/downloads\/wp-json\/wp\/v2\/media?parent=896"}],"wp:term":[{"taxonomy":"download_category","embeddable":true,"href":"https:\/\/fixyourowncredit.studio1live.com\/downloads\/wp-json\/wp\/v2\/edd-categories?post=896"},{"taxonomy":"download_tag","embeddable":true,"href":"https:\/\/fixyourowncredit.studio1live.com\/downloads\/wp-json\/wp\/v2\/edd-tags?post=896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}