agentleFS
mae616mae616/ai-template/.claude/skills/proto-medium/SKILL.md

proto-medium

Skill9 starsChanged 3 months agoMITView on GitHub

プロトタイプの媒体選択ガイド(判断軸)。この検証は Figma でやるべきか、コードで作るべきか、併用かを決める。proto-loop のステップ2、およびデザイン検討の入口で「Figmaとコードどっちでやる?」に迷ったら適用する。基準の核は「止まっている絵で判断できるなら Figma、動かさないと分からないならコード」。

The file

Files
SKILL.md

proto-medium — Figma か、コードか(媒体選択の判断軸)

プロトタイプ・デザイン検証の媒体(Figma / コード / 併用)を、確かめたい問いから逆算して決めるための判断軸。 人間がまだ判断に慣れていない前提で、AIが毎回この基準を通して推奨+理由を提示し、人間が承認する運用にする。

基準の核(一言)

止まっている絵で判断できるなら Figma。動かさないと分からないならコード。

判断フロー(上から順に最初に当てはまったものを採る)

  1. 触った感触・動き・入力感が体験の核心か? → コード (hover・スクロール・アニメーション・タイピング感は Figma では嘘になる)
  2. 実データ・実ロジックが体験を左右するか?(速度・データ量・エッジケース) → コード
  3. 色・タイポ・レイアウト・トーンの比較検討か? → Figma (variants で複数案を並べて見るのが最も得意。手でドラッグして微調整もできる)
  4. 画面遷移・情報設計を俯瞰して合意したいか? → Figma (画面一覧・フロー全体を1枚で見る。非開発者に見せる資料にもなる)
  5. デザインシステム・トークンの整備か? → Figma (/design-ssot で Dev Mode からトークン抽出して実装へ流せる)
  6. どれでもない・迷う → 併用: 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 とコードで別々の判断をして分岐する(結論は設定集に一本化する)

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.