{"_id":"@blindspotlab/stylegraft","_rev":"2-abaf77b1a2bba2e29a8f3577e561044c","name":"@blindspotlab/stylegraft","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@blindspotlab/stylegraft","version":"0.1.0","keywords":["codex","chatgpt","design-system","agent-skill","frontend","vibe-coding"],"author":{"name":"Mojeeb Titilayo","email":"https://mojeeb.xyz/"},"license":"MIT","_id":"@blindspotlab/stylegraft@0.1.0","maintainers":[{"name":"mojeebdev","email":"mojeeb.eth@gmail.com"}],"homepage":"https://stylegraft.peerfix.dev/","bugs":{"url":"https://github.com/mojeebdev/StyleGraft/issues"},"bin":{"stylegraft":"bin/stylegraft.js"},"dist":{"shasum":"063f4ae22c4c7d819f79fc222bd47863dea450cb","tarball":"https://registry.npmjs.org/@blindspotlab/stylegraft/-/stylegraft-0.1.0.tgz","fileCount":10,"integrity":"sha512-c7hpaTVN4XDQeIJngSU1tLiObNYnOTiuIUAHdsw7DPNrmFga7QoJayM3Q+eUBDtkMyvQr1Anr9sJeZxwthMddQ==","signatures":[{"sig":"MEYCIQC1PrZXbkPI8ZofyaWD3r7I2oTjJ3D4XCJbnhr8vwOS6AIhAOcVY+bYy+mDbRk5GeeSd9Iax8wGDQmSRuik5yUhHTAD","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blindspotlab%2fstylegraft@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":36375},"type":"module","engines":{"node":">=18"},"gitHead":"8df9a5d0fe85ee8ba12ec5c062e6c3ffc25145af","scripts":{"test":"node --test","pack:check":"npm pack --dry-run"},"_npmUser":{"name":"mojeebdev","email":"mojeeb.eth@gmail.com"},"repository":{"url":"git+https://github.com/mojeebdev/StyleGraft.git","type":"git"},"_npmVersion":"11.16.0","description":"Turn website references into original, product-specific design systems for ChatGPT and Codex.","directories":{},"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/stylegraft_0.1.0_1786369647955_0.511932271030838","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@blindspotlab/stylegraft","version":"0.1.1","description":"Turn website references into original, product-specific design systems for ChatGPT and Codex.","type":"module","bin":{"stylegraft":"bin/stylegraft.js"},"scripts":{"test":"node --test","pack:check":"npm pack --dry-run"},"repository":{"type":"git","url":"git+https://github.com/mojeebdev/StyleGraft.git"},"homepage":"https://stylegraft.peerfix.dev/","bugs":{"url":"https://github.com/mojeebdev/StyleGraft/issues"},"keywords":["codex","chatgpt","design-system","agent-skill","frontend","vibe-coding"],"author":{"name":"Mojeeb Titilayo","email":"https://mojeeb.xyz/"},"license":"MIT","publishConfig":{"access":"public"},"engines":{"node":">=18"},"gitHead":"b669c00eb801f31935bc4d8cdcfdcf30f63888b3","_id":"@blindspotlab/stylegraft@0.1.1","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-jeFaV981y07rvQJbIakGPVL0efPB/t9wWjQLtAQu5QwfMToVOd7oonFbW/Sj5WwXjbx0ztziDP38wN792dvFTw==","shasum":"def8ee7fab8592151550fe75bfa2f977d68fcdb5","tarball":"https://registry.npmjs.org/@blindspotlab/stylegraft/-/stylegraft-0.1.1.tgz","fileCount":10,"unpackedSize":38604,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@blindspotlab%2fstylegraft@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCl6EyCNzXScbrl8by8LTuXpjLkcokASWvo/eVJtdJhbAIhAIPu+cONF9bRX//7yuLyEHP0MxpsHAkGqvyuJBURbaJg"}]},"_npmUser":{"name":"mojeebdev","email":"mojeeb.eth@gmail.com"},"directories":{},"maintainers":[{"name":"mojeebdev","email":"mojeeb.eth@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/stylegraft_0.1.1_1786370446051_0.5681182263387399"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-10T13:47:27.781Z","modified":"2026-08-10T14:00:46.513Z","0.1.0":"2026-08-10T13:47:28.099Z","0.1.1":"2026-08-10T14:00:46.181Z"},"bugs":{"url":"https://github.com/mojeebdev/StyleGraft/issues"},"author":{"name":"Mojeeb Titilayo","email":"https://mojeeb.xyz/"},"license":"MIT","homepage":"https://stylegraft.peerfix.dev/","keywords":["codex","chatgpt","design-system","agent-skill","frontend","vibe-coding"],"repository":{"type":"git","url":"git+https://github.com/mojeebdev/StyleGraft.git"},"description":"Turn website references into original, product-specific design systems for ChatGPT and Codex.","maintainers":[{"name":"mojeebdev","email":"mojeeb.eth@gmail.com"}],"readme":"# StyleGraft\n\n**Turn website inspiration into a design system made for your product.**\n\nStyleGraft is an open-source, skills-only plugin for ChatGPT and Codex. Upload a full-page website screenshot, describe what you are building—or let Codex inspect the repository—and receive an original, product-specific `DESIGN.md`.\n\nWebsite: [stylegraft.peerfix.dev](https://stylegraft.peerfix.dev/)\n\n[npm package](https://www.npmjs.com/package/@blindspotlab/stylegraft) · [GitHub repository](https://github.com/mojeebdev/StyleGraft) · [MIT Licence](./LICENSE)\n\nIt translates composition, hierarchy, rhythm, colour logic, typography character, imagery and intentional imperfections. It does not copy source branding, content or proprietary assets.\n\n## Repository structure\n\n```text\n.codex-plugin/plugin.json   Plugin manifest\nskills/stylegraft/          ChatGPT and Codex workflow\nevals/prompts.md            Positive and negative activation tests\nindex.html                  Product website\nprivacy.html                Privacy notice\nterms.html                  Terms\n```\n\n## Configure StyleGraft\n\nStyleGraft is skills-only. It does not require an API key, external account or hosted backend.\n\n### npm / Codex\n\nInstall StyleGraft for your user account:\n\n```bash\nnpx @blindspotlab/stylegraft install\n```\n\nOr add it only to the current repository so the team can share it:\n\n```bash\nnpx @blindspotlab/stylegraft install --project\n```\n\nVerify it with `npx @blindspotlab/stylegraft doctor` (add `--project` for a repository install), then open Codex in the product repository and invoke `$stylegraft`.\n\n### ChatGPT\n\nThe npm installer configures Codex; it cannot install a skill into the hosted ChatGPT interface. To use StyleGraft in ChatGPT:\n\n1. Download or clone this repository.\n2. Open **Plugins → Skills** in ChatGPT Work and import the `skills/stylegraft` folder if custom skill installation is enabled for your workspace.\n3. Start a new chat, attach a full-page website screenshot and invoke `@stylegraft`:\n\n> @stylegraft Turn this reference into an original design system for Arcapush, a discovery platform for serious solo builders.\n\n### Codex\n\n1. In your terminal, run `npx @blindspotlab/stylegraft install` for your user account, or add `--project` to keep the skill inside the current repository.\n2. Open the product repository in Codex so it can inspect the real product context.\n3. Attach the full-page reference and invoke `$stylegraft`:\n\n> $stylegraft Inspect this repository, use the attached full-page reference, and create DESIGN.md before implementation.\n\nChatGPT uses `@` mentions and Codex uses `$` mentions for explicitly selecting a skill. ChatGPT installation and sharing controls depend on workspace settings. StyleGraft will move to one-click ChatGPT installation after directory approval.\n\n## The origin\n\nIn early August 2026, I stepped away from X for the weekend and returned to learning about design systems. I had last studied them seriously around April or May, but this time something clicked: a design system is not merely colours, type sizes and reusable components. It is the reasoning beneath an interface—its rhythm, hierarchy, composition, imagery, constraints and character.\n\nThe next day, I encountered Claude's design workflow and saw the gap clearly. Claude users had a way to carry visual intent into a build, but I could not find an equivalent made for ChatGPT and Codex: something that could accept a complete website reference, understand the product being built, and give an AI coding agent an original system it could follow without producing generic AI design.\n\nThat was the blind spot. I built StyleGraft to fill it.\n\nThe first product I tested it on was StyleGraft itself. The aim was never to copy another website or sample a handful of tokens. It was to understand why a reference worked, translate those principles through the context of a different product, and preserve taste when the coding agent took over.\n\n## About the founder\n\n[Mojeeb Titilayo](https://mojeeb.xyz/) is a Product Engineer and Strategist, and the founder of [BlindspotLab](https://blindspotlab.xyz/), an independent product studio focused on finding overlooked problems and turning them into useful, thoughtfully built products. He created StyleGraft after recognising that ChatGPT and Codex builders needed a practical bridge between visual inspiration and implementation-ready design direction.\n\nStyleGraft is a BlindspotLab product, founded and created by Mojeeb Titilayo.\n\n## How to use it\n\nYou can also describe the task naturally after installation:\n\n> Turn this into a design system for my build.\n\nIf the build is not already known, StyleGraft asks what you are building, what it is called and who it serves. In Codex, it inspects the repository before asking questions.\n\n## Open Graph\n\nThe website includes a 1200×630 social preview at `assets/brand/stylegraft-social.png`, configured for Open Graph and X/Twitter cards in `index.html`. Update the absolute image URL and canonical URL if the production domain changes. Social networks cache previews, so use their sharing debugger or a versioned image URL after replacing the artwork.\n\n## Publishing to npm\n\nThe `Publish to npm` GitHub Actions workflow tests the package, inspects the tarball, rejects duplicate versions and publishes with npm provenance.\n\nFor the first release:\n\n1. Create an npm granular access token allowed to publish `@blindspotlab/stylegraft`.\n2. Add it to the GitHub repository as an Actions secret named `NPM_TOKEN`.\n3. Open **Actions → Publish to npm → Run workflow** and choose the `latest` tag.\n\nFor later releases, bump the version in `package.json` before running the workflow. After the first package exists on npm, configure npm Trusted Publishing for this repository and `.github/workflows/publish-npm.yml`, then remove the `NPM_TOKEN` secret.\n\n## Principles\n\n- Adapt visual principles to product context.\n- Preserve intent, not protected expression.\n- Capture composition, not only design tokens.\n- Mark observation, inference and uncertainty.\n- Give coding agents explicit anti-slop constraints.\n\n## Status\n\nAvailable publicly on [npm](https://www.npmjs.com/package/@blindspotlab/stylegraft). The skill and output schema are being evaluated across diverse website references before ChatGPT directory submission.\n\n## Credits\n\nA [BlindspotLab](https://blindspotlab.xyz/) product founded and created by [Mojeeb Titilayo](https://mojeeb.xyz/).\n\n## License\n\nMIT\n","readmeFilename":"README.md"}