Case study 03
StyleGraft
Turns website inspiration into an original design system made for your product, as an agent skill for ChatGPT and Codex.
Problem
Builders find a site they love and ask an AI to "make it look like this". The result either copies someone else's brand or collapses into generic SaaS defaults. Neither serves the product being built.
Product direction
Translate principles, not protected expression. For each thing the reference does well, decide whether to preserve, adapt or exclude it for the new product, then write the decision down as a DESIGN.md that a coding agent can follow.
My role
Creator: skill design, DESIGN.md schema, installer CLI, evals and website.
Engineering approach
- A skills-only plugin: no API key, account or hosted backend.
npx @blindspotlab/stylegraft installplaces the skill for Codex at user or project level, anddoctorverifies it. - The workflow reads the full reference page (hierarchy, rhythm, colour roles, type character, imagery), then reads the product or repository before translating.
- Output follows a fixed 17-section schema: product context, translation table, colour and type systems, composition grammar, responsive behaviour, accessibility, explicit anti-slop rules and uncertain decisions.
- Positive and negative activation prompts (evals/prompts.md) keep the skill from firing on literal cloning requests.
Stack and constraints
- Skill
- SKILL.md workflowDESIGN.md schemaEvals
- Distribution
- npm installer CLICodex plugin manifestChatGPT skill import
- Runtime
- Node.jsNo backend
- Must never reproduce source logos, copy, illustrations, mascots or distinctive compositions.
- Must work in two hosts (ChatGPT and Codex) with different install paths.
- Output has to be specific enough that an agent doesn't fall back to defaults.
Design decisions
Preserve / adapt / exclude
A three-way decision per principle makes the translation auditable and keeps originality a deliberate act rather than an accident.
Composition beats tokens
The schema demands page-level composition rules, which are where generic AI design usually fails, not just colours and fonts.
Used on this site
This portfolio's DESIGN.md follows the StyleGraft schema, applied to Mojeeb's own references.
System
Outcome and status
- v0.1.1 published on npm (2026-08-10); live download figures in the tools section.
- Public website, privacy notice and terms at stylegraft.peerfix.dev.