← All Patterns

Pattern

Code Mode

Code as the primary medium of creation. Not a translation of design, but design itself. When syntax becomes fluent, the tool becomes transparent.

"The medium is the message."

— Marshall McLuhan

Definition

Code Mode is the recognition that for certain practitioners, code is not a secondary artifact—a translation of design—but the primary medium of creation itself. The designer thinks in code. The configuration is code. The artifact is code that produces other artifacts.

This mirrors how an architect thinks in spatial relationships, not in blueprint conventions. The blueprint is a notation for communicating, but the thinking happens in the medium. For code-native practitioners, a YAML configuration file is less natural than a TypeScript function.

Code Mode enables Zuhandenheit—Heidegger's ready-to-hand relationship where the tool disappears into use. When syntax is fluent, attention flows through the code to the creation. The keyboard, the IDE, the language all recede. What remains is making.

"When you think in code, you create in code. The translation layer dissolves."

Principles

Code as Configuration

Configuration files (YAML, JSON, INI) exist because code was considered too complex for non-programmers. For code-native practitioners, these formats add translation overhead. Use code for configuration.

✓ TypeScript over JSON where logic is needed

✓ Functions over static declarations

✓ Type safety and autocompletion as features

Code as Design

For component-driven development, the component IS the design. A Figma mockup is a translation; the component is the source of truth. Design in the medium that will be shipped.

✓ Components as design tokens

✓ Storybook as design documentation

✓ CSS-in-code over separate design files

Code as Communication

Well-structured code communicates intent better than documentation. The code is the specification. Comments explain why, not what. Types document contracts.

✓ Self-documenting function names

✓ Types as API documentation

✓ Tests as usage examples

Fluency Enables Dwelling

Code Mode requires fluency—keyboard shortcuts, language idioms, tooling mastery. Investment in fluency pays dividends in flow. The unfluent user constantly fights the medium.

✓ Master one language deeply before broadening

✓ Learn IDE shortcuts until automatic

✓ Let syntax become invisible through practice

When to Apply

Apply When

  • • The team is code-fluent
  • • Configuration has logic or conditions
  • • Type safety adds value
  • • The code IS the deliverable
  • • Iteration speed matters

Consider Alternatives

  • • Non-programmers need to edit configuration
  • • Visual design requires visual tools
  • • Domain experts aren't code-fluent
  • • Collaboration spans skill sets

Code Mode in Practice

Configuration Comparison

YAML (Translation Mode)

routes:

  - path: /api/users

    method: GET

    handler: getUsers

  - path: /api/users/:id

    method: GET

    handler: getUser

TypeScript (Code Mode)

const routes = [

  get('/api/users', getUsers),

  get('/api/users/:id', getUser),

] as const;

// Type-safe, composable, refactorable

The TypeScript version is shorter, type-safe, and works with existing refactoring tools. For a code-fluent team, it's the natural choice.

Reference: Claude Code as Code Mode

The CREATE SOMETHING methodology uses Claude Code as the primary creation interface—code mode embodied. Natural language becomes the input; code becomes the output. The AI recedes; the creation emerges.

Creation Domain
Claude Code writes, refactors, understands
Execution Domain
WezTerm deploys, monitors, validates

Clear boundaries. Creation in one tool, execution in another. Tool complementarity enables code mode for creation.

Related Patterns

Dwelling in Tools

Code Mode enables dwelling. Fluent syntax lets the tool disappear.

Tool Complementarity

Code Mode is the domain for creation. Other domains serve other purposes.

Part of the CREATE SOMETHING Pattern Library