D1VD1V

Getting Started

From prompt → preview → production, with repeatable verification steps.

What you will achieve

  • A working preview (dev) URL
  • One successful change shipped through Chat
  • A safe path to production with rollback in mind
  • A setup checklist for GitHub / Auth / Payments / Analytics

The developer loop

01 · DEFINE
Describe the change

State the user flow, constraints, and acceptance criteria.

02 · BUILD
Run in a workspace

The agent edits the project inside its selected runtime.

03 · VERIFY
Inspect preview

Test behavior, logs, integrations, and responsive states.

04 · SHIP
Promote or revert

Release the verified change or roll back the commit.

Keep each change small enough that its preview, diff, and rollback path remain understandable.

5-minute quickstart

  1. Create a project from your prompt.
  2. Open the generated preview (dev) URL.
  3. Ask Chat for one small change:
Change the homepage hero title to “Hello from my first build”. Keep the rest unchanged.
Acceptance: the preview updates and the page still loads on mobile.

Prompt recipe

Include these in your prompt whenever possible:

  1. Target audience / role
  2. 2–4 core user flows
  3. Main data entities
  4. Constraints (mobile-first, dark mode, SEO, etc.)
  5. Integrations (GitHub / payments / analytics)
  6. Acceptance criteria

Brand assets (logo / images / favicon)

Most teams get stuck on assets because there is no single “upload logo” button. Use one of these workflows:

A) Paste SVG directly (recommended)

Replace the header logo.
Create `public/brand/logo.svg` using the SVG below and update the header to use it.
Constraints: responsive, accessible label (aria-label), no layout shift.

<svg ...>...</svg>

B) Use an image URL

Use this as the header logo: https://.../logo.png
Constraints: 28px height on desktop, 24px on mobile, keep aspect ratio.
Acceptance: looks correct in dark mode.

C) Manage assets through GitHub (team workflow)

  • Commit public/brand/logo.svg or PNG and reference it from the UI.
  • This keeps review, history, and rollback straightforward.

Favicons usually live under public/ (favicon.svg, favicon.ico, etc.). Ask Chat to replace them and update <link rel="icon" ...> if needed.

Preview → Production

Verify in preview (dev) before promotion:

  • auth flow works (if enabled)
  • checkout path is reachable (if enabled)
  • core pages load without obvious errors

Promote (typical): merge dev → main.

Rollback: revert the last change and redeploy. If it is a secrets issue, fix secrets first, then redeploy.

Integrations checklist

  • GitHub connected and repo access verified: /settings?tab=github
  • Auth callback URLs configured for preview + production
  • Payments: test keys in preview, live keys in production, webhook secret configured
  • Analytics: realtime/pageviews verified, and 3–5 stable events added