Does StyleGraft require an API key?

No. StyleGraft is a skills-only workflow and does not require a separate API key, hosted backend or StyleGraft account.

For ChatGPT + CodexOpen source · Skills-only

Reference in.
Your system out.

Q: Does StyleGraft copy the referenced website?

No. StyleGraft translates transferable principles such as hierarchy, rhythm, composition and image treatment while excluding protected brand expression, copy and proprietary assets.

Drop a full website screenshot. StyleGraft understands what you are building, then translates the reference into an original DESIGN.md made for your product.

View the open source project See how it works

npmv0.1.1 GitHub stars— Downloads since launch—

01 Reference in

# Your build

intent: unmistakably yours

composition: editorial rhythm

colour: semantic, not sampled

mobile: designed, not stacked

anti_slop: enforced

02 Your system out

01 / Reference

Full-page screenshot

02 / Adaptation

# Your product
intent: specific
layout: translated
voice: context-aware
tokens: actionable
anti_slop: enforced

Product-specific system

[ THE DIFFERENCE ]

Not “copy this website.”
Understand why it works.

Most extractors stop at hex codes, font sizes and border radii. StyleGraft reads the composition underneath: rhythm, density, image treatment, hierarchy, tension and the deliberate imperfections that give a design its character.

Then it filters those decisions through your product, audience and codebase—keeping the useful principles while leaving the original brand, content and identity behind.

[ THE ORIGIN ]

Built from a blind spot
in my own process.

In early August 2026, I stepped away from X for the weekend and went back to learning about design systems.

I had last studied them seriously around April or May, but this time something clicked. I began to understand that a strong design system is not just a collection of colours, type sizes and reusable components. It is the reasoning underneath the interface: its rhythm, hierarchy, composition, imagery, constraints and the choices that give it character.

The next day, I came across Claude’s approach to design and it changed the way I thought about building with AI. Claude had a design workflow people could use, but I could not find an equivalent built specifically for ChatGPT and Codex—one where you could bring a full website reference, explain what you were building, and receive an original design system your coding agent could actually follow.

That was the blind spot.So I built StyleGraft.

The first product I tested it on was StyleGraft itself. I used what I had learned during that weekend to rethink the website you are looking at now. The goal was not to copy another website or extract a few design tokens. It was to understand why a reference worked, translate those principles through the context of my own product, and produce something that still felt original.

I created it because vibe coders and AI builders deserve better than generic interfaces, random gradients and the same repeated AI design patterns. StyleGraft turns that process into a reusable workflow for everyone.

Good taste should not disappear when the coding agent takes over.

[ ABOUT THE FOUNDER ]

Mojeeb Titilayo

Mojeeb is a Product Engineer and Strategist building products at the intersection of AI, design and developer tools.

He is the founder of BlindspotLab, an independent product studio focused on finding overlooked problems and turning them into useful, thoughtfully built products. Across AI, SaaS, developer tools and Web3, he has built and shipped more than 40 products, platforms and experiments.

StyleGraft reflects how he approaches product development: understand the real problem, question the obvious solution, and build something people can use—not another experiment that ends at the demo.

More about Mojeeb ↗

Open sourceMIT Licence ↗A BlindspotLab Product ↗Founded by Mojeeb Titilayo ↗

[ HOW IT WORKS ]

Four moves from
admiration to direction.

01 / LOOK

Show the reference

Upload one clear, full-page website screenshot in ChatGPT or Codex. The whole page matters: hierarchy, rhythm, image treatment and the way sections change energy.

Good work
has a pulse.

Make the idea visible.

arcapush / main•••

app
components
page.tsx
README.md
DESIGN.md new

Reading product context

02 / GROUND

Ground the build

Tell StyleGraft the product name, audience and purpose—or let Codex inspect the repository. The reference is filtered through what your product actually needs.

03 / TRANSLATE

Translate the taste

Keep the principles that fit. Adapt the ones that need more trust or usability. Exclude the source brand’s protected expression.

Choose a translation lens →

PRODUCT DIRECTION

Confident rhythm.
Human edges.

Preserve: rhythmAdapt: trustExclude: brand assets

# Arcapush

## Composition grammar
- editorial discovery grid
- high-signal product density
- intentional asymmetric rhythm

## Never
- generic feature-card rows
- arbitrary gradients
- empty oversized hero

ArcapushDiscover Ship

CURATED THIS WEEK

Products with
something to prove.

04 / BUILD

Build with intent

Receive an actionable DESIGN.md your agent can use immediately. Switch the example to see how written direction becomes a distinct interface.

[ CONFIGURE + USE ]

Give it a reference.
Name the build.

StyleGraft is a reusable skill, so there is no API key or external account to configure. Install the repository skill once, attach a full-page screenshot, and invoke it whenever a build needs stronger visual direction.

Open source · Available on npmChatGPT directory submission next

01ChatGPT@ mention

Download or clone the GitHub repository.
In Skills, import the skills/stylegraft folder if custom skills are enabled for your workspace.
Attach a full-page reference and mention @stylegraft.

TRY THIS

@stylegraft Turn this reference into an original design system for Arcapush, a discovery platform for serious solo builders.

02Codex$ mention

Run npx @blindspotlab/stylegraft install for your user account.
Open the product codebase so Codex can inspect its real context.
Attach the reference and invoke $stylegraft.

TRY THIS

$stylegraft Inspect this repository, use the attached full-page reference, and create DESIGN.md before implementation.

[ QUESTIONS, ANSWERED ]

Before you
graft.

What is StyleGraft?

StyleGraft is an open-source skill that turns a full-page website reference into an original, product-specific DESIGN.md for ChatGPT and Codex.

Does it copy the referenced website?

No. It translates transferable principles such as hierarchy, rhythm, composition and image treatment while excluding protected brand expression, copy and proprietary assets.

Does it require an API key?

No. StyleGraft is a skills-only workflow. It does not require a separate API key, hosted backend or StyleGraft account.

Who created StyleGraft?

StyleGraft was created by Product Engineer and Strategist Mojeeb Titilayo as a BlindspotLab product. It is open source under the MIT Licence.

[ THE OUTPUT ]