セマンティックHTML/JSXとWAI-ARIAを「最小で正しく」適用し、キーボード操作・スクリーンリーダ・コントラスト等を満たす実装を作るための判断軸。ネイティブ要素優先、ARIAの過剰使用を避ける。
The English summary is being prepared. Showing the original description.
mae616/ai-template9Updated Oct 6, 2026
FreePublished on GitHub
proto-medium
プロトタイプの媒体選択ガイド（判断軸）。この検証は Figma でやるべきか、コードで作るべきか、併用かを決める。proto-loop のステップ2、およびデザイン検討の入口で「Figmaとコードどっちでやる？」に迷ったら適用する。
基準の核は「止まっている絵で判断できるなら Figma、動かさないと分からないならコード」。
The English summary is being prepared. Showing the original description.
Works withFigma
See how to installFiles included (1)
- SKILL.md3.8 KB
SKILL.md (original)
Review the instructions the agent will receive before you install.
proto-medium — Figma か、コードか（媒体選択の判断軸）
プロトタイプ・デザイン検証の媒体（Figma / コード / 併用）を、確かめたい問いから逆算して決めるための判断軸。 人間がまだ判断に慣れていない前提で、AIが毎回この基準を通して推奨＋理由を提示し、人間が承認する運用にする。
基準の核（一言）
止まっている絵で判断できるなら Figma。動かさないと分からないならコード。
判断フロー（上から順に最初に当てはまったものを採る）
- 触った感触・動き・入力感が体験の核心か？ → コード （hover・スクロール・アニメーション・タイピング感は Figma では嘘になる）
- 実データ・実ロジックが体験を左右するか？（速度・データ量・エッジケース） → コード
- 色・タイポ・レイアウト・トーンの比較検討か？ → Figma （variants で複数案を並べて見るのが最も得意。手でドラッグして微調整もできる）
- 画面遷移・情報設計を俯瞰して合意したいか？ → Figma （画面一覧・フロー全体を1枚で見る。非開発者に見せる資料にもなる）
- デザインシステム・トークンの整備か？ → Figma
（
/design-ssotで Dev Mode からトークン抽出して実装へ流せる） - どれでもない・迷う → 併用: Figma でトーンボード → 良かった方向をコードで動かして確認
早見表
| Figma が向く（Claude が MCP で操作できる） | コードプロトが向く |
|---|---|
| 色・タイポ・レイアウトの比較検討（複数案並置） | hover・スクロール・アニメーション等の触感 |
| 画面一覧・遷移フローの俯瞰 | 実データ・レイテンシ・データ量が効く体験 |
| デザイントークン・コンポーネント整備 | 技術的に成立するかの検証 |
| 人に見せて合意を取る資料 | レスポンシブの実挙動 |
| 手でドラッグして微調整したいもの | 生成的・ゲーム的な「動きに世界観が宿る」表現 |
運用ルール
- 媒体を決めたら推奨＋理由を一言で人間に提示し、承認を得てから作る（判断を人間が学べるよう、理由は必ず言葉にする）
- 1ラウンド内の併用は可（例: Figma で3トーン並べて選定 → 選ばれたトーンをコードで動かす）
- Figma 側の実働スキル: 書き込みは
figma-generate-design/figma-use、実装への引き渡しはdesign-ssot。コード側の置き場はproto-loopの規約（proto/*ブランチ /samples/）に従う - Figma プロトの URL は設定集（Setting Book）に記録して揮発を防ぐ
よくある誤り
- 「デザインの話だから」と何でも Figma に寄せる（動きが核心の体験は Figma では検証できない）
- 「どうせ実装するから」と何でもコードで作る（トーン比較はFigmaの方が数倍速く、非開発者とも共有できる）
- 併用時に Figma とコードで別々の判断をして分岐する（結論は設定集に一本化する）
Reviews
No reviews yet. Tell others what you thought.
Comments
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
More skills from this repository
agent-browser
FreeAgent Browser（Headlessブラウザ自動化CLI）を使ったUI検証・E2Eテスト・スクリーンショット取得の判断軸。アクセシビリティツリーベースの要素選択を優先し、壊れにくいテスト設計を目指す。
The English summary is being prepared. Showing the original description.
mae616/ai-template9Updated Oct 6, 2026
ディズニーの12原則とジブリ的自然運動をベースに、UIアニメーションの「なぜ動かすか」「どう動かすか」を判断する。アニメーション/モーション/トランジション設計の相談で、ツール非依存の概念的判断軸として使う。
The English summary is being prepared. Showing the original description.
mae616/ai-template9Updated Oct 6, 2026
アーキテクチャ設計（境界/依存/データフロー/非機能/運用）を、制約とトレードオフで言語化し、ADR-liteで合意形成しながら段階的に形にする。doc/input/rdd.md にアーキテクチャ/非機能/運用の要求がある、または設計判断（分割/責務/インタフェース/データ整合/観測性/スケール）相談で使う。
The English summary is being prepared. Showing the original description.
mae616/ai-template9Updated Oct 6, 2026
biz-researcher
Free事業仮説を支える一次/二次情報を整理し、意思決定に足る「根拠」「不確実性」「次の調査」を可視化する。でたらめな引用や推測の断言を避け、出典の実在を重視する。
The English summary is being prepared. Showing the original description.
mae616/ai-template9Updated Oct 6, 2026
creative-coder
Free体験品質（動き/触感/視線誘導）を「実装可能な制約」に落とし、アクセシビリティとパフォーマンスを犠牲にせずに表現を実現する。UIの表現・アニメーション・インタラクション設計/実装の相談で使う。
The English summary is being prepared. Showing the original description.
mae616/ai-template9Updated Oct 6, 2026