一键导入
speckit-wireframe-prep
Load spec context and validation rules before generating wireframes
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
Load spec context and validation rules before generating wireframes
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Generate SVG wireframes from spec.md with light/dark/both themes
Cross-SVG consistency check for features with multiple wireframes
Review wireframes, classify issues as PATCH or REGENERATE, sign off approved wireframes into spec.md
Capture standardized screenshots of wireframes (requires Python or Docker)
Launch the interactive wireframe viewer in a browser
| name | speckit-wireframe-prep |
| description | Load spec context and validation rules before generating wireframes |
| compatibility | Requires spec-kit project structure with .specify/ directory |
| metadata | {"author":"github-spec-kit","source":"wireframe:commands/prep.md"} |
eightysix note: feature paths are
features/<category>/<NNN-name>/, notspecs/<feature>/. Validator is at.specify/extensions/wireframe/scripts/validate.py(shipped by this project).
Prime context for wireframe work. Run before /speckit.wireframe.generate when you want to pre-load spec context, validation rules, and any prior review issues.
$ARGUMENTS
Accepts:
001-user-auth or 001) — prep for specific featureIf an argument is provided, resolve it to the full feature directory:
# Accept "001" or "001-user-auth" or "user-auth"
FEATURE_DIR="specs/$(ls specs/ | grep -E "^${ARG}" | head -1)"
If no argument, set FEATURE_DIR="" (patch mode).
Read these files and summarize nothing — the AI loads them silently for reasoning, then produces the priming block in Step 5.
.specify/extensions/wireframe/scripts/validate.py — understand every check.specify/extensions/wireframe/GENERAL_ISSUES.md — avoid recurring mistakes.specify/extensions/wireframe/wireframe-config.yml — theme defaults, output pathsIf any of these files don't exist, continue without them — they're conveniences, not requirements.
If FEATURE_DIR is set:
Read <FEATURE_DIR>/spec.md and extract:
### User Story N section)## UI Mockup block (prior sign-off)If <FEATURE_DIR>/wireframes/ exists, list existing SVGs and their .issues.md files.
If FEATURE_DIR is empty (patch mode):
Find all .issues.md files under specs/*/wireframes/ and load them. These describe patches needed across features.
Scan loaded issues for patterns that recur across multiple features. If a pattern appears in ≥3 features' issues files, flag it as an escalation candidate — it should probably be documented in .specify/extensions/wireframe/GENERAL_ISSUES.md to prevent repetition.
Output escalation candidates (if any):
═══════════════════════════════════════════
ESCALATION CANDIDATES
═══════════════════════════════════════════
Pattern: "Touch targets below 44px on mobile footer"
Seen in: 001, 003, 005 (3 features)
Suggest: Add to GENERAL_ISSUES.md
Pattern: "Badge overflow on annotation panel"
Seen in: 002, 004 (2 features, 1 more and it should escalate)
═══════════════════════════════════════════
═══════════════════════════════════════════════════════════════
WIREFRAME PREP COMPLETE
═══════════════════════════════════════════════════════════════
MODE: [feature | patch]
FEATURE: [NNN-feature-name | n/a]
NON-NEGOTIABLES:
- Canvas 1920×1080, no deviation
- Light theme panels #e8d4b8 (never #ffffff)
- Minimum font 14px, touch targets 44px
- FR/SC badges only in annotation panel
- Each annotation group anchored by a User Story
CRITICAL VALIDATOR RULES (if validator loaded):
[list of top 5 rules by frequency from GENERAL_ISSUES.md]
FEATURE STATE:
Existing SVGs: [count]
Issues files: [count]
Signed off: [yes/no — yes if spec.md has `## UI Mockup` block]
PRIOR ISSUES (if any):
[count] PATCHABLE
[count] REGENERATE
NEXT STEPS:
Generate: /speckit.wireframe.generate [feature]
Review: /speckit.wireframe.review [feature]
═══════════════════════════════════════════════════════════════