让 Claude 告别紫色渐变网站，只需 15 分钟

紫色渐变、Inter 字体、圆角卡片叠圆角卡片。做 AI 产品的人，对这套配方不会陌生。AI 生成的网站来来去去就这几样，看多了会腻，更麻烦的是它们长得都一样。

问题可能不在模型，在输入。只丢给 Claude 一句“建一个落地页”，它只能给一个平均水平的设计。品牌 PDF、logo、参考站点这些上下文不给它，它就只能靠猜。

kiosa（@thegreatest_sv）在 X 上发了一套配置，专门治这个。他说他不理解，为什么设计师还没跑起来。核心是 Graphify：一个把任意文件夹变成知识图谱的 Claude Code 技能（Claude Code 是 Anthropic 的命令行编程工具），GitHub 上已超过 136k 星。搭配 6 个开源库，15 分钟装完。按他的说法，设计师、创始人、独立开发者，谁来都行。

原推文附带的视频。

完整配置如下。

1. 装 Graphify，把品牌资料变成图谱

uv tool install graphifyy
graphify install

建一个 DESIGN 文件夹，放入品牌 PDF、logo、截图、你喜欢的站点，在 Claude Code 里运行：

/graphify .

整个文件夹变成一张知识图谱，产出三个文件：

graph.html：浏览器里可点击浏览
GRAPH_REPORT.md：关键概念和关联
graph.json：可查询的完整图谱

代码部分用 tree-sitter 本地解析，不调 LLM，不出机器。文档、PDF、图片走语义提取，用的是你 IDE 会话里的模型。

Graphify 官方示例：FastAPI 代码库被映射成知识图谱

2. 装 UI UX Pro Max，配色字体不再瞎猜

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

内置 192 套配色、74 组字体搭配、192 条分行业推理规则，覆盖 22 个技术栈。作者的原话：装上之后，银行网站终于不像加密货币赌场了。

3. 装 Impeccable，AI 味设计秒被识别

npx impeccable install

在 Claude Code 里运行 /impeccable init。62 条确定性检测规则，AI 味的设计一写出来就会被抓。另有 24 个命令，比如 /impeccable audit、/impeccable polish、/impeccable critique。

4. 接 Figma MCP，还原指定布局

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

粘贴一个 Figma 链接，Claude 照着出同样的布局。MCP 是 Anthropic 的开放协议，用来让 Claude 连接外部工具。

5. 加 react-bits，让页面动起来

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

215+ 免费动画组件。

6. 接 Playwright MCP，自查

claude mcp add playwright npx @playwright/mcp@latest

Claude 在真实浏览器里打开页面，检查自己的产出。

7. 定时审计

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

每周五自动跑一遍审计，把修复清单发给你。

这套配置的思路不在模板，而在上下文。品牌资料变成图谱，设计规则变成检测器，浏览器变成考场，周五定时复查。模型还是那个模型，输入和约束变了，输出自然不一样。

有网友在回复里问：Graphify 是真的改变了设计选择，还是只是阻止了模板复用？另一个网友答：把整个文件夹变成图谱，才是让 Claude 不再默认紫色渐变的关键。

也有网友泼冷水：GitHub 星星说明不了生产环境下的可维护性和可靠性。另有人提醒，Playwright 连到社交媒体等站点时可能触发风控，要注意。还有位设计师网友的猜测：设计师喜欢简单的东西。也许这才是原因。

工具链接：

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

原推文：https://x.com/thegreatest_sv/status/2115099451459018839