spec
Generate UI screen design documents with component lists, state transitions, interactions, and responsive breakpoints. Use when designing screens, creating wireframes, or running /spec. Use when this capability is needed.
来源信息
- 仓库
- tomevault-io/skills-registry
- 最近来源活动
- 2026年4月28日 22:53
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 1
- 分支
- 0
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
文件资源管理器
2 个文件正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- spec
- description
- Generate UI screen design documents with component lists, state transitions, interactions, and responsive breakpoints. Use when designing screens, creating wireframes, or running /spec. Use when this capability is needed.
- metadata
- {"author":"ai-driven-school"}
# /spec スキル
画面名から画面設計書を生成します。
## 使用方法
```
/spec ログイン画面
/spec ダッシュボード
/spec 商品詳細ページ
```
## 出力テンプレート
`docs/specs/{screen}.md` に出力:
```markdown
# 画面設計: {画面名}
## 概要
{画面の目的と概要}
## 画面構成
### レイアウト
```
┌─────────────────────────────┐
│ Header │
├─────────────────────────────┤
│ │
│ Main Content │
│ │
├─────────────────────────────┤
│ Footer/TabBar │
└─────────────────────────────┘
```
### コンポーネント一覧
| コンポーネント | 種類 | 説明 | 必須 |
|--------------|------|------|:----:|
| {名前} | {種類} | {説明} | ✓/- |
## 状態
| 状態名 | トリガー | 表示内容 |
|--------|---------|---------|
| 初期表示 | ページロード | {内容} |
| ローディング | API呼び出し中 | スピナー表示 |
| 空状態 | データ0件 | 空状態メッセージ |
| エラー | API失敗 | エラーメッセージ |
## インタラクション
### ユーザーアクション
| アクション | 動作 | 遷移先 |
|-----------|------|--------|
| {ボタン}クリック | {処理} | {画面/状態} |
### キーボードショートカット
| キー | アクション |
|------|----------|
| Enter | {動作} |
| Escape | {動作} |
### アニメーション
- {要素}: {アニメーション種別}（{タイミング}）
## レスポンシブ対応
| ブレークポイント | レイアウト変更 |
|-----------------|---------------|
| < 768px (mobile) | {変更内容} |
| < 1024px (tablet) | {変更内容} |
| >= 1024px (desktop) | {変更内容} |
## アクセシビリティ
- [ ] 適切なaria-label
- [ ] キーボードナビゲーション対応
- [ ] 色のコントラスト比 4.5:1以上
- [ ] フォーカス状態の視覚的表示
## 関連画面
- 遷移元: {画面名}
- 遷移先: {画面名}
```
## 出力例
```
> /spec ログイン画面
📐 画面設計を生成中... (Claude)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📄 docs/specs/login.md を作成しました
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
# 画面設計: ログイン画面
## 概要
ユーザーがメールとパスワードでログインする画面。
## コンポーネント一覧
| コンポーネント | 種類 | 説明 |
|--------------|------|------|
| Logo | Image | アプリロゴ |
| EmailInput | TextInput | メールアドレス入力 |
| PasswordInput | TextInput | パスワード入力 |
| LoginButton | Button | ログイン実行 |
| ForgotPasswordLink | Link | パスワード再設定へ |
| SignUpLink | Link | 新規登録へ |
...
承認しますか？ [Y/n/reject 理由]
```
---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/ai-driven-school) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-15 -->
在 GitHub 查看