DEV Community: Chukwuduzie Blaise

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

Chukwuduzie Blaise — Sun, 18 Oct 2026 17:57:40 +0000

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:

Designer (Kimi K3): Turns your request and reference images into a design specification and HTML prototype.
Builder (DeepSeek V4.1 Flash): Implements the prototype in your app.
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.

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

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)

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)

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)

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

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)

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

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

Quick start

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

View on GitHub

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.

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.

What is Docker ?: Understanding the Concept of Containerization.

Chukwuduzie Blaise — Mon, 11 Mar 2024 14:01:02 +0000

The concept of containers have become widely adopted in software development, they have proven to offer multiple advantages in compatibility and consistency of software.

It has almost become a compulsory skill for Software Engineers to master in order to work effectively. Its very important to grasp the concept of containers before diving head on into usage. If that sounds good to you then keep reading.

"The Why"

Docker was introduced as a tool to package applications together with required dependencies in a consistent environment for production and deployment. This tool was introduced as a result of the problems faced with the traditional methods of deployment.

Here are two most common problems faced:

Dependency Issues : Most applications require multiple dependencies and varying versions, managing these across local and deployment environments can cause errors and be really stressful.

Environment Inconsistency: A good example is a group of 4 members working on the same project but using different operating systems (Eg: windows, mac, Linux). They would face compatibility problems as dependencies and frameworks work in certain ways for different environments.

A more obvious example is pulling a Node.js API that was setup with version 20 to a local machine running version 18 from GitHub. This would prove problematic for dependencies that require a minimum of version 20 to work, you would have to spend extra time working installing the right versions on your local machine.

What is a Container

A container is a lightweight, standalone and executable software package that isolates any application with all of its dependencies and runtime environment including libraries and system tools into a single portable unit. As the name container implies, it simply covers your application in an isolated environment that enables it run efficiently eliminating the problems mentioned earlier above.

"The How"

Containers work with the host system kernel in order to provide isolation. The system kernel is a core part of operating systems that serves as an intermediary between software and hardware, working with the kernel gives the containers native access to the systems hardware resources. This enables use of direct access of container runtimes to manage these resources thereby making them more resource efficient and this is what grants it the title "lightweight".

Containerization is the process of packaging and running applications in a consistent and isolated environment like a container. This improves deployment and scalability marginally. Multiple containers can be run on one system all isolated from each other.
_
"A very good analogy to describe it is packing a child's lunch for school, assume that the lunch box is the container then all items in it are various components of the application, this ensures the child's lunch is isolated from that of the other kids and maintains a consistent state till its time to eat and this just same for the containers."_

Are Containers the same as virtual machines???

Containers may seem a bit similar to VMs by concept, but are not the same: Containers are used mainly when deployment, scalability and are preferred for microservice architectures. They are less resource intensive and can enable a host system run multiple instances at once.

Virtual Machines are more resource intensive, are used for running old legacy systems with full isolation and when more security is required. A virtual machine emulates a whole host system including hardware and software. Running multiple virtual machines on one host system is usually discouraged due to the amount of resources they consume.

What is Docker?

Docker is simply an open source tool that delivers software in packages called containers. It is a tool used to perform containerization to software, it is the most popular among others used.

## Benefits

** 1.Consistency**: Docker ensures consistency in software environments, developers can package their applications and dependencies into containers.

** 2.Isolation**: Each container runs in its own isolated environment, this keeps application independent from each other.

** 3.Portability**: Containers can run consistently across different platforms, including local development machines, on-premises servers, and cloud infrastructure.

** 4.Resource Efficiency**: Docker containers are lightweight and consume minimal resources compared to traditional virtual machines.

Key Components

Docker consists of key components that enable containerization and streamline the process of building, shipping, and running applications.

