DEV Community

Cover image for Beyond the Purple Gradient: I Gave an Open Coding Agent a Design Team
Chukwuduzie Blaise
Chukwuduzie Blaise

Posted on

Beyond the Purple Gradient: I Gave an Open Coding Agent a Design Team

Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle Submission đź’¸

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle

What I Built

I started using AI coding tools in 2024, mostly to paste code and debug. By 2025, anyone could generate a React landing page in seconds.
But the more AI-generated UIs I saw online, the more they started looking alike: the same gradients, cards, and layouts. The phrase “vibe-coded slop” caught on for a reason.

Then Claude Design came out and changed the process. It creates a design and then writes a handoff document. Claude Code builds exactly what the handoff says, and nothing else. A separate design model takes the experimenting off the coding agent's hands, so the agent can focus on implementation, where it shines.

When Hacktoberfest kicked off, I wanted to see if I could recreate that workflow using open-weight models and an open-source coding agent. I'm relatively new to AI, so I made myself a promise: whatever I achieved, I'd document the experiment honestly.

That experiment became Skulptor, an open-source, agent-agnostic design skill that helps coding agents produce more deliberate frontend designs.

It works like a small design team:

  1. Designer (Kimi K3): Turns your request and reference images into a design specification and HTML prototype.
  2. Builder (DeepSeek V4.1 Flash): Implements the prototype in your app.
  3. Critic (Kimi K3): Compares screenshots of the implementation against the prototype and identifies what needs fixing.

Who Would Pay for This?

Last week, I discovered someone running a scam in a group I manage. He was charging people $5 to share his Claude subscription. People paid because they couldn't afford $20 a month, but needed access to finish gigs that could earn them more.

When we raised the issue, more victims came forward. Many had been too ashamed to speak up.

A real report from my group. Names and details hidden.

It made me think about who Skulptor could serve: students, fresh graduates, and young professionals in Nigeria and other emerging markets who need AI tools but can't justify a full monthly subscription. They may be willing to pay smaller amounts when a gig comes along.

Open-weight models with pay-as-you-go access could make that possible. I started with frontend development, it could be backend, planning and system design soom.

How I Feel About It

Honestly, I made progress, just not as much as I'd hoped. Even the strongest open coding models struggled to produce great designs. Skulptor improved the results, particularly with DeepSeek V4.1 Flash, while keeping costs low — one of the project's main goals.

But the experiment itself was exciting. I'm new to AI, and comparing DeepSeek, Kimi, and GLM side by side through Backboard and R-CLI, with the cost of every run visible, taught me a lot.

Here's what worked, what didn't, and what surprised me.

Demo

Live page built by Skulptor: Crumb & Co bakery

Kimi's prototype DeepSeek's build
Prototype Build

Every page below came from the same prompt: a one page site for a small bakery called Crumb & Co, with its real menu, hours, address and 3 photos. Same content, same photos, different setups.

1. DeepSeek V4.1 Flash alone, no skill ($0.13, 23 min)

DeepSeek alone

The page was full, but generic: rounded cards, pill tags, and centered layouts. It even repeated “Since 2009” five times to fill space.

2. Kimi K3 alone, no skill ($1.09, 20 min)

Kimi alone

Despite its strong design reputation, Kimi produced almost the same template as DeepSeek, repeating the tagline five times at roughly eight times the cost.

3. Skulptor v2: DeepSeek with my skill ($0.05, about 20 min)

Skulptor v2

The skill gave DeepSeek a distinct concept: a bakery before dawn, with amber oven light and a timeline of the bakery's day. My favorite idea, but the desktop layout was sparse and some details were invented.

4. Skulptor v3: Kimi designs, DeepSeek builds, Kimi checks ($0.67+, 25 min)

Kimi's prototype DeepSeek's build
Prototype Build

The handoff worked almost pixel for pixel, and the critic approved it after one round. But the design felt safe, with too much empty space on desktop. Better execution didn't mean better design.

5. Skulptor v3 on a fashion label, no photos ($0.67+, 34 min)

Fashion prototype

Kimi drew on Lagos fashion, using indigo, gold, and adire-inspired patterns. But without real photos, the page felt empty; the fabric swatch looked like a placeholder, and the logo clashed with the pattern.

What the screenshots show: Without Skulptor, different models produced similar generic pages. With it, the designs had more distinct concepts and less repetition, but still struggled with desktop layouts. The handoff is solved. Taste is not.

Code

GitHub logo vector-10 / skulptor

An open-source project for the hacktoberfest week 2 challenge "side-hustle"

Skulptor

Skulptor is an open Agent Skill that gives a coding agent a design team. Before any code is written, a designer model makes a design. Your coding agent builds it exactly, takes screenshots, and a critic model checks the build against the design.

