Post a design

What a design is

A design is a prototype of one of your product's screens, or of its brand, a skin, or its design system. You build it wherever you like, in a design tool, with an agent, or by hand, and post it to Design Lab as files. BLOM hosts the files, shows them, and keeps every version. It doesn't edit them.

Each design belongs to one product and has a number, such as #12, that your organization never reuses. Each post is a new version of the design, and a version never changes. Versions and approval covers versions.

A design's kind is Screen, for a screen or page of your product, or Brand, Skin, or Design system, which the Brand Guide holds.

A prototype runs apart from BLOM. It can't read your BLOM records or act as you.

The four places

Design Lab has four places in the rail. Each lists the designs in every product you can read, and each card names its product.

Use Product to show one product's designs, and Find to match a design's name, summary, screen, or Job. On Draft and Archive, Organize by groups the cards by Job or by Screen.

What you post

You post one file: a .zip of a built prototype, or a single .html file, at most 4 MiB. A .zip has limits of its own:

• Every file must be one Design Lab serves: .html, .htm, .css, .js, .mjs, .cjs, .json, .map, .webmanifest, .txt, .md, .csv, .svg, .png, .jpg, .jpeg, .gif, .webp, .avif, .ico, .woff, .woff2, .ttf, .otf, .mp4, .webm, or .mp3.
• A .zip can't have a password, or hold another archive or a symbolic link. Two paths can't differ only in upper and lower case. BLOM skips __MACOSX folders and .DS_Store and Thumbs.db files.
• When every file sits in one top folder, BLOM drops that folder from the paths.
• BLOM opens index.html at the top first, or else the only .html file. When there are several and no index.html, name the one to open in Entry file (optional), by its path, such as pages/home.html.

BLOM checks the whole file before it keeps anything. When it refuses a post, it keeps nothing and says why, such as "The .zip holds more than 500 files." Files that earlier posts already hold are stored once, so a version that changes a few files adds only those. Your organization's Design Lab storage, and how much it may post in an hour, have limits of their own: see Limits.

Post a design in BLOM

1. Open the dialog

   In any Design Lab place, select Post a design. You see it when your Design Lab level is Iterate or Approve; see Design Lab levels.

2. Fill it in

   Choose the File, the Product, and the Kind. Name starts as the file's name, which you can change. Fill in any of the optional fields in the table below.

3. Post it

   Select Post the design. The dialog shows its progress as it sends the file, then opens the design's page on version 1.

For example, Ada Lovelace posts invite-flow.zip to Member onboarding as a Screen design for its Invitations screen. A new screen design starts in Draft. A brand, skin, or design-system design starts in the Brand Guide, in its Draft section.

New versions and details

Post a new version

On the design's page, select Post a version. The dialog asks for the File, and takes the same optional entry file, note, and built with; the design keeps its name, product, kind, screen, and Job. Select Post the version, and the page opens on the new version.

Change a design's details

Select Change details on the design's page to change its name, kind, screen name, summary, or Job, then select Save changes. Emptying the Job clears it. Changing the kind can move the design: a Brand, Skin, or Design system design belongs in the Brand Guide.

Both take the Iterate level. An archived design takes neither until it's restored.

Post from the CLI

The CLI's design post command posts a folder, a .zip, or an .html file. The CLI says how to download it and sign in.

node blom-cli.mjs design post ./invite-flow --product <product ID> --screen "Invitations" --built-with Claude

The CLI zips a folder for you. It leaves out dotfiles, dot-folders, and node_modules, and skips any file Design Lab doesn't serve, naming each one.

--entry, --note, and --built-with take the same values as the dialog's Entry file (optional), Note (optional), and Built with (optional). A product's ID is in the page's address when you choose the product in Design Lab's Product filter, after product=. A design's ID is in its page's address, after /designs/.

When BLOM keeps the post, the CLI prints the version and the design's page, such as Posted invite-flow version 1: https://blom.boundarylayerlabs.com/o/…. When BLOM refuses the file, the CLI prints BLOM's reason and exits with status 2. To give the design a summary or a Job, use Change details on its page.

Open a design

Select a design's name on its card to open its page. A card shows a live preview, the design's number, kind, and product, its latest version, its status, such as Draft or Approved · v2, and how many versions it has.

The design's page shows its Product, Kind, Screen, Job, Status, and who Posted first. Below them are the buttons your level allows, the viewer, the design's Versions, and its Status history.

The viewer shows one version under a bar that reads Prototype · not BLOM. It opens on the approved version, or on the newest one when none is approved. Choose Desktop 1440, Tablet 768, or Phone 390 to draw the prototype at that width, scaled to fit. To show another version, select its link under Versions, such as Show version 1.

Inside the viewer a prototype's scripts run, but it can't open pop-up windows, start downloads, or move BLOM's page. If a prototype stops loading after its page has been open for hours, reload the page.

Open a design in a new tab

Select Open in a new tab on a card, on a row in Approved designs, or on the viewer's bar. The new tab shows that one version alone, without BLOM's menus, under the same Prototype · not BLOM bar. It opens at Full window, and you can still choose Desktop 1440, Tablet 768, or Phone 390. Design page takes you back, and the tab's title names the design and the version.

You can share the tab's address. It opens for anyone in your organization who can read the design's product, once they sign in. A version's files never open as a page of their own, outside BLOM.

Related