---
title: Design
scope: 3dmk
type: documentation
subject: design
group: Systems
status: current
version: "2.1.3"
source: https://3dmk.com/documentation#design
author: Nick Olson
contact:
  email: 3dmk@3dmk.com
  site: https://3dmk.com
license: CC BY 4.0
license_url: https://creativecommons.org/licenses/by/4.0/
attribution: Nick Olson, 3dmk.com
---

# Design

Design is the workspace for interface work before it becomes a product. It pairs the `core-design` review site with the Design knowledge base in Seele. Claude writes design files to disk, and the site shows each one in a real browser frame. Review happens on the rendered page.

## Role

Design carries interface work from research to a reviewed page. Seele holds the research findings and the approved references. Research binds nothing, and standards follow from it. Concepts select references, and `core-design` turns those decisions into versioned browser artifacts and reusable style guides.

Each piece of work follows one loop: research → concept → source artifact → browser render → screenshot review → revision.

## Parts

The site offers five views.

| View | What it shows |
|---|---|
| Overview | Every design project as a card, with names from the Registry and usage notes from Seele |
| Designs | A file tree, the design frame at preset device widths, and an element inspector |
| Artifacts | The same tools over artifacts that Claude built in its web app |
| Artboard | A vector board with the core tools and shortcuts of Adobe Illustrator |
| Docs | A reader for the Design knowledge base, with full-text search |

The frame reloads when any file in the open project changes. The inspector shows an element’s box, computed values, and matching style rules. A generator builds dated style-guide snapshots of other repositories’ tokens and components.

The application uses TypeScript, React, and Vite. The site runs on the workstation, because it serves the design folders from the working copy.

## Data

The site has no backend. Each design is a plain HTML page with its own style sheets and scripts. Each top-level folder is one project. Its name states the kind: governance, style guide, theme, or repository.

Artifacts keep the file layout they were published with. The site wraps each artifact page in the same document skeleton that Claude’s web app adds, so the page renders the same way. The artboard keeps its sketch in browser storage. It exports Portable Network Graphics (PNG) files at up to 3× scale and Scalable Vector Graphics (SVG) files.

Seele holds the knowledge as linked nodes: research findings, references with source notes, studies of real sites, and concepts. Every node carries tags from a fixed vocabulary, and design work finds its sources by those tags. Token values live in code, never in Seele.

## Connections

Design exchanges files, names, and renders with the systems in this table.

| System | What passes |
|---|---|
| Seele | The site reads and searches the Design knowledge base. It never writes to Seele. |
| Registry | The Overview reads display names, themes, and repository links. It never writes to the Registry. |
| Core Fetch | Core Fetch captures the rendered result at real viewport sizes for screenshot review. |
| Claude sessions | Claude writes design files and artifacts to disk. Copy SVG puts a sketch on the clipboard as text that pastes into the chat. |
| Consul | The site registers as a service when it deploys. |