AgentSkillsCN

lofi-wireframer

根据需求规格,使用ASCII艺术和Mermaid生成低保真线框图和流程图。

SKILL.md
--- frontmatter
name: lofi-wireframer
description: 要求仕様から、ASCIIアートとMermaidを用いて低忠実度ワイヤーフレームと遷移図を生成する。

動作フロー

  1. .steering/requirements.md を読み込み、今回の作業で必要な画面と要素を特定する
  2. ユーザーの行動フローを Mermaid (graph TD) 形式で記述し、prototypes/userflow.md として保存する
  3. 各主要画面のレイアウトを ExcalidrawのJSONスキーマに従い 作成し、(ボタン、入力欄、ナビゲーションを明示) prototypes/wirefreame.excalidraw として保存する
  4. 要求事項の漏れがないかチェックを行う

遵守事項

  • 装飾は不要。要素の配置と情報の優先順位に集中すること
  • UXチェック: 生成後、ユーザービリティ・ヒューリスティクス等の観点から、改善案を2点提示すること
  • 承認を得るまで、React等のコード実装には絶対に進まないこと

完了時のメッセージ

text
「低忠実度ワイヤーフレームを `./prototypes` に作成しました。
遷移図と各画面のレイアウトを確認してください。」