Product design skills

README.md

A supporting file of the wireframe-json skill.

View raw MarkdownView source

About this Skill

A Claude Code skill that generates wireframe from natural language descriptions.

Describe a screen layout in plain language, and the skill produces a JSON wireframe definition + a self-contained HTML preview you can open in any browser.

How to Use

Use /wireframe command or type in natural language.

/wireframe dashboard with sidebar navigation and a data table

What It Produces

Two files per screen:

FilePurpose
{name}.wireframe.jsonMachine-readable layout definition
{name}.wireframe.htmlPreview in browser

Why JSON

When you ask an LLM to wireframe, the default output is ASCII art. It's human-readable at a glance, but LLMs can't reliably parse it back into structure, and it's difficult to adjust programmatically. One misaligned character breaks the whole layout.

JSON solves this. It's a structured format that both humans and machines can read, edit, and reason about. And critically, AI-powered design tools like Figma Make and Google Stitch already accept JSON to render designs — so JSON wireframes become the bridge between conversation and visual output.

HTML Preview Capabilities

The generated HTML file is fully self-contained — no server, no build step, no external dependencies. Just open it in a browser.

Editing

  • Drag-and-drop reordering — drag any element's grab bar to reorder it within its parent container
  • Direction toggle — click ↕/↔ on a container's grab bar to switch between vertical and horizontal layout
  • Select — click any element to select it (click again to deselect)
  • Copy & paste — select an element, then ⌘C/⌘V (Ctrl+C/V) to duplicate it. Nested containers are deep-copied.
  • Delete — select an element and press Delete/Backspace to remove it
  • Undo / Redo — ⌘Z to undo, ⌘⇧Z to redo

Live Sync

  • The JSON panel updates in real-time as you edit
  • An "Edited" badge appears when changes have been made

Export

All export buttons are in the JSON panel header:

ActionBrowser SupportDescription
CopyAll browsersCopy JSON to clipboard
SaveChrome / EdgeWrite directly to a file (first save opens picker, then overwrites)
DownloadAll browsersStandard browser download

Element Types

The wireframe JSON supports these element types, each rendered as a distinct placeholder:

TypeRendered As
textGray label (with variant for hierarchy: display, heading, caption)
imageGray box with image icon
iconSmall gray circle
buttonRounded rectangle
linkUnderlined text
inputBordered rectangle
cardBordered box with shadow
tableHeader row + placeholder data rows
dividerThin horizontal line
(none)Transparent container (structural grouping)

Requirements

  • Python 3 — used to splice JSON into the HTML template (a one-line string replacement)
  • A web browser — to view the HTML preview

No npm, no build tools, no external libraries.

File Structure

.claude/skills/wireframe/
  SKILL.md                  # Skill definition and JSON schema
  wireframe-designer.md     # Cognitive model (7-phase design reasoning)
  wireframe-template.html   # Self-contained HTML template (~1000 lines)
  README.md                 # This file

このスキルについて

自然言語の説明からワイヤーフレームを生成する Claude Code スキル。

画面レイアウトを言葉で説明すると、JSONワイヤーフレーム定義と、ブラウザで開けるHTML プレビューを生成します。

使い方

/wireframe とコマンドを入れるか、自然言語でも生成できます。

/wireframe サイドバーナビゲーションとデータテーブルのあるダッシュボード

生成されるファイル

画面ごとに2つのファイルが生成されます：

ファイル用途
{name}.wireframe.json機械可読なレイアウト定義
{name}.wireframe.htmlブラウザでプレビュー

なぜJSONか

LLMにワイヤーフレームを頼むと、デフォルトの出力はASCIIアートです。人間にはぱっと見で読めますが、LLMが構造として正確に解析し直すのは難しく、調整も困難です。1文字ずれるだけでレイアウト全体が崩れてしまいます。

JSONはこの問題を解決します。人間にも機械にも読み書きでき、推論可能な構造化フォーマットです。また、Figma MakeやGoogle StitchといったAIデザインツールがすでにJSONを受け取ってデザインを描画できること。JSONワイヤーフレームは、会話とビジュアルアウトプットをつなぐ橋渡しになります。

HTMLプレビューの機能

生成されるHTMLファイルは完全に自己完結しています。サーバー不要、ビルドステップ不要、外部依存なし。ブラウザで開くだけです。

編集

  • ドラッグ&ドロップ並べ替え — 要素のgrab barをドラッグしてコンテナ内で並べ替え
  • レイアウト方向の切り替え — コンテナのgrab barにある↕/↔ボタンでvertical⇔horizontalを切り替え
  • 選択 — 要素をクリックして選択（もう一度クリックで選択解除）
  • コピー&ペースト — 要素を選択し、⌘C/⌘Vで選択要素の直後に複製。ネストされたコンテナもディープコピー。
  • 削除 — 要素を選択してDelete/Backspaceキーで削除
  • 元に戻す／やり直し — ⌘Zで取り消し、⌘⇧Zでやり直し

リアルタイム同期

  • 編集に合わせてJSONパネルが即座に更新
  • 変更を加えると「Edited」バッジが表示

エクスポート

すべてのエクスポートボタンはJSONパネルヘッダーにまとめられています：

アクションブラウザ対応説明
Copy全ブラウザJSONをクリップボードにコピー
SaveChrome / Edgeファイルに直接保存（初回はピッカー表示、以降は上書き）
Download全ブラウザ標準のブラウザダウンロード

要素タイプ

ワイヤーフレームJSONは以下の要素タイプをサポートし、それぞれ固有のプレースホルダーとして描画されます：

タイプ描画
textグレーのラベル（variant で階層指定: display, heading, caption）
image画像アイコン付きグレーボックス
icon小さなグレーの円
button角丸の矩形
link下線付きテキスト
input枠線付き矩形
card影付き枠線ボックス
tableヘッダー行 + プレースホルダーデータ行
divider細い水平線
（なし）透明コンテナ（構造的グルーピング用）

必要な環境

  • Python 3 — JSONをHTMLテンプレートに埋め込むために使用（1行の文字列置換のみ）
  • Webブラウザ — HTMLプレビューの表示用

npm、ビルドツール、外部ライブラリは一切不要です。

ファイル構成

.claude/skills/wireframe/
  SKILL.md                  # スキル定義とJSONスキーマ
  wireframe-designer.md     # 認知モデル（7フェーズのデザイン推論）
  wireframe-template.html   # 自己完結型HTMLテンプレート（約1000行）
  README.md                 # このファイル

On this page

How to UseWhat It ProducesWhy JSONHTML Preview CapabilitiesElement TypesRequirementsFile Structureこのスキルについて使い方生成されるファイルなぜJSONかHTMLプレビューの機能要素タイプ必要な環境ファイル構成