+
-^ screenshot coming soon
+screenshot coming soon
-| + | -### Generate from a prompt -Describe what you want — AI builds the entire page from scratch. +**Prompt to page** — Describe what you want, AI generates the entire website from scratch. -### Start from templates -Pick a template, customize it with natural language. +**Template gallery** — Start from curated templates and customize with natural language. -### Chat editing -*"Change the header to dark blue"* — and it's done. +**Chat editing** — *"Make the header dark blue and add a CTA button"* — done. | -+ | -### Inline editing -Click any section on the page, prompt changes just for that part. +**Inline editing** — Click any section, prompt changes just for that part. -### Visual editing -Edit text, colors, and images directly — no code needed. +**Visual editing** — Edit text directly on the page — WYSIWYG, no code. -### One-click deploy -Publish to Netlify, Vercel, or GitHub Pages instantly. +**One-click deploy** — Publish to Netlify, Vercel, or GitHub Pages instantly. |
The fastest way to launch your next big idea. Simple, powerful, and designed for teams that move fast.
+Get Started Free +Optimized for speed from the ground up. Your users will notice the difference immediately.
No technical knowledge required. Get up and running in minutes, not hours.
Enterprise-grade security built in. Your data is encrypted and protected at every level.
Product designer crafting thoughtful digital experiences.
+ +Visual identity · 2026
UI/UX Design · 2025
Web Design · 2025
A personal blog about design, technology, and life.
+Simplicity is the ultimate sophistication. In a world overwhelmed by complexity, the ability to distill ideas to their essence is more valuable than ever. This post explores how minimalism in design leads to better user experiences.
Technology moves fast, but good design principles remain constant. Here are the timeless patterns I keep coming back to when building products that need to last.
After years of experimentation, I've found a morning routine that actually sticks. It's simpler than you'd think and doesn't require waking up at 5 AM.
Discover our latest collection of premium products.
+Shop Now +$49
$129$159
$199
$89
+ Pick a template as your starting point, then customize with AI or edit directly. +
+ + {/* Category Filter */} +Loading templates...
+ ) : displayed.length === 0 ? ( +No templates found.
+ ) : ( ++ Deploying to {selectedProvider ? getProvider(selectedProvider).name : ''}... +
+{error}
++ {getProvider(selectedProvider).tokenHelp} +
+ + Get your token → + + setTokenInput(e.target.value)} + onKeyDown={(e) => { if (e.key === 'Enter') handleSubmitToken(); }} + placeholder={getProvider(selectedProvider).placeholder} + className="w-full bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] text-sm px-3 py-2 rounded-lg border border-[var(--color-border)] outline-none focus:border-[var(--color-accent)] mb-3" + autoFocus + /> + ++ Offpage needs an AI model to generate websites. Choose a model based on your hardware. +
++ Deploying to {selectedProvider ? getProvider(selectedProvider).name : ''}... +
+{error}
++ {getProvider(selectedProvider).tokenHelp} +
+ + Get your token → + + setTokenInput(e.target.value)} + onKeyDown={(e) => { if (e.key === 'Enter') handleSubmitToken(); }} + placeholder={getProvider(selectedProvider).placeholder} + className="w-full bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] text-sm px-3 py-2 rounded-lg border border-[var(--color-border)] outline-none focus:border-[var(--color-accent)] mb-3" + autoFocus + /> + +- {currentProject - ? 'Start by describing your website in the chat' - : 'No project selected'} -
++ {currentProject + ? 'Start by describing your website in the chat' + : 'No project selected'} +
+ {currentProject && ( ++ Tell the AI what kind of website you want to create! +
+ )} +The fastest way to launch your next big idea. Simple, powerful, and designed for teams that move fast.
+Get Started Free +Optimized for speed from the ground up. Your users will notice the difference immediately.
No technical knowledge required. Get up and running in minutes, not hours.
Enterprise-grade security built in. Your data is encrypted and protected at every level.
Product designer crafting thoughtful digital experiences.
+ +Visual identity · 2026
UI/UX Design · 2025
Web Design · 2025
A personal blog about design, technology, and life.
+Simplicity is the ultimate sophistication. In a world overwhelmed by complexity, the ability to distill ideas to their essence is more valuable than ever. This post explores how minimalism in design leads to better user experiences.
Technology moves fast, but good design principles remain constant. Here are the timeless patterns I keep coming back to when building products that need to last.
After years of experimentation, I've found a morning routine that actually sticks. It's simpler than you'd think and doesn't require waking up at 5 AM.
Discover our latest collection of premium products.
+Shop Now +$49
$129$159
$199
$89
Loading...
diff --git a/src/pages/ProjectPage.tsx b/src/pages/ProjectPage.tsx index 557132f..cc36ec5 100644 --- a/src/pages/ProjectPage.tsx +++ b/src/pages/ProjectPage.tsx @@ -1,9 +1,10 @@ -import { useEffect } from 'react'; -import { useParams } from 'react-router-dom'; +import { useEffect, useRef } from 'react'; +import { useParams, useSearchParams } from 'react-router-dom'; import { useProjectStore } from '../stores/projectStore'; import { useEditorStore } from '../stores/editorStore'; import { useChatStore } from '../stores/chatStore'; import { useAiStream } from '../hooks/useAiStream'; +import { SYSTEM_PROMPTS, buildEditMessages } from '../lib/prompts'; import { ChatPanel } from '../components/chat/ChatPanel'; import { PreviewFrame } from '../components/preview/PreviewFrame'; import { PreviewToolbar } from '../components/preview/PreviewToolbar'; @@ -11,19 +12,42 @@ import { InlineEditBar } from '../components/preview/InlineEditBar'; export function ProjectPage() { const { id } = useParams<{ id: string }>(); + const [searchParams, setSearchParams] = useSearchParams(); const currentProject = useProjectStore((s) => s.currentProject); const loadProjectById = useProjectStore((s) => s.loadProjectById); const createSnapshot = useProjectStore((s) => s.createSnapshot); const { addMessage } = useChatStore(); const streaming = useChatStore((s) => s.streaming); const clearSelection = useEditorStore((s) => s.clearSelection); - const { generateSection } = useAiStream(); + const { generate, generateSection } = useAiStream(); + const initialPromptSent = useRef(false); useEffect(() => { - if (id && !currentProject) { + if (id) { loadProjectById(id); } - }, [id, currentProject, loadProjectById]); + }, [id, loadProjectById]); + + // Auto-send template customization prompt from ?prompt= query param + useEffect(() => { + const prompt = searchParams.get('prompt'); + if (prompt && currentProject?.html && !initialPromptSent.current && !streaming) { + initialPromptSent.current = true; + setSearchParams({}, { replace: true }); + + const chatHistory: Array<{ role: string; content: string }> = []; + addMessage(currentProject.id, 'user', prompt, 'chat'); + generate( + currentProject.id, + SYSTEM_PROMPTS.editFull, + buildEditMessages(currentProject.html, chatHistory, prompt) + ).then((result) => { + if (result) { + createSnapshot(currentProject.id, result, `Template customization: ${prompt.slice(0, 50)}`); + } + }); + } + }, [searchParams, currentProject, streaming, setSearchParams, addMessage, generate, createSnapshot]); const handleInlineEdit = async (sectionId: string, sectionHtml: string, prompt: string) => { if (!currentProject) return; @@ -49,7 +73,7 @@ export function ProjectPage() {- Templates coming in Phase 4 -
++ Pick a template as your starting point, then customize with AI or edit directly. +
+ + {/* Category Filter */} +Loading templates...
+ ) : displayed.length === 0 ? ( +No templates found.
+ ) : ( +