Case study

Niteshift

Niteshift runs coding agents like Claude Code and Codex in cloud sandboxes and returns a pull request with evidence it works.

Role
Sole designer, alongside full-stack engineers
Scope
Product UI, shared components and brand rollout
When
Feb 2026–present
Shipped
256 merged PRs · 247 commits on main
From prompt to draft pull request. The agent’s 4 minutes 45 seconds of work play in time-lapse.

01The product

Coding agents need a real environment to prove their work

Niteshift is for developers and engineering teams who hand work to coding agents. Each task, started from the web app, Slack, Linear or GitHub, gets a cloud sandbox with the app running and a live preview, and comes back as a pull request.

Act I · The product

The surfaces where people direct their agents

02Task view

Help people find their place in a long agent run

People spend most of their time in the task view, so its history has to stay compact without hiding the turn in progress. I added an outline of prompts with hover previews beside the transcript, and made finished activity collapse on its own.

The outline beside the transcript previews each prompt and jumps to it in one click.
The outline’s preview card beside the transcript, showing the second prompt and the start of the agent’s reply.The outline’s preview card beside the transcript, showing the second prompt and the start of the agent’s reply.
A closer look: the prompt and the start of the agent’s reply, before you jump.

03Automations

Build an automation as one flow, trigger first

Creating an automation meant a separate dialog for the trigger, and the page read as a stack of unrelated controls. I rebuilt it as one page: the name in the header, the trigger chosen first, and the schedule restated in plain words.

Name the automation, pick its trigger, then read the cadence back as one plain sentence.

04Settings

Find a setting without knowing where it lives

People often couldn’t tell whether a setting like autofix was personal or organization-wide, so they couldn’t find it. I made settings searchable from the command palette, anywhere in the app, and showed each repository setting’s value without opening it.

Find Autofix from the home page. The command palette names the scope it lives in.

Act II · The system

One shared library behind the product

05Design system

A design system that documents only what ships

The design system had drifted from the product, leaving people and agents with speculative components and outdated guidance. I co-built the ui-v2 library and its Nightglass tokens, then cut its showcase back to production-backed components, removing 12,474 lines.

The Buttons family in the ui-v2 showcase: variants, sizes and states from the product.
The ui-v2 showcase overview, listing 17 component families and the foundations.The ui-v2 showcase overview, listing 17 component families and the foundations.
73 exported component modules, grouped into 17 families. The showcase documents what the product uses.

Act III · A new brand

Bringing an agency’s brand into the product

06The starting point

Carry the agency’s identity into everyday use

A brand agency defined Niteshift’s 2026 identity: the North Star mark, a warm palette and new typography. My role was to bring that direction into the web app’s components and screens, working with the engineers who build the product.

Three posters by a brand agency: the Niteshift wordmark, the North Star mark with orbital lines, and “Build beyond the known” above a warm horizon.Three posters by a brand agency: the Niteshift wordmark, the North Star mark with orbital lines, and “Build beyond the known” above a warm horizon.
The agency’s starting point: the mark, wordmark and visual world. Artwork by a brand agency.
The agency’s brand guidelines show a primary palette of golden yellow, amber and deep orange.The agency’s brand guidelines show a primary palette of golden yellow, amber and deep orange.
Golden yellow, amber and deep orange from the brand guidelines. Palette by a brand agency.

072026 brand

Live with the new brand before customers see it

The team wanted to live with the new identity in the product before customers saw it. I brought it into the app behind a flag, then made home just the headline and prompt box and quieted the sidebar and task view.

The same home screen, with the 2026 brand off and on through the product’s own switch.
The 2026 Niteshift home page: the North Star mark, a headline, one prompt box and a sunset horizon.The 2026 Niteshift home page: the North Star mark, a headline, one prompt box and a sunset horizon.
The new home keeps the next task in focus: a headline, a prompt box, a horizon.