Loosely Coupled Thoughts — tagged claude-design

Implementing a Full-Stack Feature Using Claude Code's Dynamic Workflows

2026-06-07T11:52:52.865346+12:00

This is a continuation from the post I wrote recently titled Designing a Feature with Claude Design – Then Handing It to Claude Code.

In that post, I stepped through how I used Claude Design to create a UX design as well as a set of initial requirements for new tag selection and suggestion functionality in my blog's custom CMS.

This post steps through using those artefacts to drive the actual implementation in the frontend and backend apps. Specifically the goal here is to build this end-to-end using Claude Code's new Dynamic Workflows.

The outputs of the Claude Design exercise were a fully functional interactive prototype of the design and a markdown file with a set of requirements and acceptance criteria.

I already have a structured process for defining per-feature design specs, requirements and implementation plans in the projects repo. It consists of several things, but most relevant here is a folder structure and set of markdown files which I would consider the "spec" as part of the planning phase of this AI-driven engineering workflow. These are used as context for the implementation and verification, which often run across several separate sessions.

Usually when starting a feature I would be starting from scratch, or just a high-level set of requirements from the initial blog design and feature roadmap. For this piece of work, Claude Design gave me a working prototype that was already using my frontend style guide and a detailed set of requirements, which I put into the code base for the duration of the build. So I had a solid starting point. However, those didn't fit into my structured process that I already have in place, and I still needed a design spec for the full end-to-end solution.

For larger pieces of work I like to use Jesse Vincent's superpowers plugin. He has done a fantastic job of baking in real software development methodologies and workflows into a set of agent skills that drastically increase the quality and coherence of what's being built.

The first two skills I normally reach for are the brainstorming skill, which is for creating a design spec and the writing-plans skill, which is for writing an implementation plan for the spec. The design spec is the most important part. For any given feature this is where I spend most of my time. The clearer this is defined upfront, the more seamless the rest of the process will be and the higher the chance of it building what I actually want.

Once I'm happy with the design spec and implementation plan, after rounds of refinement, I would then hand it off to Claude Code to start building, usually with subagent development or agent teams.

I already found a general workflow that I follow when building software with AI. In its most simple form it's the Plan-Generate-Evaluate methodology. But that's a gross oversimplification of the entire underlying process. In fact, for each of the Plan-Generate-Evaluate phases I will run inner Evaluate-Regenerate flows, iterating over this at different phases until outputs are where they need to be. The first outputs are rarely good enough.

For example, when in the planning phase, for the design spec planning I will start with some initial context and then have a back and forth conversation with Claude to flesh out the requirements, acceptance criteria and architecture. Once it generates the initial design spec I then go through usually multiple rounds of adversarial evaluation and refinement of the spec until it's at a place that I am happy with. When I do the implementation plan I do the exact same thing, and then during the build I will do the same thing again. The build often gets broken down into separate chunks of work, usually to reduce the size of PRs and because Claude's context will start to fill up, at which point the generated outputs can start to deteriorate in quality and things can go off-piste. So, for each build phase I will go through rounds of Generate-Evaluate loops.

This has worked well for me so far, in the sense that I can effectively build substantially sized chunks of work without writing a single line of code myself, and at a quality level that meets my own pedantic standards.

However, it can be incredibly time-consuming and painfully arduous. It's making full use of AI to generate the design spec and implementation plan, do the build and then do the evaluation and verifications, all with their own inner loops of Generate-Evaluate.

Some might say this is over the top, and it can take a lot of time to go through this for any given piece of work. But so far this is the level of coercing, so to speak, that I have found to be necessary to achieve high quality outputs, especially those suitable for production-grade software. Anyone can ship some code fast; not everyone can do it well too.

But it's been me manually driving this workflow.

This is where I took a different route than usual as Opus 4.8 had just been released and along with that their new Dynamic Workflows capability, which I was super keen to understand and try out.

Here is how Thariq Shihipar and Sid Bidasaria from Anthropic describe Dynamic Workflows:

