You'll be building on Meridian, a demo dashboard for a fictional Thailand retail bank. Everything you see, accounts, balances and transactions, is mock sample data: nothing real and nothing connected. It's a safe sandbox, so build freely.
What this workshop is really about
At Song, we never work in silos. We build enterprise solutions that scale across the whole arc, from discovery and design to building, running, and operating them. We are in the business of consumer experience, end to end.
No silos
One team, one thread, from the first discovery conversation through to what runs in production. The disciplines are not handoffs. They are one continuous effort.
Experience is the business
We do not ship deliverables in isolation. We ship consumer experiences that have to scale, and everything we build is measured against that outcome.
Unified context, not roles
The harness forms one shared context around the work, so it does not matter which role you play. Everyone reads and steers the same source of truth.
The harness is how we form the context around building the best experience, whatever role you play: one unified context across the whole program, uniting the thinking into a single, better outcome.
What this workshop is
Non-coders recognise the loop as their own craft. Coders get recast from typists to directors of the system. Nobody is replaced. Everyone moves up.
The premise
Everyone in the room can drive real software delivery by describing an experience. By the end, every participant has shipped one real, verified feature using their own words.
The spine
The app is built in layers the assistant reads: context (.planning/), design (dls/), data (data/), the app, and the readout it generates at the end.
Your design layer
How it looks lives in dls/, your design system of tokens and components. Ask to see your DLS layer, and every feature you build comes out on brand.
By the end, participants can
- Run the SpectrumOS loop on a real task and produce a committed, verified change.
- Read
.planning/and yourdls/design layer as a shared source of truth, and trace one request to its commit. - Name one piece of their own mechanical work the system absorbs, and the judgment it frees them for.
The guide and the repo you clone
This guide (private)
The facilitator kit: prework email, run sheet, setup checklist, slides, participant handouts, and the AI-basics and closer scripts. It stays private, as usual. Nobody clones it, everything you need is right here on this website.
workshop-starter-repo (attendees clone)
The Meridian demo dashboard, the .planning/ scaffold, the dls/ design layer, a mock data API, and SpectrumOS bundled in vendor/. Carries a baseline git tag for an instant reset.
What to do before you come
Fifteen minutes, done before the day, so you walk in ready to build and not to troubleshoot. Tick each one off as you go.
Get Claude access and install the tools
Make sure you can sign in to Claude. Install Claude Code (the command-line tool you will drive) and the Claude desktop app. Confirm Claude Code is working:
claude --versionInstall Visual Studio Code
VS Code is your editor and built-in terminal for the day. Install it from the Accenture software portal (search for "Visual Studio Code"). Already have it? Skip ahead.
Install Node.js
Node.js runs the workshop tooling and the app preview. Install the current LTS version (Node 22 or newer). Already have it? Skip ahead.
With Homebrew: brew install node. No Homebrew? Grab the installer from nodejs.org.
Download and run the LTS installer from nodejs.org.
Confirm it worked
node -vCreate a GitHub account
The project lives on GitHub. If you do not already have an account, sign up (it is free) at github.com with your Accenture email. That is all you need beforehand: we download the project together when you sit down, in Get set up below.
Complete the Anthropic 101 training
Finish the Anthropic 101 training before the session. It is short, and it makes the concepts we use in the room feel familiar, so you get the most from the two hours.
Come ready for fun and learning
No coding experience needed. Bring your curiosity. You will describe what you want in plain words and watch it become working software.
Get up and running
Setup is a handful of lines you paste into a terminal, one at a time. It is the same for everyone, coder or not, and nothing here can break your laptop. Newer to this? Paste them one by one, or wave over your partner or a facilitator. Step 4 starts Claude Code, and from then on you can just tell it what you want in plain words.
Open a terminal
A terminal is just a box where you paste instructions. You will use it for the few lines below, then mostly talk to Claude.
Press Cmd + Space, type Terminal, press Enter.
Open the Start menu, type Terminal (or PowerShell), press Enter.
Download the project
Paste these two lines. The first copies the project to your Desktop; the second steps into it. If GitHub asks you to sign in, use the account from your prework.
git clone https://github.com/kaushikdas0/workshop-starter-repo.git spectrumos-workshop
cd spectrumos-workshopRun from: your Desktop. This creates a spectrumos-workshop folder and moves you into it.
Turn on the SpectrumOS commands
SpectrumOS ships inside the project, in the vendor/ folder. Paste these two lines to switch on the /spec- commands you will use all day.
npm install -g ./vendor/spectrum-os-2.0.3.tgz
spectrum-osRun from: inside spectrumos-workshop.
Start Claude Code
You installed Claude Code before the day. Now start it inside the project. From here on, you can ask it for things in plain words, or keep typing commands, whichever you prefer.
claudeRun from: inside spectrumos-workshop. Tip: press Shift + Tab to turn on Auto mode for a smoother flow.
See the app, and check where things stand
Now that Claude is running, let it open the app for you. Keep the browser tab it opens and refresh after each change. Then type /spec-progress yourself to see where the project is up to.
"Start a local web server for this folder on port 5173 and open the dashboard in my browser."
Then, in Claude Code, type
/spec-progressThe dashboard opens at http://localhost:5173, and /spec-progress should mention a .planning folder. Rather run the server yourself? Use npx serve . -l 5173 in a second terminal tab so Claude keeps running.
Nothing you type can break your laptop. To get back to a clean starting point, ask Claude to "reset the project to the baseline tag", or type git reset --hard baseline. Still stuck? Wave a facilitator over.
What we'll do in the room
Short and hands-on. Four things, each one a plain sentence you say to Claude. No coding, no prep, just follow along and tick each off as you go.
Learn how to get help
Start by learning how to get unstuck. Describe your problem in plain words, like a defect you want fixed, and Claude helps. And /spec-help lists every command and what it does.
"How do I fix a defect with SpectrumOS?" /spec-help
Good habit for the whole day: not sure what to do next? Ask in plain words, or run /spec-help.
See your design layer, the DLS
Your app has a design system, the DLS, that keeps everything on brand. Ask Claude to show it to you, and it points you to your dls/ folder: the tokens (colours, spacing, type) and components every feature is built from.
"Show me my DLS layer, where is it and what's in it?"
It lives in dls/ in your project: tokens.css, components.css, and the rules. Every feature reads this, so it comes out looking right.
Turn Spend by category into an animated pie chart
Now build something real. Take the Spend by category widget and turn it into an animated pie chart, on brand, using the design skill. Read the plan Claude proposes, approve it, and watch it build.
/spec-quick "Update Spend by category into an animated pie chart. Use our design skill so it stays on brand."
Approving the plan is your moment of control. Refresh the app after it builds to see the pie chart.
Let the feature document write itself
From the same context that built your feature, generate a short business feature document, in HTML, describing what you shipped. No separate writing step.
/spec-fast "Write a one-page business feature document in HTML for the landing page we have now."
Open the HTML it creates in your browser. That's the loop end to end: you said it, it shipped it, and it wrote it up.
Take it further at home
Same loop, your own time. Each of these is a plain sentence. Reach for /spec-fast for quick tweaks, or /spec-quick for a task end to end. Tick each off as you go.
Add a countdown animation to the fund buckets
At the top of the app are your fund buckets, the Everyday fund and the Holiday fund. Ask SpectrumOS to give them a countdown animation.
"Add a countdown animation to the fund buckets at the top (Everyday fund and Holiday fund)."
Change the brand logo
Swap the app's logo for a different brand mark. Use a real logo image file rather than drawing one in code.
"Change the brand logo in the app header to the logo in this image file."
Drop a real logo file into the project and point Claude at it. Don't hand-draw a brand logo.
Add a footer to the app
Give the app a footer that fits a banking dashboard: the bank name, a copyright line, and a few links.
"Add a footer to the app with the bank name, a copyright line, and a few links."
Make a 3-page client deck
Create a short, three-page business presentation that walks a client through the features you built for the banking app, including the design. Use whichever fits, /spec-fast or /spec-quick.
"Create a 3-page business presentation listing the features we built for the banking app, including the design, to show a client."
Set up an always-verify habit
Teach Claude a standing rule: every time SpectrumOS builds a feature, it should test it with responsive design first, and only then ask you to test. Quality gets checked before it reaches you.
"From now on, every time you build a feature, test it with responsive design before you ask me to test it."
This makes "prove it works on a phone" automatic, not something you have to remember.
Your cheat sheet
The loop, dialled up or down, and the handful of commands you'll use. Keep this open during the build.
The same loop, whatever you make
Same four beats every time. You just drill into the ones the work needs and pick the command that matches. Think of each as the loop, dialled up or down.
A trivial one-off
/spec-fastIt just does it and commits: a typo, a config value, a quick doc. No plan, no ceremony.
A small task, done right
/spec-quickIt proposes a plan, builds it, and commits with a clean history. Add --validate and it checks its own work too.
A design or UI idea
/spec-sketchDescribe the idea and it sketches two or three throwaway mockups for you to react to.
A full feature, end to end
/spec-phaseThe whole loop: /spec-discuss-phase, /spec-plan-phase, /spec-execute-phase, then /spec-verify-work. Run /spec-progress anytime to see which beat is next.
The commands
| Command | What it does |
|---|---|
claude | Starts Claude Code in the current folder. |
/spec-help | Lists every command and what it does. Start here when you're not sure. |
/spec-progress | Shows where the project is and what to do next. |
/spec-fast | Does one small task inline, fast: a tweak, a doc, a quick change. |
/spec-quick "..." | Does one task end to end: proposes a plan, builds it, commits it. |
/spec-verify-work | Checks your finished work against what you asked, including on a phone. |
git log --oneline | The clean history of what got built. |
git reset --hard baseline | Return to the clean starting point if it goes sideways. |