Desktop Screenshots Appendix

How to use this page

If you are looking for a specific step, start with the relevant guide. This page is only for:

• quickly checking which official desktop screenshots exist
• reviewing anonymized sample-data patterns
• keeping a capture inventory for later updates

Where the images come from

These screenshots were taken from the local desktop runtime, not a marketing site. To explain the product, we use one fixed demo data set and keep all sensitive values masked.

Sample data shape

The docs only show structure, never real secrets. Use a pattern like this:

{
  "workspace": "nokuo-demo",
  "categories": ["notes", "snippets", "diaries"],
  "items": [
    {
      "type": "project-url",
      "name": "Nokuo production site",
      "value": "https://example.com"
    },
    {
      "type": "database",
      "name": "Production PostgreSQL",
      "value": "db.internal.example:5432/nokuo_prod"
    },
    {
      "type": "credential",
      "name": "Aliyun deploy credential",
      "value": "AccessKey / Token"
    }
  ]
}

Screenshots

Welcome and unlock

Settings

Restore flow

Import and paste recognition

Workspace and overview

Preview and examples

What to capture next

• If you need editor screenshots later, prepare one fixed demo workspace and one set of masked sample data first.
• If you only need a structural overview, these images already cover welcome, create Vault, master password, recovery key, unlock, recovery reset, settings, storage, sync, restore, import, paste recognition, workspace, and project environment export.
• The next screenshots worth adding are: the workspace-package export/restore flow and the team-sharing flow.

Capture flow

Next time you add screenshots, follow this order directly:

1. Open the local dev page first, then switch into the demo workspace entry.
2. For workspace shots, prefer #/dev-workspace-preview.
3. If you need desktop-only buttons to appear in browser mode, append ?previewNative=1 and then open the preview route.
4. Keep each screenshot to one step only. Do not stack several steps into one image.
5. Capture create, master-password setup, recovery-key save, normal unlock, restore, import, copy menu, and export as separate images.
6. Wait until the page is stable before capturing. Avoid loading spinners, transition states, and error banners.
7. Keep the existing naming pattern: desktop- + scenario name.
8. After capture, verify both the image file and the doc reference.

Recommended entry points

• Welcome and first-run flow: #/welcome, #/create-vault, #/unlock-vault, #/restore-vault
• Workspace and import/export: #/dev-workspace-preview
• Desktop-button emulation in browser: ?previewNative=1 + the relevant hash route