Skip to content
Steve Morin

/design-by-elements

Prototype the form of an artifact before you build it.

What it does

Decomposes an artifact — terminal output, a report layout, a table design, a page or email mockup, a status block — into elements, then iterates on each one in isolation before assembling. The form gets settled while it is still cheap to change.

When to reach for it

Any time you are about to build something whose shape you would argue about after it exists.

It's working if

  • It shows you the elements before it shows you the assembled artifact, even when you asked for the assembled artifact.
  • You discard three versions of one element and it costs nothing, because nothing has been built on it yet.
  • Changing one element later does not mean redrawing the rest.

Install this skill

Then type /design-by-elements in your agent.

npx skills@latest add smorinlabs/smorinlabs-harness -s design-by-elements

Or install it as the design-by-elements plugin.

/plugin install design-by-elements@smorinlabs-harness

Where it fits