I Built an Open-Source Toolkit to Fix Repetitive AI-Generated UI Designs

faysalishere — Tue, 10 Nov 2026 13:09:57 +0000

The problem with AI-generated interfaces

AI coding assistants have made development significantly faster. But there's one problem I keep noticing: many AI-generated websites look surprisingly similar.

You ask for a modern website, and you often get the same familiar ingredients:

An oversized hero section
Three or four rounded feature cards
Purple gradients and glowing effects
Generic navigation patterns
Decorative animations that serve no clear purpose

The code might work perfectly, but changing the colors doesn't necessarily create a new design.

That got me thinking:

What if we challenged the design decisions before asking AI to write the code?

That's why I started building CreativeCode Engine, a free, open-source design-direction toolkit for AI-assisted development.

Introducing CreativeCode Engine

CreativeCode Engine is an experimental toolkit designed to help developers explore meaningful UI design alternatives before implementation.

Rather than focusing exclusively on visual styling, it encourages decisions around:

Information architecture: How content is organized
Visual hierarchy: What users should notice first
Layout composition: How information occupies the screen
Navigation: How users move through the interface
Interaction design: How the interface responds to user actions
Design evaluation: Whether choices are justified by evidence

The current version, v0.2.0, includes:

An offline Python CLI
Three curated design concept architectures
Structural originality checks
Evidence-based design review tools
Reusable AI prompts and design guidelines
A free interactive portfolio concept demo

The project is MIT licensed and open source.

"Explore the Live Demo" (https://faysalishere.github.io/creativecode-engine/)

"View the GitHub Repository" (https://github.com/faysalishere/creativecode-engine)

One project, three genuinely different design directions

One of the ideas behind CreativeCode Engine is simple:

Three concepts should represent three different ways of thinking, not three different color palettes.

For example, imagine designing a personal portfolio.

Concept A: Editorial Identity

This approach puts personal identity, typography, and storytelling first.

The interface uses editorial composition and asymmetrical layouts to communicate personality.

Its primary purpose is to introduce the creator before presenting individual projects.

Concept B: Project Dossier

This direction takes a work-first approach.

Instead of opening with a large personal introduction, the interface emphasizes projects, their context, and structured information.

Visitors explore the creator primarily through the work itself.

Concept C: Cinematic Chapters

This approach organizes content into sequential visual chapters.

Rather than showing everything in a conventional continuous grid, it guides visitors through a deliberate narrative progression.

Each direction changes the information hierarchy, composition, or interaction structure—not merely the background color.

You can explore these approaches in the interactive demonstration:

"Open the Portfolio Concept Demo" (https://faysalishere.github.io/creativecode-engine/demo/portfolio/)

These are experimental design studies, not completed production websites.

How to use CreativeCode Engine

The core toolkit runs locally with Python 3.10 or newer.

No external Python packages or API keys are required.

Step 1: Clone the repository

git clone https://github.com/faysalishere/creativecode-engine.git
cd creativecode-engine

Step 2: Generate three concept structures

python3 -m creativecode concepts \
--brief examples/portfolio_brief.json \
--out concepts.json

This produces three curated structural starting points based on the provided project brief.

Step 3: Check structural originality

python3 -m creativecode originality \
--concepts concepts.json \
--out originality.json

The originality checker compares declared design characteristics to identify concepts that may be too structurally similar.

It does not analyze visual screenshots or independently determine aesthetic originality.

Step 4: Generate a design critique packet

python3 -m creativecode critique \
--brief examples/portfolio_brief.json \
--concepts concepts.json \
--out critic.json

This creates an evidence-oriented review packet for evaluating the concepts.

Step 5: Run the automated tests

python3 -m unittest discover \
-s tools \
-p 'test_*.py' \
-v

The project includes automated tests for the CLI and its supporting logic.

You can also use the included design prompts with your preferred AI coding assistant.

Why I included a design review system

Generating alternative concepts is only part of the process.

Someone still needs to challenge the decisions.

For example:

Is the layout genuinely different or simply restyled?
Does the navigation match the user's task?
Is the typography readable?
Is the mobile experience practical?
Are animations useful or merely decorative?
Is the implementation unnecessarily complicated?
What has actually been tested?

CreativeCode Engine includes a weighted design review framework that helps organize this evaluation.

But there's an important distinction:

A calculated design score is not proof that a design is beautiful, usable, accessible, or original.

The score is based on reviewer-provided evidence and judgments.

The purpose is to encourage critical evaluation rather than automatically declaring every generated design successful.

What CreativeCode Engine cannot do yet

I want to be transparent about the project's current limitations.

CreativeCode Engine is not an autonomous AI website builder.

The current concept generator uses curated, rule-based architectures rather than an integrated generative AI model.

The originality checker compares declared structural attributes, not rendered UI screenshots.

The design critic prepares an evaluation framework; it cannot independently certify professional design quality.

The live GitHub Pages website demonstrates the concepts but does not execute the Python engine in the browser.

These limitations are part of the reason I'm sharing the project early.

I want to understand which parts developers find useful before expanding the system.

What's next?

Some directions I'm interested in exploring include:

Optional AI model integration for more open-ended creative exploration
Stronger originality analysis using rendered interfaces
Screenshot-based visual feedback
Better design evaluation workflows
Integration with existing AI coding environments

These are future ideas, not features already implemented.

I would rather develop them based on real feedback than add complexity without knowing whether it solves a meaningful problem.

Why make it open source?

I believe AI-assisted development should involve more than generating code as quickly as possible.

The quality of the decisions behind that code matters just as much.

CreativeCode Engine is an attempt to make creative direction, design reasoning, and critical evaluation more deliberate.

It's also an opportunity to learn from developers who approach design differently.

The project is available under the MIT License.

Anyone interested can inspect the code, experiment with the toolkit, report issues, or contribute improvements.

I'd genuinely appreciate your feedback

If you use ChatGPT, Claude, Cursor, or other AI coding assistants, I'm interested in your experience.

Three questions:

Do you regularly encounter repetitive AI-generated UI designs?
Would comparing different structural concepts help your development workflow?
What is the most important missing feature that would make a toolkit like this genuinely useful?

You can explore the demo without installing anything.

Live Demo: https://faysalishere.github.io/creativecode-engine/

GitHub Repository: https://github.com/faysalishere/creativecode-engine

Feedback and Issues: https://github.com/faysalishere/creativecode-engine/issues/1

Thanks for taking a look. Constructive criticism, bug reports, and contributions are welcome.

DEV Community: faysalishere

I Built an Open-Source Toolkit to Fix Repetitive AI-Generated UI Designs