While the default Claude Code harness is built for coding, it is also useful for many other types of tasks because, as it turns out, many tasks resemble coding tasks. But there are certain classes of tasks where we have had to build custom harnesses on top of Claude Code to achieve peak performance such as Research, security analysis, agent teams, or Code Review.

Workflows allow you to dynamically create harnesses built on top of Claude Code that enable Claude to solve all of those problems more natively. You can also share and reuse these workflows with others.

And this is where I wanted to see what the new Dynamic Workflows could take off of my hands.

Creating and Using a Workflow

A while ago Anthropic published Building effective agents. In that they talk about what agents are, and more relevant here, what workflows are, which they define as follows:

Workflows are systems where LLMs and tools are orchestrated through predefined code paths.

And the Claude Agent SDK can be used to create these workflows in code.

Dynamic Workflows is the combination of these two built natively into Claude Code, with Claude being able to intelligently create these based on the task at hand. You can create them using natural language to describe a workflow, or use the new ultracode effort level (which is actually effort level xhigh plus instructing it to use workflows).

Nice touch on the pixelated visuals when selecting ultracode.

Since I have a relatively pre-defined workflow, I used natural language to describe to Claude how I normally work.

What I wanted to see was whether Claude could do everything after the design spec in this workflow. So the implementation planning, the build (or builds), and self-evaluation. And for each of those, also run inner loops of Generate-Evaluate and refinement. Get it to the point of fully completed and verified, leaving me to do final review.

Essentially I want to hand my design spec to Claude, have it build it to a high level of quality and then create a PR for me to review. 100% hands-off the code for the entire process.

The first question I had was: would Claude even be able to recreate my normal workflow? It's quite involved. Secondly, where I am normally involved in all the inner loops, making human judgement calls and steering things in a direction that I want, can Claude do this all on its own? And lastly – most critically – can it actually produce a good result?

Well, I'll be damned. It did all of that. And it felt like a moment of reckoning.

I had a relatively large prompt, explaining in detail the end-to-end process I normally go through. Pointed it to my design spec and requirements and asked it to create a workflow.

It then asked me whether it should just run the workflow or save it to disk for me to run it later. I got it to save it and then kick it off.

Here's what that looked like:

As you can see it incorporated the implementation planning in the "Preflight & Plan" phase with self-evaluation and refinement in the "Plan Review" phase. Excellent, this is usually painful and one part I'm not too concerned about.

This may sound alarming, not being concerned about the implementation plan. However my prompts already guide a plan in a certain direction, and I have a ton of things in the repo that tell Claude what style, architecture, structure, patterns, quality checks etc. I use in this repo. It has deterministic guardrails in place that Claude can't cheat on. Along with that there is a ton of already implemented code that follows the patterns I set in place. LLMs are really good at following style and patterns, good or bad! With the design spec and plan, and the surrounding context and environment, my confidence has grown that what will be implemented is in line with what I expect, and that gets verified by me at review time. If something is off, I take a close look to see where in my setup needs tweaking and feed that back into the harness, or if I underspecified something somewhere it gets updated. If things went totally sideways, my work gets done in an isolated git worktree and branch, and the reimplementation cost is very low, if it came to that.

The workflow broke the work down into three tracks of work: backend, frontend and then integrating those two tracks together. Claude decided this part of the workflow. In each track it ran the inner loops, not just for the track, but also for particular tasks in the track. This was following good engineering practice: breaking the work down into smaller chunks, using red-green TDD, building and then doing evaluation and refinement. All per task, per track of work.

Along with this, when I described the workflow I also instructed it to ensure that all acceptance criteria must be verified, with component testing (end-to-end against a locally running service) and testing the functionality in a browser against the running application. It did all of that. This is an area that is critically important to ensuring high quality, and the one that I see as one of the most valuable aspects to addressing the human review bottleneck dilemma that is a limiting factor for the potential productivity gains from AI-first software engineering to flow through to organisational productivity and efficiency.

