How Our Designer Ships Front-End Changes Without Writing Code
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
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
Enter fullscreen mode Exit fullscreen mode
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: { ... }) { ... } }"}'
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode
⚠️ Heads up: The
--dangerously-skip-permissionsflag 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.
Source: Dev.to
