StyleKit

网站介绍

StyleKit 由独立开发者 AnxForever 维护，2026 年 2 月建仓，仓库 AnxForever/stylekit 采用 MIT 协议、TypeScript 编写，截至 2026 年 11 月已有 777 Star、41 Fork，最后一次提交在 11 月 6 日；站点当前版本 v0.18.1，备案号陕ICP备2025065501号-3。它瞄准一个很具体的毛病：让 AI 写落地页，代码能跑，出来的界面却和别人的一模一样——「做得好看点」本来就不算规格。

于是它把视觉方向拆成 149 种有名字的风格，每种都配齐可复制的硬性提示词、设计 tokens、组件配方、必须做与禁止做清单，以及整页 Showcase。站点用 Next.js + Tailwind 构建，中英文双路由（/zh、/en），页脚注明自身基于 Editorial 风格排版。

主要功能

一套风格是三层规格，不是一张情绪板

以「新野兽派 / Neo-Brutalist v1.0.0」为例：页面把内容分成硬性提示词、Design Spec、Creative Brief 三个标签，默认推荐复制第一层直接让 AI 生成前端。硬性提示词里写死 border-black border-2 md:border-4、rounded-none、font-black 标题配 font-mono 正文，硬边缘阴影格式 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] md:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]；禁止项甚至给成正则 ^rounded-(?!none)、^bg-gradient-，并要求按钮 active 位移量等于阴影像素值才算「完全压平」。色板列出 #000000、#ff006e、#ccff00、#00d9ff、#ff9500 可直接复制，另有按钮、卡片、输入框、导航、Hero 五类组件预览与代码、整页 Showcase 实时预览及离线 ZIP。

每套风格还带质检信息：真实前端完成度按暗色模式、组件状态、动效规则、可访问性、性能代价分别打分（新野兽派总体 79%），无障碍板块按 WCAG 2.1 给出对比度表（如 #ffffff / #ff006e 为 3.83:1）与可读性分数，并列出生成后逐条确认的自检清单。

目录、动效与模板

149 种风格分十大类：现代与科技、粗野主义、品牌启发（Apple、Stripe、Notion、GitHub）、复古与怀旧、艺术、日式与动漫、赛博朋克与科幻、布局模式、文化与地域、自然与温馨；带 high-contrast、dark-theme、glassmorphic、brand-inspired 等标签。首页按场景给出实时数量：创意表达 107、品牌营销 77、作品集 39、SaaS / B2B 32、博客内容 23、Dashboard 12，另有 Trending 榜与 Ctrl K 搜索。站点标注 60+ 动效、42+ 模板，仓库 README 记为 37 个页面模板。模板页既有 AnxForever 个人站、AstroPaper、Fuwari、AstroWind、NextDevTpl 这类带 GitHub 源码的完整开源项目，也有野兽派落地页、玻璃拟态落地页、图表仪表盘、邮件收件箱等可下载的单页示例。

接进编码工作流

导出比复制提示词更省事：npx shadcn add https://www.stylekit.top/r/glassmorphism.json 一行把风格的明暗 cssVars 注入现有 shadcn 项目（兼容 Tailwind v4）；风格包可下载 7 个文件——Metadata、Design Tokens、Tailwind Preset、Global CSS、shadcn Theme、CSS Variables、SKILL.md，另有 Figma 令牌与 Cursor / Claude Code / Windsurf 的 IDE 规则。面向机器读取的部分做了 /llms.txt、/llms.md、/llms-full.txt 与 HTTP API。开发者页提供三种接入方式：MCP server（stylekit-mcp@latest，9 个只读工具，v0.4.1）、CLI（stylekit-cli@latest add synthwave，v0.3.1）、Agent Skill（npx skills@latest add AnxForever/stylekit-skill，v0.8.0），共用 Core v1.0.0-beta.7。想自建则 git clone 后 pnpm install && pnpm dev，本地起在 localhost:3000。

适用人群

• 用 Cursor、Claude Code、v0 做前端的人：先定风格再写需求，多轮生成不漂移
• 独立开发者与小团队：没有设计师时，拿现成 token 与组件配方把落地页、后台做出统一气质
• 设计系统维护者：把风格规范导出成 AI Rules 或 Figma 令牌，团队协作有一份共同约束
• 学习者：对照 do/don’t、对比度评分和自检清单理解一套视觉语言为什么成立

价格 / 授权

站点与仓库都免费，MIT 协议，浏览、复制、下载不需要注册账号。作者一人维护服务器、域名与日常更新，联系页放了自愿赞助入口（微信、支付宝），说明款项优先用于基础设施，并写明「核心公开内容保持开放」；商业合作与定制风格走邮件。页脚另有少量广告位与 QQ 交流群 347664048。仓库接受 PR，新增风格须先读 STYLE_ADDITION_CHECKLIST.md 与 STYLE_AUTHORING.md。