wireframe-sketch について
ホワイトボードや草案段階での画面検討に使う、手描き風ワイヤーフレームのテンプレートです。方眼紙、バリエーション表示、ラフな図表の仮置き、付箋注釈でスケッチ感を表します。
主な機能
- 01方眼紙の背景
- 02複数案を示すラベル
- 03手描き風の図表とハッチング
- 04少し傾けた黄色い付箋
- 05手書きフォントと不揃いな配置
活用シーン
- 01ホワイトボード段階で画面案を検討
- 02複数のレイアウト案を並べて表示
- 03付箋でワイヤーフレーム草案に注釈
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ nexu-io/ html-anything --skill wireframe-sketchインストール後、Claude Code で/wireframe-sketchを入力して読み込まれたか確認します。
同梱ファイルexample.html
README(原文)English
プロジェクトの README よりこの README の日本語訳はまだありません。以下は英語の原文です。日本語の紹介はページ上部をご覧ください。
【模板: 手绘 Wireframe】 【意图】白板 / 草稿前阶段的 wireframe 探索。 【布局】
- Graph-paper 背景
- 多 tab labels (variants 标签)
- scribbled chart placeholders + hatched fills
- Sticky-note annotations (黄色, 旋转一点点) 【设计细节】
- 字体: Caveat / Architects Daughter; 不要规规矩矩的对齐
コメント
Markdown 対応