开发者工具

CLI、MCP 与 API

StyleKit 提供三类集成方式：本地 CLI、MCP Server 和 HTTP API。当前产品流程聚焦两条路径：网站复刻与前端生成。

路径 A

参考 URL → 提取 → 生成

使用 /api/style-extract 从真实网站解析风格证据，在 Create Style 导入/应用后，在 /generate 生成代码。

/api/style-extract/create-style/generate

路径 B

预设风格 → 模板 → 生成

从 /styles 选择内置风格，在 /generate 选择模板和输出格式，编辑内容后下载 ZIP。

/styles/generate

HTTP API

Full REST API reference with 36+ endpoints, examples, and interactive testing

快速开始

使用 CLI 命令在本地流程中查看风格、校验代码并生成推荐。

# Show all commands
npx stylekit help

# List available styles
npx stylekit styles

# Show lint rules for one style
npx stylekit rules neo-brutalist

Lint 命令

针对目标风格检查现有代码，并获得可执行的替换建议。

# Lint a button file against Neo-Brutalist rules
npx stylekit lint ./src/Button.tsx --style neo-brutalist

# Lint a card file against Glassmorphism rules
npx stylekit lint ./components/Card.tsx --style glassmorphism

输出示例：

Linting: ./src/Button.tsx
Style: neo-brutalist

[FAIL] 2 forbidden classes found
[WARN] 4 required classes missing

Issues:
  [x] "rounded-lg" - Neo-Brutalist uses sharp corners only
  [x] "shadow-md" - Use hard offset shadows

Suggested Fixes:
  - Replace "rounded-lg" with "rounded-none"
  - Replace "shadow-md" with "shadow-[4px_4px_0_#000]"

智能推荐

结合受众、品牌调性和无障碍优先级生成推荐。

# Basic recommendation
npx stylekit recommend "SaaS dashboard"

# Context-aware recommendation
npx stylekit smart "e-commerce store" --audience consumer --mood playful

# Enterprise + accessibility context
npx stylekit smart "B2B SaaS" --audience enterprise --mood professional --a11y

# Compare two styles for one product
npx stylekit compare neo-brutalist glassmorphism "creative portfolio"

全部命令

stylekit help

显示帮助与使用示例。

stylekit styles

列出所有可用风格。

stylekit rules <style>

显示指定风格的 Lint 规则。

stylekit lint <file> --style <style>

按风格规则检查代码文件。

stylekit recommend <query>

快速获取风格推荐。

stylekit smart <query> [options]

获取带评分的上下文感知推荐。

stylekit compare <s1> <s2> <query>

针对同一产品场景对比两种风格。

stylekit search <query>

搜索风格知识库。