{"id":51083255,"url":"https://github.com/open-gitagent/webpage-designer","last_synced_at":"2026-06-23T20:02:19.776Z","repository":{"id":356086367,"uuid":"1230519541","full_name":"open-gitagent/webpage-designer","owner":"open-gitagent","description":"Multimodal Lovable-style frontend builder powered by gitclaw + Anthropic frontend-design skill. Chat, voice, or photo to ship brand-tier HTML/CSS/JS pages.","archived":false,"fork":false,"pushed_at":"2026-05-13T23:44:08.000Z","size":186,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-14T01:42:54.988Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/open-gitagent.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-06T04:32:08.000Z","updated_at":"2026-05-13T23:44:12.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/open-gitagent/webpage-designer","commit_stats":null,"previous_names":["open-gitagent/webpage-designer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/open-gitagent/webpage-designer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-gitagent%2Fwebpage-designer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-gitagent%2Fwebpage-designer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-gitagent%2Fwebpage-designer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-gitagent%2Fwebpage-designer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/open-gitagent","download_url":"https://codeload.github.com/open-gitagent/webpage-designer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/open-gitagent%2Fwebpage-designer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34704748,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-23T02:00:07.161Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-23T20:02:15.760Z","updated_at":"2026-06-23T20:02:19.769Z","avatar_url":"https://github.com/open-gitagent.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GitAgent Designer\n\nA git-native, multimodal frontend builder for brand consultancies. Chat (or speak, or show a photo) to a senior brand designer; it writes the HTML/CSS/JS for a full page; you watch it render live in an iframe.\n\n\u003e **You're looking for the React app at `http://localhost:5173`** — not the stock gitclaw voice UI at `http://localhost:3333`. This repo runs its own Fastify backend (port 8882) and Vite/React frontend (port 5173). If you've separately installed the `gitclaw` CLI globally and run `gitclaw --voice`, that launches gitclaw's own bundled UI on 3333 and is **not** this app. Stop that process and use `npm run dev` from this repo instead.\n\nBuilt on:\n- **[gitclaw SDK](https://github.com/open-gitagent/gitagent)** — agents-as-git-repos runtime\n- **[`frontend-design` skill](https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md)** — Anthropic's official design skill, baked into every project's agent\n- **Claude Opus 4.7** for design, **OpenAI Realtime (gpt-4o-realtime)** for voice, **Claude Vision** for image/video understanding\n- React + Vite + Fastify\n\n## What you get\n\n- Left pane: streaming chat with the design agent\n- Right pane: live `\u003ciframe\u003e` of the page being built — auto-reloads each time the agent writes a file\n- Top bar: voice (mic in, voice out — push-to-stop, function-call bridge to the design agent), live video (periodic frame description piped in as ambient design context), and 📷 capture (one-shot reference photo: vision read → use in the page)\n- Each project lives in `projects/\u003cid\u003e/` as a plain folder with the agent template (`agent.yaml`, `SOUL.md`, `RULES.md`, `skills/frontend-design/SKILL.md`) plus a `site/` directory containing `index.html`, `styles.css`, `script.js`, and `assets/`\n\n## Setup\n\n```bash\ngit clone https://github.com/open-gitagent/webpage-designer\ncd webpage-designer\ncp .env.example .env\n```\n\nEdit `.env` and fill in your keys:\n\n```\n# REQUIRED — design agent\nANTHROPIC_API_KEY=sk-ant-...\n\n# OPTIONAL — voice (OpenAI Realtime)\nOPENAI_API_KEY=sk-...\n\n# OPTIONAL — image search (Pexels free tier)\nPEXELS_API_KEY=...\n\n# OPTIONAL — image generation, background removal, studio relight (fal.ai)\nFAL_KEY=...\n\n# OPTIONAL — change the auth credentials. Defaults are lyzr / lyzr2b28.\n# Override these in production. The defaults are public in this repo's source.\nAUTH_USER=lyzr\nAUTH_PASS=lyzr2b28\n\nPORT=8882\n```\n\nInstall and run:\n\n```bash\nnpm install\nnpm run dev\n```\n\n`npm run dev` starts BOTH services concurrently via the workspace setup:\n- **Fastify API + agent server** on `http://localhost:8882`\n- **Vite React dev server** on `http://localhost:5173` (with proxy to the API)\n\n**Open `http://localhost:5173`** in your browser. You'll see the login screen. Sign in with `lyzr` / `lyzr2b28` (or whatever you set `AUTH_USER` / `AUTH_PASS` to in `.env`). Once authed, click `+ new project`, name it, and describe what you want to build.\n\n### Common confusion\n\nIf you see a different UI at `http://localhost:3333`, that's **gitclaw's stock voice UI** from a separately-installed `gitclaw` CLI process — not this app. Kill that process (`pkill -f 'gitclaw --voice'`) and use `npm run dev` from this repo. The 3333 port is gitclaw's CLI default; this app uses 5173 (frontend) + 8882 (backend) and never 3333.\n\n## How a turn works\n\n1. You type an instruction → the browser opens a WS to `/ws/agent/\u003cid\u003e` and sends a `prompt` event.\n2. Server calls gitclaw's `query()` with `dir = projects/\u003cid\u003e/`. gitclaw loads `agent.yaml`, the SOUL, the RULES, and the `frontend-design` skill, and assembles the system prompt.\n3. The agent has 5 tools wired by the server: `write_file`, `read_file`, `list_files`, `list_assets`, `fetch_url_image`. All scoped to `site/` with path-traversal protection.\n4. As the agent streams text and calls tools, every `GCMessage` event is forwarded to the browser. The chat pane shows deltas, tool calls, and final messages.\n5. Every `write_file` triggers a `file_changed` event; the browser debounces 250ms, then bumps the iframe `?_=N` cachebuster so the preview reloads.\n\n## How voice works\n\nBrowser → WS `/voice/\u003cid\u003e` → server → OpenAI Realtime WSS.\n\n- Browser captures mic via AudioWorklet at 24kHz PCM16, sends `input_audio_buffer.append` events upstream.\n- OpenAI Realtime is configured to call a **single function**: `send_to_designer(instruction)`. The voice model's only job is to listen, briefly acknowledge out loud, and forward the instruction.\n- Server intercepts that function call, runs the design agent, then sends `function_call_output` back upstream so the voice model speaks a short summary.\n- Audio replies stream back as `response.audio.delta` events; the browser decodes PCM16 and plays via Web Audio scheduling.\n\n## How vision works\n\n- 📷 capture: `getUserMedia` → JPEG → POST `/api/projects/\u003cid\u003e/upload` (saves to `site/assets/`) → POST `/api/vision` (Claude Opus 4.7 with the design-eyes prompt) → an automatic follow-up message is sent to the agent: *\"I just uploaded `assets/photo-…jpg`. Vision read: …. Use it in the page.\"*\n- 📹 video: `getUserMedia` video, frame snapped every 8s and POSTed to `/api/vision` with a terser prompt; description appears in chat as ambient context the agent can pick up on the next turn.\n\n## Project layout\n\n```\ndesigner/\n├── server/\n│   ├── agent-template/              # cloned into every new project\n│   │   ├── agent.yaml               # model: claude-opus-4-7\n│   │   ├── SOUL.md                  # designer identity\n│   │   ├── RULES.md                 # output format + aesthetic rules\n│   │   └── skills/frontend-design/SKILL.md\n│   └── src/\n│       ├── index.ts                 # Fastify, routes, static preview, WS chat\n│       ├── agent.ts                 # gitclaw query() wrapper\n│       ├── tools.ts                 # write_file, read_file, list_files, list_assets, fetch_url_image\n│       ├── voice.ts                 # OpenAI Realtime relay + designer bridge\n│       ├── vision.ts                # Claude vision endpoint\n│       ├── projects.ts              # create/list, copy template, scaffold site/\n│       └── paths.ts                 # safe path joining\n├── web/\n│   ├── index.html\n│   └── src/\n│       ├── App.tsx\n│       ├── components/{Chat,Preview,Camera,Voice}.tsx\n│       └── lib/{agentWs,audio,types}.ts\n├── projects/                        # generated; gitignored\n└── package.json                     # workspaces: server + web\n```\n\n## Smoke test\n\nAfter `npm run dev`:\n\n1. Visit `http://localhost:5173`, click `+ new`, name \"Crude Espresso\".\n2. Send: *\"build a brutalist landing page for Crude, a single-origin espresso brand. monumental serif type, exposed concrete tones, asymmetric layout. no stock photo grid.\"*\n3. Watch the chat stream. Within a minute the iframe should render a styled page.\n4. Click 📷 capture, snap something on your desk → the agent should incorporate it.\n5. Click 🎙️ voice, say *\"make the type larger and add a horizontal scroll of menu items at the bottom\"* → it should acknowledge out loud, do the work, then summarize.\n\n## Notes / known limitations\n\n- Voice currently uses `gpt-4o-realtime-preview-2024-12-17`. If OpenAI rotates the model id, update `REALTIME_URL` in `server/src/voice.ts`.\n- Live video frames cost vision-model calls every 8s. The interval is in `web/src/components/Voice.tsx` (`startVideo`) — bump it up to throttle.\n- \"Plain folders, no git\" was chosen at scaffold time. To switch to gitclaw's per-session branching, swap `runAgent` to also pass `repo:` in `QueryOptions` and keep `LocalSession.commitChanges()` after each `write_file`.\n- The agent writes plain HTML/CSS/JS only (no React, no build step) — that's enforced by `RULES.md`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-gitagent%2Fwebpage-designer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopen-gitagent%2Fwebpage-designer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopen-gitagent%2Fwebpage-designer/lists"}