Docker Engine:
It creates and manages containers on the host system. It includes the Docker daemon, which runs in the background and manages container lifecycle operations, and the Docker CLI (command line interface) for interacting with Docker.
Docker Image:
Docker Image is a read-only template used to create containers. It contains the application code, libraries, dependencies, and other files needed to run the application. Docker images are built from Dockerfiles and can be shared and reused across different environments. Images are stored in a registry, such as Docker Hub.
Docker Container:
Docker Container is a lightweight, runnable instance of a Docker image. Containers encapsulate applications and their dependencies, providing a consistent runtime environment for running applications.
Dockerfile:
Dockerfile is a modifiable text file that contains instructions for building a Docker image. It specifies the base version, dependencies and other configuration settings needed for the application.
Docker Registry:
Docker Registry is a storage and distribution service for Docker images. The most popular registry is Docker Hub, which provides a centralized repository for storing, sharing, and distributing Docker images. This is similar to Github where developers can pull and push containers for public use.
Docker Compose:
Docker Compose is a tool for defining and running multi-container Docker applications. It uses a YAML file to specify the services, networks, and volumes required for an application, allowing developers to define complex application architectures with ease.

The use of containers is very important and requires calmness of mind to master, as a result I have two more modules lined where I would walk you through hands on containerization with docker and subsequently deployment.

If you enjoyed this and want to complete the modules, give me a follow and watch out for module 2 of this series.

Lets Connect : Twitter | LinkedIn | Github

Building an AI Chatbot using Open AI API "GPT-3" model with Node.js and React.js

Chukwuduzie Blaise — Sat, 11 Mar 2023 14:43:57 +0000

"The field of artificial intelligence (AI) has experienced a sudden explosive boom in recent months, with advancements in machine learning, neural networks, and natural language processing. AI is revolutionizing industries from healthcare to finance to transportation, and its impact is only set to increase in the years to come. The sudden boom in AI is due to a confluence of factors, including the availability of massive amounts of data, the rise of cloud computing, and the development of powerful algorithms. In this article, we will explore the reasons behind the sudden AI boom and its implications for the future and how to utilize this tool as a developer."

If you are reading this then I guess you liked the opening paragraph above, well it was written by the most popular AI tool today **ChatGPT **and this is proof of its capability and the impact it has had over the last few months on most activities surrounding humans and computers in general. As a Software Developer, I became curious as to how AI models could be utilized. In this article, I will share steps and guide you to building your very own text completion chatbot using **Open AI's API **and also make sure you understand some very important concepts.

Before we start, look at the below as your table of contents and guide for this Article:

1. Understanding prompt Engineering.

2. Examples of prompts with chatGPT.

3. Different AI models from OpenAI and uses.

4. Understanding the temperature scale and its effect on AI responses.

5. Choosing your tech stack for the build, Creating Node.js, Express.js server and OpenAI setup.

6. Creating React App and making an API call to the back-end.
**
*7. Receiving responses from the backend.

## Understanding Prompt Engineering

Firstly do not get overwhelmed by the term** "Prompt Engineering"**, it's a simple theoretical concept to grasp. It has to do with effectively querying (asking questions) to an AI to get the desired or even a much better outcome than expected. This is because even though AI models are trained to give humanlike responses there are still limits to their ability to properly understand questions. So even though they are made to be intelligent, there are definitely better ways to ask questions rather than asking a regular person.

## Examples of Prompts with ChatGPT

Let us look at one example below:

Now let us look at a more structured prompt.

If you look at the two images above clearly, you will see that in the first chatGPT gives a vague response that makes in the first one. In the second image, the response is much more detailed and straight to the point. One can also see that this is partly because of the prompts used, the first one had little detail and so the data was generated based on the little it could grasp. In the second image, the parameters were defined and this goes to show exactly the significance of Prompt Engineering.

## Different AI models from Open AI and their uses.

AI is capable of doing a lot of tasks but in other to improve efficiency and other factors, OpenAI created models named after popular personalities or technical terms. Each of them has a particular field they are trained to perform better at. The image below will show you all the current models.

