Design With
Kimi in
OpenDesign.

notification-preferences.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 Kimi Connection

   Follow the Kimi instructions in your installed version. Authenticate with your Moonshot API key (BYOK) — credentials stay on your machine.

   Kimi CLI documentation — Getting started

   # 1. Install Kimi CLI (uses uv; Python 3.12–3.14, 3.13 recommended)
   curl -LsSf https://code.kimi.com/install.sh | bash
   # or, if you already have uv:
   uv tool install --python 3.13 kimi-cli
   
   # 2. Start it in your project and authenticate on first run
   cd your-project
   kimi              # then run /login: OAuth via Kimi Code, or paste a Moonshot API key

   From the Kimi 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 Kimi 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.
   • KimiReads 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 · PromptKimi

   You

   Design notification preferences: channels, quiet hours, per-project overrides. Match the reference for tone. Desktop and phone.

   Kimi

   Understood. Should per-project overrides live on this page as expandable rows, or on each project’s own settings page?
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.
   • KimiLoads 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

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

   • YouWait, or answer a clarifying question. Nothing to configure.
   • KimiPlans 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

   • notification-preferences.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.
   • KimiReads 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 · rows

   One toggle per row on the phone; the helper text goes under the label.

   Comment on · quiet

   Quiet hours need an explicit “off” state, not two empty pickers.
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.
   • KimiApplies 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

   • ✓Single toggle per row at 390px
   • ✓Quiet hours has an off state
   • ✓No horizontal scroll at 390px
   • Per-project expand — checked by you