← 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.

Published January 8, 2025

“The medium is the message.”

Definition

Code Modeis 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.”

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

Principles

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

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

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

Code Mode requires fluency—keyboard shortcuts, language idioms, tooling mastery. Investment in fluency pays dividends in flow. Without fluency, you notice the medium instead of the creation.

✓ Master one language deeply before broadening

✓ Learn IDE shortcuts until automatic

✓ Let syntax become invisible through practice

When to Apply

  • • The team is code-fluent

  • • Configuration has logic or conditions

  • • Type safety adds value

  • • The code IS the deliverable

  • • Iteration speed matters

  • • 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

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

Reference: Claude Code as Code Mode

Related Patterns

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

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