After the build was complete, it did a final comprehensive "Final review" phase, which is what I normally do from multiple angles myself: implementation to spec alignment, code quality, security, etc. Anything it found there, it sent back to build to apply fixes and then re-ran the final review.

60 agents, 5.2m tokens, ~3.9 hours later (3 of which while I was sleeping), giving me a final report below:

Four hours is a long time, relatively speaking. But it's time that can be spent doing other things while Claude cooks. Building other things, sleeping, or going outside to touch grass. I didn't spend any time manually driving this workflow, so that was time saved and a not-so-enjoyable aspect removed from the process. Importantly, instead of me driving the reviewing and refining on the inner loops and becoming fatigued by this, I can focus my energy on scrutinising the final outcome, as well as feeding back any process improvements back into the harness and workflow.

It ran successfully, barring being able to test the AI tag suggestions due to an invalid token. My first test after fixing the API token, it worked perfectly.

For more visual context, this is how the workflow was structured to work its way through the various phases all the way through to completion, with some stats reported at the bottom.

So it worked, and it sure looked good based on the rigorous process it went through – a close approximation of what I drive manually. I was genuinely impressed by how much of my process it was able to autonomously do, and while I was sleeping!

But being the first time I have run this workflow, and not being in the loop to apply my human judgement, the next step was to scrutinise everything myself. Firstly, does it actually work? Yes, and damn it looks and feels good in the UI too. Was the code that it generated good quality and in line with what's expected in this code base? It was very much, and Opus 4.8 seems to go the extra mile and pick up and address some things as it goes, like a good engineer continuously improving as it stumbled upon things. Like tidying up a log line or updating affected docs, or noticing and calling out some preexisting bug. All the quality checks look good.

You may have seen that the very last phase was called Decision Log and Report. Because I was out of the loop and these workflows can't stop to ask for direction, I asked Claude to keep a record of all decisions the agents had to make along the way, like if it had to deviate from the design spec or plan. This happens and it's important to know about them in case it's something that needs to be adjusted. The majority of this was noise in this run, but I can see this proving valuable as in my manual process Claude often stops to ask me how to proceed, where in a workflow it can't do that.

The left side is the working prototype from the Claude Design exercise; the right side is the final implementation.

I also decided to run my own final verifications using my regular multi-angle review prompts. Normally when I run these after going through my usual manual process it will find some critical and high issues, which I evaluate and make a judgement call on. I was very surprised that it only found some medium and low-severity issues. Most of the time these are just noise or stylistic things. So there were a few minor things that I asked it to tidy up post-implementation, including a UI element overflowing into another. But I would say it got about 95% of the way there across the entire full-stack feature. I was not expecting this.

I have since run these workflows a few times, experimenting first on my personal projects, but have now also used them in a professional team environment and so far it has worked remarkably well.

My takeaway here is that these are incredibly powerful and flexible, and I think these kinds of workflows are exactly what is needed to get to fully automated, hands-off software delivery. Whether they are Claude's Dynamic Workflows, Codex or some other tool. The methodology and approach is what is important, Claude just seems to have really nailed making these workflows easy to use and available to anyone.

The quality of what these workflows can deliver is going to be highly dependent on the quality of the environment and harness that it's operating in. And I am skeptical that all my workflow runs will go this well on first pass. Workflows alone are not some magical silver bullet that will just start creating production-grade software. I have put considerable effort into my setup for this project (albeit more can be done). I would attribute this as the primary factor for this workflow being able to successfully one-shot build an entire full-stack feature to a high level of quality just from a well-defined design spec. Drop the same workflow into a sparse or legacy code base with weak conventions, lack of system context, insufficient tests and deterministic checks, and I'd expect a very different result.

The workflow isn't the moat; the environment is.

I have only used these workflows a handful of times and the complexity of the task at hand may result in varying results. But from what I have seen so far, I'm cautiously optimistic. And it's most welcome because implementing a workflow like this manually, often with multiple separate features on the go, can be incredibly time-consuming and draining. Workflows carry a lot of the weight and let you get on with the fun part, building.

