Design With
Antigravity in
OpenDesign.

signup-flow.html · 1440px

4Review Before Handoff

1. 1

   Download the OpenDesign Desktop App

   Choose the package for your computer, install it and open the app.

   Download OpenDesign

   CHECKPOINT

   The desktop app opens. Already installed? Move to the next step; there is no need to download again.
2. 2

   Prepare Your Antigravity Connection

   Follow the Antigravity instructions in your installed version. Authenticate with your Google account — credentials stay on your machine.

   # 1. Download Antigravity for your OS (macOS, Windows, Linux)
   #    from the official download page: antigravity.google/download
   
   # 2. Launch it and sign in
   agy               # opens Antigravity; sign in with your Google account
   
   # 3. Accept the data-use policy, pick a theme, and open your project folder

   From the Antigravity setup notes in the published guide; check the vendor documentation for the current command.

   CHECKPOINT

   Confirm the intended agent and account. If it is unavailable, check compatibility before trying a larger task.
3. 3

   Run One Small Antigravity Task

   Use a small brief so you can judge the whole loop, including one revision.

   Starter brief Copy

   Build a settings screen with a profile form and a save confirmation. Use my design rules. Check it at desktop and mobile widths.

   CHECKPOINT

   Open the result, test the save state and request one specific change. A generated file is the beginning of review, not the end.

To run OpenDesign from source, follow the technical quickstart instead.

1. 1

   Design Brief

   Plain language, three to six lines. Name the audience, the job of the screen and the platforms.

   • YouWrite the brief; attach a reference screenshot if you have one.
   • AntigravityReads the brief and the project’s instruction file; asks when something is ambiguous.
   • OpenDesignProvides the project, the prompt surface and the skill for the artifact type.
   • CheckConfirm the brief states the acceptance criteria. Adding them now is cheaper than after generation.

   New project · PromptAntigravity

   You

   Design a three-step signup: account, workspace, invite. Verify each step in the browser at 1440 and 390 before handoff.

   Antigravity

   Understood. Should the URL slug be editable, or derived from the workspace name and locked?
2. 2

   Design Constraints

   A design system and a few hard rules. This is what separates on-brand output from a generic look.

   • YouPick a design system; state breakpoints and any must-use components.
   • AntigravityLoads the DESIGN.md tokens and posture rules into context before writing a line.
   • OpenDesignShips the design-system library and binds the chosen one into the skill template.
   • CheckThe tokens match your brand. One accent, the right fonts, the right radius.

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   Generate the Interface

   Antigravity writes a self-contained HTML file: layout, styles, interactions and stable hooks.

   • YouWait, or answer a clarifying question. Nothing to configure.
   • AntigravityPlans the sections, writes the HTML, CSS and JavaScript, runs the file and fixes what fails.
   • OpenDesignSaves the artifact into the project folder and indexes it for preview.
   • CheckNothing yet. Judge the file after it is rendered, not from the source.

   Project files3 files

   • signup-flow.htmlnew
   • AGENTS.mdbound
   • DESIGN.mdread
4. 4

   Preview

   The file renders inside OpenDesign at the widths you asked for. This is where the design is judged.

   • YouSwitch widths, click through the interactions, leave comments on elements.
   • AntigravityReads your comments on the preview and prepares the next revision.
   • OpenDesignRenders the preview, exposes data-od-id targets for comments and edits.
   • CheckHierarchy, contrast, overflow at 390px, focus states, and whether the accent is used sparingly.

   Preview · 390pxComment mode

   Comment on · stepper

   Only the current step in green; done steps get a check, not the accent.

   Comment on · summary

   On the phone keep only “Due today”; the rest is noise here.
5. 5

   Revise and Verify

   Request changes by pointing at elements in the preview. Every revision is a new file; nothing is overwritten silently.

   • YouTurn comments into requests; decide when the task is done.
   • AntigravityApplies the changes in place and re-runs the file.
   • OpenDesignKeeps versions side by side; exports an image or the HTML when you are done.
   • CheckRe-check only the area that changed, then the whole page once at each breakpoint.

   Verification · v23 of 4

   • ✓Current step only in accent
   • ✓Summary collapses at 390px
   • ✓No horizontal scroll at 390px
   • Validation states — checked by you