You can also head on to Open AI API site to learn more. The AI model we will use is the text-DaVinci-003 based on GPT-3.

## Understanding the temperature scale and its effect on AI responses.

Just like the prompts enable you to query the AI model, the temperature also has an important role to play in the nature of the responses you get. The temperature scale ranges from 0 to 1 and different temperature values affect the creativity of the AI. Let us look at an example.

If you pay attention to the above image you can see I asked the AI a question "What is the best way to learn to code?" When you look to the right you can see there is a temperature scale and it is set to zero. Now the answer it gives seems fair enough but just hold on till you see the reply with a higher temperature value below.

In this next example, I asked the AI the same question on a temperature scale value of 1 and if you take a look at the answer you will see a difference. The AI is more direct and precise and goes ahead to even mention the programming languages needed to learn to code. Later in this article in your backend build you will find out that you can change the temperature value yourself when working with the API.

In general, the higher the temperature, the more flexible, precise and honest the AI gets with its responses. it is very simple to understand, some developers even argue that the temperature scale of chatGPT is set to a low value as a control measure, but who knows?

## Choosing your tech stack for the build.

As a developer, your tech stack is a combination of languages and tools that you are comfortable building with. I am a MERN stack developer and that means I work with React.js on the front end and Node.js, Express.js on the back end and MongoDB for the databases.

The OpenAI API currently supports Python and Node.js for builds

I will be working with Node.js if you work with python be sure to still follow the steps and you will be fine, so let us get started.

## Setting up Express.js server and API setup

Open your IDE of choice, mine is VS code. Create a project with a folder for the backend and the frontend too.

Initialize your package.json to keep a record of your dependencies by using the following command.

npm init -y

The next step is to install the following packages from npm

npm install openai body-parser dotenv cors

Now we set up our express server and require all our modules for the project.

If you are familiar with APIs you will remember that you usually need an API key for authorization and so you have to generate one. Head over to Open AI and create an account. While you are in click on your profile icon at the top right corner.

You will see options to generate an API key, do this and continue.

Please be mindful that you do not share your API key with anyone as it is personal, as a result of this we will assign this API key to a variable in our .env file which we will create next. This helps with security to ensure unauthorized users do not take advantage of our code.

Now we can refer to the API key as OPENAI_API_KEY, you can also give it any other variable name of your choice.

Now let us write the remaining code for the backend with the documentation as the guide.

All the logic is written in the server.js file for the sake of simplicity in the code. If you do not understand it all do not panic, I will explain everything completely.

In the beginning, we reference the configuration function with the apiKey as its value then we reference the OPENAI_API_KEY just like we defined in our** dotenv **variables.

The next handleError function is for error handling in case we have a bug with the configuration function for the API key.

We later use the body-parser, a node.js body-parsing middleware. Cors is used to limit privileges to routes as a means of security.

The next is the main logic as a post request to the client side for use, for more reference visit Open AI.

## Creating React App and making an API call to the back-end.

In your frontend folder create a react app using npm, npx or yarn depending on your preference and give it a name. I prefer npm because I am accustomed to it and I will call mine alexander-ai.

create-react-app alexander-ai

Clean up your react-app boilerplate code to your liking, the react-app will be a single-page application for simplicity but you can customize your app for more frontend functionality if you wish.

In your App.js file, we use the state hook to manage the state for messages we will send to the server and responses respectively.

Next, we have to make an API call to our backend server to get responses. I will install an npm package called Axios to help me with this.

npm install axios

Now, we make the API call using axios.post, alternatively you can make an API call using the fetch API as seen in the code sample below.

To receive and send responses to the server we design a simple form for input, you can play around with your user interface and make it into a chat app. For simplicity, we will keep it this way.

If you have followed this tutorial up to this point, you should give yourself a pat on the back as you have done well. Now you can go load your react app in your browser and hold a conversation with your chatbot.

For more reference on the source code, you can check my GitHub and Open AI. Follow me if you are interested in topics like this, I hope you come back next time.