Designing a Feature with Claude Design — Then Handing It to Claude Code

2026-05-31T17:48:59.372831+12:00

I've been wanting to give Claude Design a try. In this post I'll walk through my first use of it for designing some new functionality I wanted for my blog CMS. My use here is probably very basic, but it was an interesting exercise, and in particular I wanted to see how I could hand the design off for building.

Just a small disclaimer: I'm not a UX designer, or a creative person in general. But that's exactly why this exercise was interesting — it did a far better job than I ever could.

Getting into it...

I've recently built this blog site where this article is being read (I will write about this separately). It's very new and the feature/capability set is minimal, just enough functionality to manage, publish and serve blog content.

It has a custom-built CMS for managing the content, and supports slug-like tags that I can selectively apply to any of the content. These tags are visible to the right side of this article (or at the bottom on mobile).

When writing or editing content, it has a section where I can add new tags or use existing ones. Below shows editing an article in the CMS I wrote recently about human reviews being a bottleneck.

The behaviour of the tags input field is: On post creation, any never-before-seen tags will be created in the tags table in the database, existing tags will be referenced.

At first sight it looks ok, but:

It has no option to select existing tags.
It doesn't indicate if a tag being added was one that already existed or would be created.
It doesn't help me avoid creating near-duplicate tags with a similar name or even typos.

One wouldn't want different blog articles using tags that mean the same thing but with slightly different names. For example ai-engineering and engineering-with-ai, or even a typo in the tag like ai-eginering. So without any kind of tag selection, and the behaviour of the existing tag selection and creation, this made the UX painful (I had to open the tag management section in a different tab to remember what tags were available) and susceptible to tags becoming a mess across all the content.

Using Claude Design

Claude Design was introduced on 17 April. I had had a bit of a poke around in it before to see what it was about, but this was the first chance I had to try it out on something real.

