Get Claude to Say Goodbye to Purple-Gradient Websites in Just 15 Minutes

Purple gradients, the Inter font, rounded cards stacked on rounded cards. Anyone building AI products knows this recipe well. AI-generated websites keep coming back to the same few elements; after a while it gets tiresome, and the bigger problem is that they all look the same.

The problem may not be the model; it may be the input. If you just toss Claude a single line—"build a landing page"—it can only produce an average design. If you don’t give it context like brand PDFs, logos, and reference sites, it has no choice but to guess.

kiosa (@thegreatest_sv) posted a setup on X specifically to fix this. He said he doesn’t understand why designers haven’t jumped on it yet. At its core is Graphify: a Claude Code skill that turns any folder into a knowledge graph (Claude Code is Anthropic’s command-line coding tool), with over 136k stars on GitHub. Paired with 6 open-source libraries, it takes 15 minutes to install. According to him, it works for designers, founders, and indie developers alike.

Video attached to the original tweet.

Here’s the full setup.

1. Install Graphify to turn brand materials into a graph

uv tool install graphifyy
graphify install

Create a DESIGN folder, put in brand PDFs, logos, screenshots, and sites you like, then run this in Claude Code:

/graphify .

The entire folder becomes a knowledge graph and produces three files:

• graph.html: clickable and browsable in a browser
• GRAPH_REPORT.md: key concepts and relationships
• graph.json: the complete, queryable graph

The code portion is parsed locally with tree-sitter, without calling an LLM, so it doesn’t leave your machine. Documents, PDFs, and images go through semantic extraction using the model in your IDE session.

2. Install UI UX Pro Max so you stop guessing at colors and fonts

claude plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
claude plugin install ui-ux-pro-max@ui-ux-pro-max-skill

It includes 192 color palettes, 74 font pairings, and 192 industry-specific reasoning rules, covering 22 tech stacks. In the author’s own words: after installing it, bank websites finally stop looking like crypto casinos.

3. Install Impeccable so AI-flavored design gets caught instantly

npx impeccable install

Run /impeccable init in Claude Code. With 62 deterministic detection rules, AI-smelling design gets caught as soon as it’s written. There are also 24 commands, such as /impeccable audit, /impeccable polish, and /impeccable critique.

4. Connect Figma MCP to reproduce a specified layout

claude mcp add figma -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

Paste in a Figma link, and Claude builds the same layout. MCP is Anthropic’s open protocol that lets Claude connect to external tools.

5. Add react-bits to bring the page to life

npx shadcn@latest add @react-bits/SplitText-TS-TW

215+ free animation components.

6. Connect Playwright MCP for self-checking

claude mcp add playwright npx @playwright/mcp@latest

Claude opens the page in a real browser and checks its own output.

7. Scheduled audits

/schedule "every Friday, run /impeccable audit and send me a fix list"

Every Friday it automatically runs an audit and sends you a fix list.

The idea behind this setup isn’t templates; it’s context. Brand materials become a graph, design rules become detectors, the browser becomes a test room, and Friday becomes a recurring review. It’s the same model, but the input and constraints have changed, so the output is naturally different.

One commenter asked in the replies: Does Graphify really change design choices, or does it just prevent template reuse? Another replied: Turning the entire folder into a graph is the key to getting Claude to stop defaulting to purple gradients.

Some commenters threw cold water on it: GitHub stars don’t prove maintainability and reliability in production. Someone else warned that when Playwright connects to sites like social media, it may trigger risk controls, so be careful. Another designer commenter guessed: designers like simple things. Maybe that’s the real reason.

Tool links:

• Graphify: https://github.com/Graphify-Labs/graphify
• UI UX Pro Max: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
• Impeccable: https://github.com/pbakaus/impeccable
• Figma Context MCP: https://github.com/GLips/Figma-Context-MCP
• React Bits: https://github.com/DavidHDev/react-bits
• Playwright MCP: https://github.com/microsoft/playwright-mcp

Original tweet: https://x.com/thegreatest_sv/status/2115099451459018839