By default, Skulptor uses open weight models: Kimi K3 (Moonshot's Kimi K3 License) designs and checks, and DeepSeek V4.1 Flash (MIT) builds. Both are called through one Backboard API key.

It is a standard Agent Skill, so any coding agent that supports skills can use it. But it is made for cheap, open coding setups. The goal is good frontend design from low cost open models.

Live demo: Crumb & Co, a bakery page built with Skulptor

Contents

Quick start

  1. Copy .agents/skills/skulptor/ into your project's .agents/skills/ folder.
  2. Add…

The skill lives in .agents/skills/skulptor/. Every test, with its prompt, cost, time and screenshots, is logged in the skulptor-lab repo.

How I Built It

The stack

Skulptor combines an open-source coding agent, open-weight models, and a reusable Agent Skill.

  • R-CLI (MIT) by Backboard is the coding agent. I'd barely heard of it before this challenge and almost defaulted to OpenCode. With Backboard credits available, I gave R-CLI a try. Its slash commands, skills, and memory controls felt familiar from using Claude Code.
  • DeepSeek V4.1 Flash builds the frontend at a low cost.
  • Kimi K3 handles design and critique using its vision capabilities.
  • Backboard API lets me switch between models through one API key.
  • Agent Skills provide the instructions through a SKILL.md file, supported by plain Node.js scripts and Chrome screenshots.

The journey

I started learning how AI agents work on October 13, building Skulptor in my spare time. I logged every experiment, including prompts, costs, and execution times, in experiments.md.

First, could a cheap model even code?

I gave DeepSeek three React tasks: add a component, implement a dark-mode toggle, and fix a planted bug. It passed all three for a few cents. That was enough reason to keep going.

Then I noticed the design problem.

I asked Kimi, GLM, and DeepSeek to create a simple contact card. All three produced variations of the same purple template. A more specific prompt, with clear design direction, made a noticeable difference. That raised a question: could I turn that guidance into a repeatable workflow?

Versions one and two: one model, every role.

My first versions asked DeepSeek to plan, build, screenshot, and critique its own work. I added rules for avoiding generic AI aesthetics and using desktop space properly. The results improved, but the model sometimes skipped its own critique.

Version three: separate the roles.

Inspired by Claude Design's handoff workflow, I split the process between designer, builder, and critic. design.mjs asks Kimi for a design specification and HTML prototype. DeepSeek implements it, screenshot.mjs captures desktop and mobile views, and critique.mjs asks Kimi to compare the result against the prototype.

The critic identifies up to three issues per round, with a maximum of two rounds of fixes.

Finally, I tested the models without Skulptor.

Kimi K3 cost $1.09 and DeepSeek cost $0.13 in my standalone tests. Both produced generic-looking results.

What surprised me most

The cheaper model, paired with a structured design workflow, produced a more distinctive result in my experiments. One Skulptor v2 run cost $0.05, compared with $1.09 for a standalone Kimi K3 run.

These weren't controlled, like-for-like comparisons, so the numbers don't prove Skulptor is better. But they gave me a reason to investigate something I hadn't expected: better results might come not just from choosing a stronger model, but from giving a model a better process to follow.

What I learned

  • A stronger model alone does not fix generic design.
  • Splitting the designer and the builder makes the build exact.
  • A critic needs a picture to compare against. Vague feedback like "improve it" gave random, sometimes worse results.
  • A good prompt reads like a client brief: all the facts, and no style words like "warm and modern".
  • Memory and nearby files change the output a lot. For fair tests, I used a fresh thread with memory off.
  • Taste did not come from more rules. My rules may have made Kimi too careful, which left the pages sparse.

What I'd do differently

Honestly, I'm not sure. I experimented as I went, and that freedom helped me. I don't think there's a version of me that would have been more methodical in five days. I'd build something closer to a real side hustle app. But the truth is, I set out to solve a problem that was pressing for me, and one I watched people get scammed over.

Why Does Open Innovation Matter?

As a Nigerian, open AI matters to me because most closed tools charge in US dollars, putting them out of reach for many young developers here.
Open-weight models offer another path: useful AI at a cost that makes more economic sense.

This entire experiment took 12 logged runs across DeepSeek, Kimi, and GLM, using one Backboard API key, for less than $5 in free credits. I could switch models, track costs, and experiment with the coding agent itself.

Closed tools still have advantages. Their creators can optimise the model, context, memory, and execution harness together. But this experiment showed me that the model isn't the whole story. How we direct it, evaluate its work, and build around it matters too.

Open innovation gives more people the chance to explore that space, learn from their experiments, and build something useful without needing a frontier-model budget.

My First User

My first user is a friend I'll call Ugbana Awortu. He's a hardware engineer who uses AI, but not enough to justify $20 a month for a subscription. That's exactly who I built Skulptor for, so I asked him to try it.

Setup was the hard part. Ugbana isn't a developer by profession, so it turned into a small engineering session. I helped him install Node and npm, set up R-CLI and get his Backboard key working. Lesson learned: if Skulptor is for people outside the developer bubble, setup has to get much simpler.

Skulptor Onboarding, Setup with Ugbana

He was really impressed. He had only ever heard of Claude and ChatGPT, and he didn't expect open weight models to produce that quality, or a skill to make that much difference.

Would he pay? In his words, "once it gets good enough, with more expressive UI styles", he'd commit to $10 to $15 a month. That's half of a Claude subscription, for someone who needs the work done but not the full subscription.

What he asked for next: more UI styles, and to be told as soon as the next update is ready. So I have more work to do.

Prize Categories

Backboard: Backboard let me compare three open-weight models through one API key for less than $5.

DeepSeek handled implementation cheaply, Kimi designed and critiqued through screenshots, and GLM showed how a single critique could transform a generic UI. Switching models was one setting, and every run showed its cost.

It was a five-day experiment in what open models can do. I feel more experiments like this are necessary if we really want to unlock the usefulness of open weight models. Step by step.

Top comments (0)