I started by pasting four screenshots of the CMS and giving it this prompt. (I used the term "upsert" for tags, which wasn't quite correct, but Claude got it).

Attached are four screenshots of my blog CMS. One is where tags are managed, show when two tags existed; ai and harness-engineering. The second one is showing where I can add a post and enter tags. How it currently works is I can enter any tag value and when the post is created/published then the app(or probably the backend for the CMS) will upsert tags.

So you can see in the third image I enter two tags, one existing and the second one (new-tag) is new, so when the blog post got created is used the existing tag and then created a the new-tag, as shown in the fourth image, where I then have a total of three tags. (Two were existing one new one got created on that new post).

I like this functionality. However, right now when I enter tags on the create post page I don't get offered to select from existing tags, so if my new post should use an existing tag I have to carefully remember or go back and look in the tags section to remember the exact name of the tag so I don't end up with near duplicated for what should be the same tag.

Ideally when I start typing for a new tag, it should show existing tags that match (like contain) the text I have entered, with the option of selecting one of those. If none match it should allow me to add a new tag.

Come up with three options for the post create screen for selecting existing or adding tags. Should be simple and seamless and easy to use.

The prompt is relatively verbose (easy to do with voice dictation), but I wanted Claude to really understand how it currently works and what I am looking for.

Importantly at the end I asked for three design options.

After a fair bit of time it presented me with a fully functional interactive prototype, with three separate design concepts which I could toggle between with a selector at the bottom. And the generated designs looked very close to my actual CMS.

Concept A: auto-complete (shows matching tags as you type, with option to create)

Concept B: command-popover (shows all tags, filtering as you type, with option to create)

Concept C: A tag shelf

To be honest, I was really impressed with this. All these options look really slick. How long would it have taken a designer to come up with this before these kinds of AI-assisted design tools existed, especially with a fully functional interactive prototype? I am not a creative person and for personal things like my blog CMS these kinds of designs would never have seen the light of day.

Stretching a bit further with related functionality

I had already also been thinking about adding additional AI-generated tag suggestions functionality as a separate piece of work. I spend a ton of time trying to think about tag names for content. So I thought I would see how Claude Design would go with extending what it had already proposed while also incorporating this new AI tag suggestion functionality.

Here's the prompt I gave it:

These look really great. And actually now while looking at it, it has made me think a bit further about this. I would like you to perhaps create another version of this (leaving the existing on in place so I can still refer back to it), where another killer piece of functionality would be tag suggestions. The suggestions here would be based on the content in the post being written, and would use a combination of matching to existing tags, but also potential new tags. I'm not sure if this is different from the selection of tags that you have already designed for, but I would imagine there would be an endpoint in the server that could get tag suggestions based on the blog content. Not sure if it would be automatic as typing the post (seems heavy on the server, especially as it may be doing outbound AI calls to get suggestions), or just a button to get suggestions, or perhaps something a little smarter like suggestions after a certain about of text, or based on the title + blog text, maybe some initial suggestion and then a small refresh button or AI type button to suggest tags. Would exclude suggestions that are already added to the post. Also need to consider when editing a draft, should also work. What nice clean simple design options would you propose with this, fitting into the design we have already designed for the tag selection.

I tried to give it my thinking but also leaving it open-ended for Claude Design to be creative with. It gave me another interactive prototype with three modes to choose from, and incorporated one of the tag selection design options from the first round.

Mode A: A button with the name "Suggest Tags", or as shown below "Refresh" which would generate new suggestions to choose from.

Mode B: Smart auto, which generated suggestions after enough post content existed, and a small refresh button.

Mode C: Assistant panel. This felt super chaotic.

I decided I liked "Concept A: Auto-complete" for tag selection and "Mode B: Smart auto" for tag suggestions. These two seemed to complement each other.

I got it to create a final version of the working prototype with those two options. And this time I also gave it my existing style guide for the CMS (I probably should have done that at the start).

Ok, I like the tag selection Concept A, along with Mode B (smart auto) with tag suggestions. Can you do one more round showing a functional version with these two options baked in. I have also attached the style-guide for the existing application as it's currently implemented, so if we could align as much as possible to that.

This image below shows the two separate pieces of functionality working together. Selection as a slick fly-over style drop down when typing, and option to select tags from the tag suggestion box.

Moving From Design to Implementation

So now I had a flash new design that I was pretty excited about. But now how to feed this to Claude Code so it can build it as accurately as possible to the designs?

The conversation I had with Claude during this design process contained a lot of critical context that the design artefacts alone wouldn't hold. So, not knowing what Claude Design would be able to do here, I just asked it to write up a requirement doc based on the conversation and final design options chosen.

Ok, can you write up a set of requirements and acceptance criteria for this new functionality. Note that the develoers are never have going to have seen the other options, they just need to see the final solution and spec. The exact endpoint name for example is not that important, but what is important is how it's expected to behave and return so the UI functionality can work as expected. How the UX and interface behaves does need to be quite specific. Write this as a markdown document.

And lo and behold, it gave me a detailed requirements document! This is what it produced.

There are some options to hand off to Claude Code. I just downloaded the zip file.

I added the functional design prototype and the requirements document to an in-progress folder in my already created git worktree, ready for the next phase of planning and building.

The prototype has a lot of boilerplate code as it was a fully functional web site. However, for Claude to reference this, along with the requirements document it generated during the planning and implementation phases meant it would greatly increase the probability of getting it as close as possible to the design. And it did.

My code base for the blog application is already very well primed with context, structure and tooling that allows streamlining real engineering with AI. And I have templates and agent skills that help me create design specs and implementation plans for Claude to execute on.

This design exercise above happened the day after Opus 4.8 was released, so I was super keen to do some building with it, and also try out their new Dynamic Workflows.

The design and build was all fully completed on the same day (well to be more accurate, about two-thirds of the build was done while I was sleeping).

I will follow this article with another one running through how I did the build. I was quite happy with how that went.