Design With
DeepSeek Harness in
OpenDesign.

admin-users.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 DeepSeek Harness Connection

   Follow the DeepSeek Harness instructions in your installed version. Open Settings → Models & providers → Local CLI in OpenDesign and rescan.

   deepseek-ai/deepseek-harness

   curl -fsSL 'https://open-design.ai/install-dsh.sh?version=1' | sh

   From the DeepSeek Harness 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 DeepSeek Harness 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.
   • DeepSeek HarnessReads 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 · PromptDeepSeek Harness

   You

   Design the admin users page: searchable table with role, team, status, last active, bulk actions, pagination. Use the console profile.

   DeepSeek Harness

   Profile “console” loaded. Should suspended users stay in the default list, or move behind the Status filter?
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.
   • DeepSeek HarnessLoads 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

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

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

   • admin-users.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.
   • DeepSeek HarnessReads 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 · table

   Owner role in accent; the rest neutral pills.

   Comment on · mobile

   List rows with role on the right; status as a dot.
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.
   • DeepSeek HarnessApplies 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

   • ✓Accent on owner role only
   • ✓List layout at 390px
   • ✓No horizontal scroll at 390px
   • Bulk actions — checked by you