Claude Skill Style Guide — Design skill for Claude Code

claude-skill-style-guide

[](https://github.com/reeschan/claude-skill-style-guide/actions/workflows/ci.yml)

A Claude Code skill that turns a free-form description (e.g. "a calm, Japanese-style invoicing SaaS") into a UI theme: colors, radius, spacing, shadows and fonts. It outputs a Tailwind v4 `theme.css`, a `theme.json` and a style guide document. Estimation can be done by Jev (TypeSafe) or by Claude itself; everything after that is deterministic.

自由記述から UI テーマ (配色・角丸・余白・影・フォント) を推定し、Tailwind v4 の `theme.css`・`theme.json`・スタイルガイド文書を作る Claude Code スキルです。


ダーク基調でニュートラルなテーマ「作業台」を Web アプリで開いたところ。


ライト基調で明朝体を使ったテーマ「藍の請求書」を Web アプリで開いたところ。

特長

• 明示指定 (ブランド色の色コード、ライト/ダーク、フォント名) は推定より常に優先される
• 推定は Jev (TypeSafe) か Claude 自身が行う。Jev のキーが無くても使える
• 推定結果から決定的にシード化するので、同じ入力なら同じテーマになる
• WCAG のコントラストを自動で検証し、足りない色は補正する
• Web アプリで、スライダーや選択による調整、ライト/ダークのプレビューができる
• Google Fonts の無料フォントから、見出し・本文・等幅の 48 組のカタログを持つ

必要なもの

• Claude Code
• Node.js 22.18 以上 (.ts をそのまま実行するため。開発は v26)
• 任意: Jev (TypeSafe) の API キー

インストール

git clone https://github.com/reeschan/claude-skill-style-guide ~/.claude/skills/style-guide

Windows の PowerShell:

git clone https://github.com/reeschan/claude-skill-style-guide "$env:USERPROFILE\.claude\skills\style-guide"

`npm install` は不要です (依存パッケージはありません)。

使い方

Claude Code で次のように呼び出します。

/style-guide 落ち着いた和風の請求書 SaaS。藍色が基調

自由記述が英語の要約 (ブリーフ) になり、推定、フォント選定、シード化、テーマ生成の順に進みます。結果は `~/.claude/style-guide/themes//` に 8 ファイルとして保存され、テーマ名・トンマナ・主な値・コントラストの結果・別案が報告されます。

• /style-guide app: Web アプリ (ブラウザ) で作る・調整する
• /style-guide app : 保存済みのテーマを Web アプリで開く
• /style-guide list: 保存済みテーマの一覧

CLI を直接使うこともできます。

node scripts/pipeline.ts run --request request.json --brief brief.js