# StyleKit

> StyleKit is an open-source visual style library for AI-generated web interfaces. Its catalog currently contains 149 curated visual and layout styles. Every catalog style includes machine-readable design tokens, component recipes, AI rules, and React + Tailwind examples.

StyleKit helps developers give ChatGPT, Claude, Claude Code, Codex, and other coding tools concrete visual constraints instead of relying on a vague style name. The public site supports English and Chinese style discovery; some editorial content is English-only and is identified as such by its canonical URL.

## Start Here

- [English style catalog](https://www.stylekit.top/en/styles): Browse all 149 UI and web design styles.
- [中文前端风格库](https://www.stylekit.top/zh/styles): 浏览网页设计风格、UI 风格与实现约束。
- [UI design prompt library](https://www.stylekit.top/en/ui-prompts): Copy prompt structures for websites, dashboards, landing pages, dark mode, and Tailwind UI.
- [中文 UI 与前端提示词](https://www.stylekit.top/zh/ui-prompts): 面向 ChatGPT、Claude、Claude Code 与 Codex 的提示词入口。
- [Page templates](https://www.stylekit.top/en/templates): Browse complete page structures without replacing the curated style previews.
- [Theme collections](https://www.stylekit.top/en/collections): Find styles by dark mode, retro, game UI, anime, hand-drawn, and other themes.
- [Color catalog](https://www.stylekit.top/en/colors): Browse and copy palettes from the style catalog.
- [Community styles and discussions](https://www.stylekit.top/en/community): Read public style discussions, explore reviewed contributions, and find the submission workflow.
- [中文风格社区](https://www.stylekit.top/zh/community): 参与风格讨论、浏览审核通过的社区作品，或提交原创风格。

## Prompt Collections

- [Landing page prompts](https://www.stylekit.top/en/landing-page-prompts)
- [8 dashboard UI prompts with review checklist](https://www.stylekit.top/en/dashboard-prompts)
- [Tailwind CSS and shadcn/ui prompts](https://www.stylekit.top/en/tailwind-ui-prompts)
- [Dark mode UI prompts](https://www.stylekit.top/en/dark-mode-ui-prompts)
- [中文落地页提示词](https://www.stylekit.top/zh/landing-page-prompts)
- [中文仪表盘 UI 提示词与验收清单](https://www.stylekit.top/zh/dashboard-prompts)
- [中文 Tailwind UI 提示词](https://www.stylekit.top/zh/tailwind-ui-prompts)
- [中文暗色模式 UI 提示词](https://www.stylekit.top/zh/dark-mode-ui-prompts)

## Machine-Readable Style Data

Each style has a canonical web page and a read-only Markdown representation:

- Web page pattern: `https://www.stylekit.top/en/styles/{slug}`
- Chinese page pattern: `https://www.stylekit.top/zh/styles/{slug}`
- Markdown pattern: `https://www.stylekit.top/api/styles/{slug}/md`
- shadcn registry pattern: `https://www.stylekit.top/r/{slug}.json`

Example resources:

- [Neo-Brutalist style](https://www.stylekit.top/en/styles/neo-brutalist)
- [Neo-Brutalist Markdown](https://www.stylekit.top/api/styles/neo-brutalist/md)
- [Glassmorphism style](https://www.stylekit.top/en/styles/glassmorphism)
- [Corporate Clean style](https://www.stylekit.top/en/styles/corporate-clean)
- [Corporate SaaS prompt](https://www.stylekit.top/en/prompts/corporate-saas)

Install a registry theme in a compatible shadcn project:

```bash
npx shadcn add https://www.stylekit.top/r/neo-brutalist.json
```

Install the StyleKit knowledge skill in a compatible coding-agent environment:

```bash
npx skills@latest add AnxForever/stylekit-skill
```

The repository also contains published public-beta [CLI](https://www.npmjs.com/package/stylekit-cli) and [MCP](https://www.npmjs.com/package/stylekit-mcp) packages. Check each package listing for its current release rather than assuming the repository and npm versions are identical.

## Updating StyleKit tools

Use `npx -y --prefer-online stylekit-cli@latest ...` to run the current CLI.
For an MCP client, add this once to its MCP server configuration:

```json
{
  "mcpServers": {
    "stylekit": {
      "command": "npx",
      "args": ["-y", "--prefer-online", "stylekit-mcp@latest"]
    }
  }
}
```

The CLI checks npm when invoked. An MCP client checks npm when it starts the configured process; restart a running server or client to load a release. Public online asset content is fetched on demand and does not require reinstalling these packages. Replace `@latest` with an exact published version for reproducible runs.

Install or update a direct Core dependency with `npm install stylekit-core@beta` or `pnpm add stylekit-core@beta`. Moving this npm dist-tag does not update versions already recorded in a project's manifest or lockfile. Use an exact version for reproducible builds.

A compatible coding agent checks GitHub when it runs the StyleKit Skill instructions, at most once every 24 hours. This is not a background service. Existing Skill installations need one migration update: `npx skills@latest update stylekit`. Back up local Skill edits before migrating; afterward, the updater verifies files before changing them, skips updates when it detects local edits, and restores the previous file if a file update fails.

## Public Asset API

- Browse and search: `GET https://www.stylekit.top/api/assets?kind=animation&q=fade&limit=20&offset=0`
- Retrieve one asset: `GET https://www.stylekit.top/api/assets/{kind}/{id}`
- Complete style contract: `GET https://www.stylekit.top/api/styles/{slug}/brief`
- Standalone template ZIP: `GET https://www.stylekit.top/api/templates/{slug}/download`

The asset catalog covers curated styles, animation snippets, backgrounds, gradients, shadows, font pairings, component patterns, templates and design references. Follow `hasMore` and increment `offset` to discover the whole catalog. Asset details include data, reusable code or project files, dependencies, and source/license information where applicable. Preserve third-party attribution and check each item's availability before using it. External templates are references; restricted experience packs require their separate license. Private user kits and knowledge records awaiting publication are excluded.

The MCP server exposes `stylekit_list_assets` and `stylekit_get_asset`. The CLI provides `stylekit assets` and `stylekit asset <kind> <id>`. The Agent Skill can save the same asset JSON for reuse in a target project. Bundled fallback covers static assets; complete template source requires the website. Style lint checks do not prove that arbitrary asset integration is accessible or works in a browser.

## Product Boundaries

- StyleKit provides design constraints, prompts, examples, and registry assets; it does not guarantee that every AI-generated interface is production-ready.
- The existing catalog previews are curated visual references. General-purpose preview infrastructure is intended for future styles and does not replace those previews.
- `llms.txt` is an emerging community convention, not a confirmed ranking signal for Google, ChatGPT, Claude, Gemini, or Perplexity.
- Community comments are user feedback, not official documentation. Approved community styles are public; only promoted community style pages are included in the sitemap and promoted Markdown reference sections.

## Additional References

- [Concise Markdown index](https://www.stylekit.top/llms.md)
- [Generated catalog reference](https://www.stylekit.top/llms-full.txt)
- [GitHub repository](https://github.com/AnxForever/stylekit)
- [Issue tracker](https://github.com/AnxForever/stylekit/issues)
- [XML sitemap](https://www.stylekit.top/sitemap.xml)
- [Robots policy](https://www.stylekit.top/robots.txt)