How Our Designer Ships Front-End Changes Without Writing Code

Hsin Yen Chung — Sat, 11 Apr 2026 22:35:15 +0000

Our product designer Zain just shipped a front-end change to our web app without writing a single line of code. He typed a request in Slack, and 10 minutes later there was a PR with a live preview environment.

This post breaks down exactly how we built this system at Spuree.

Video walkthrough: https://youtu.be/7_8cApBGWss

The Workflow in 30 Seconds

Zain types a request in our #ai-coding Slack channel
Spuree AI Coder (our AI agent) receives the message
Agent creates a Linear ticket automatically
Agent spins up a Claude Code sub-agent in a git worktree
Sub-agent implements the change, runs prettier, commits
Agent opens a PR on GitHub
CI/CD spins up a preview environment
Zain clicks the preview link, verifies the change visually, and approves — or asks for another iteration

No IDE. No git commands.

The Stack

Component	What it does
OpenClaw	A self-hosted AI agent for automating daily workflows
Claude Code	Anthropic's coding CLI — does the actual implementation
Linear	Ticket tracking — auto-created per request
GitHub	PRs, CI/CD, preview environments
Slack	Interface for the team
Spuree	Storage for agent output, backups, team sharing

How It Started: A Mac Mini and One Install

A few months ago, I installed OpenClaw on a 2018 Mac mini — a gift from a friend. One line to install:

npm install -g openclaw

I named it Chung.

Like onboarding a new employee, I taught it my workflows step by step:

How I review PRs
How I track Linear tickets
How I monitor tech blogs
How I summarize YouTube videos

Each workflow became a reusable skill — a markdown file with instructions, scripts, and configuration that the agent follows.

The Coding Skill: `claude-code-pr`

This is the skill that powers the designer workflow. Here's what it does:

1. Creates a Linear ticket

curl -s -X POST https://api.linear.app/graphql \
  -H "Authorization: $LINEAR_API_KEY" \
  -d '{"query": "mutation { issueCreate(input: { ... }) { ... } }"}'

The agent extracts the branchName from Linear's response — this ensures branch naming is consistent.

2. Creates a git worktree

cd $REPO_DIR
git fetch origin main
git worktree add ${REPO_DIR}-wt-${LINEAR_ID} -b $BRANCH_NAME origin/main

Worktrees let us work on multiple features in parallel without switching branches in the main repo.

3. Spins up Claude Code

cd $WORKTREE_DIR
claude --dangerously-skip-permissions

⚠️ Heads up: The --dangerously-skip-permissions flag lets Claude Code execute commands without asking for confirmation — file writes, terminal commands, all of it. We use this because the agent runs on a dedicated Mac mini with no sensitive data. If you're following along, only use this flag in sandboxed or isolated environments.

The agent sends a structured prompt with:

The requirements from the Slack message
A mandatory completion checklist (commit, PR, cleanup)
Formatting rules (run prettier before committing)

4. Creates a PR

Claude Code commits, pushes, and creates a PR with:

Summary of changes
Linear ticket link
Testing instructions

CI/CD automatically creates a preview environment from the PR.

5. Designer reviews

The preview URL appears in Slack. Designer clicks it, verifies the change visually, and approves — or asks for another iteration.

What Else the Agent Does

The coding skill is just one of many. Our agent runs cron jobs throughout the day:

Cron Job	Schedule	What it does
Morning AI Digest	8am daily	Searches for AI/tech news, sends bullet summary
Hacker News Summary	9am daily	Pulls HN front page, summarizes top stories
Tech Blog Monitor	9am daily	Checks RSS feeds + scrapers for new articles
PR Watcher	Every 30 min	Notifies about new PRs with code review summary
Video Summarizer	On demand	Transcribes YouTube videos, generates summaries

From Personal Assistant to Team Tool

After a few months, I realized everything was trapped on one machine. No backup. No team access. No way for others to comment on the agent's output.

The migration:

Backed up everything — memory, skills, cron jobs, config
Uploaded the backup to Spuree (our storage platform)
Spun up an EC2 instance on AWS
Downloaded and restored the backup
Adjusted file paths (Mac → Linux differences)
Connected to Slack

Spuree AI Coder was born. Now the whole team has access to the same workflows.

Agent output has a home

The key insight: agent output needs to be searchable, shareable, and backed up — just like any other work product.

When our agent creates something important — a strategy doc, a feature spec, meeting notes — it uploads it to Spuree automatically. Team members get a link, comment on it, and the agent creates the next version based on their feedback.

What I've Learned

Managing a team in the AI era, the gap between product, design, and engineering gets smaller — but only if you give your agents a proper setup:

Memory that persists — the agent needs to remember context across sessions
Skills that are reusable — turn workflows into shareable, version-controlled instructions
Output that's shareable — agent work needs a home where teams can collaborate on it

Get Started

OpenClaw: github.com/openclaw/openclaw
Spuree waitlist: spuree.com/waitlist — we'll share the skills and help you set up

I'm Steven, Head of Engineering at Spuree. We're building a storage platform for the age of AI agents. If you have questions about the setup, drop a comment — happy to go deeper on any part of this.

DEV Community: Hsin Yen Chung