Pinned Tweet
【Claude Code / Codex のSkillsを学べる有料級プレゼント6個:無料配布👀🎁】
この度、Skills Studioで発信してきた「面倒な仕事をSkillにして、AIに丸ごと任せる」ノウハウを、有料級プレゼント6個にまとめて、期間限定で完全無料配布することにしました🔥
◤ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄◥
Skills Studio:
Claude Code / Codex のSkills
実務活用 有料級プレゼント(全6個)
◣________________◢
※プレゼントの受け取り方法は【投稿の最後】にまとめています👇
ですが、受け取るかどうかは、この下を読んでからで大丈夫です。
まず結論から、今回無料配布するこの6個はマジでやばいです。。。。
なぜかと言うと「Skillsを触り始めた人の9割が、必ず詰まるポイント」を、そのまま教材構成に落とし込んでいるから。しかも扱っている内容は、初心者〜中級者向けです。ガチ初心者大歓迎💪
・Skillsが良いのは分かったけど、結局どれを入れればいいか分からない
・入れてはみたけど、仕事でどう使えばいいか分からない
・MCPやHooksと何が違うのか、あいまいなまま
・自分の仕事用のSkillを、どう作ればいいか見当もつかない
そんな状態からでも進められるように、
「そもそもそれは何か?」という概念レベルから説明しています。
▼ 6個の中身
①Claude Code / Codex Skills 完全入門
→ 「そもそもSkillって何?」から、仕事で使えるレベルまで一気に分かる
②仕事別Skills選定マップ50(CSV+導入ロードマップ)
→ 「結局どれを入れればいい?」に、仕事別+入れる順番で答える50個の一覧
③自分専用Skillを作る設計プロンプト30
→ コピペして埋めるだけで、自分の仕事用のSkillが作れる設計プロンプト集
④Skills × MCP × Hooks × 指示ファイル 使い分けワークブック
→ 「これ、結局どれを使えばいい?」がなくなる使い分けの早見表
⑤すぐ使える実務Skill 3体(Zip)
→ 解凍して置くだけで使える、実務向けのSkillを3つそのまま収録
⑥Skills実務運用OS(Zip)
→ 毎回同じ説明をAIに繰り返すのを、仕組みでゼロにする運用一式
この6個で、
「Skillを選ぶ」→「自分用に作る」→「仕事で回して育てる」
までを、順番通りに体系化しています。
さらにこの教材は、自分自身が「Skillsを調べてはいるのに、仕事では何も使えていなかった状態」から
・どこで詰まり
・何が分からず
・どうやって乗り越えたのか
その全プロセスを実体験ベースで作成しています。
当時の自分は、Skillsが気になって調べてはいたものの、結局どれを入れればいいか分からず、入れても使わないまま止まっていました。面倒な仕事をSkillにしてAIに丸ごと任せられるようになったのは、選び方と作り方を一つずつ整理してからです。
だからこの教材は、「できる人向け」ではありません。「分からない人の目線」を前提に作られています。
さらに今回の目玉として、②の「仕事別Skills選定マップ50」に、入れる順番のロードマップまで付けています🎁
・50個のSkillsを、仕事別に分類してある
→ マーケ・リサーチ・資料作成・動画・SNS・開発まで、職種をまたいで一覧で分かる
・入れる順番=導入ロードマップつき
→ 「で、どれから入れればいい?」で迷わなくなる
・ぜんぶ「実務で使う前提」で選んである
→ 「入れたけど結局使っていない」にならない
正直、「この選定マップだけでも、普通に有料級」と言われる内容だと思います🔥
そして今回、このプレゼントを受け取っていただいた方限定で、今後も以下のような取り組みを継続していきます👇
① 新しいSkillを見つけたら
「これ、仕事で使える?」目線で実際に試して共有
② Claude Code × Skills × MCP / Hooks の実務ワークフローを噛み砕いて発信
③ マーケ・リサーチ・資料作成・動画・SNS・開発、職種別の「Skill化できる仕事」の実例
④ 「毎回同じ説明をしなくて済む仕組み」の作り方を、記憶や指示ファイルまで含めて共有
⑤ 選定マップ・設計プロンプトなど、今回のプレゼントの継続アップデート配布
では、なぜこんな企画をしているのか❓
正直に言うと、自分はXを見ていてずっと感じていました。
「Skillsがすごいのは分かった」
「でも、結局どれを入れて、どう仕事に組み込めばいいのか分からない」
この状態で止まっている人が、あまりにも多いと。実際に多い詰まりは、毎回ほぼ同じです。
・どのSkillを入れればいいか分からない
・入れても、仕事では使えていない
・MCPやHooksとの使い分けがあいまい
・自分の仕事用のSkillの作り方が分からない
だから今回、
Skillsを入れても仕事で使えていなかった状態から、面倒な仕事をSkillにしてAIに任せられるようになるまで
その全プロセスを、6個の有料級プレゼントとしてまとめ、期間限定で無料公開することにしました。
正直、この内容は他であれば有料で販売されていても全くおかしくありません。
ですが、自分も最初は「何をやればいいか分からない状態」で、かなり悩みました。同じように悩んでいる人は、今も必ずいるはずだと思い、今回思い切って無料配布することにしました。
───────────────
▼ プレゼントの受け取り方法 ▼
① Skills Studio(@sumika45379)を『フォロー』
② この投稿を『いいね&リツイート』
③ こちらから受け取りページへ→plai-ai.co.jp/go/skill6-x-po…
───────────────
正直、ここまでのボリュームを無料で出すのは、かなりやばいです。それでも自分は、本気で「Skillsをちゃんと仕事で回せる人」を増やしたいと思っています。
もし少しでも「いいな」「価値がある」と感じていただけたら、引用リツイートでの拡散にご協力いただけると嬉しいです。
本気でSkillsの実務活用をやりたい人に、この6個が届いてほしい。そして、Skills Studioは未来永劫有益な発信を続けていきます。今後とも何卒よろしくお願いいたします🙇
【画面づくり】
Claude Code が作る画面を、Stripe や Linear みたいな雰囲気に寄せる方法、知ってた?😳
有名サービスの見た目を書き起こした手本ファイルを1つ選んで、shadcn のスキルに渡すだけ。
紹介してたのは Voxyz_ai。手本選びとスキルの2段に分けて使う組み合わせ。
・awesome-design-md:Stripe・Linear・Vercel・Notion など74製品の雰囲気を書き起こした DESIGN.md 集。色・文字・余白・角の丸み・影だけじゃなく、やること・避けることまで入ってる
・shadcn 公式スキル:選んだ DESIGN.md をもとに新しい案件を作って、部品を全部入れて、その雰囲気に塗り直してくれる
・最後に出てくるのは、色の読みやすさを確かめた見本ページ。部品の状態が全部並んで、やる・やらないの対比も横に置かれる
shadcn 公式スキルは npx skills add shadcn/ui で入る。あとは GitHub で選んだ DESIGN.md の Raw のリンクを渡して、「shadcn スキルで新しい案件を作り、この DESIGN.md からデザインの決まりを作って、見本ページまで仕上げて」と頼むだけ。
ただ、手本はコミュニティが各ブランドの雰囲気を解釈して書いたもので、公式の配色そのものではない。気に入らなければ別の手本でやり直して、合ったら自分の案件に移して育てていけばいい。
見本ページで部品の状態がまとめて見えるの、確認の手間が地味に減るやつ。
手本の一覧はこちら👇
github.com/VoltAgent/awesome…
手本ファイルを決めたら、避ける見た目を書いた一覧も一緒に持たせたい。
基準ファイルと禁止リストを組み合わせる作り方は、この下の記事で順に書いてます👇
【引き継ぎ】
うわ、これ「AIの記憶係を人間がやってた」話だ。
元ポストの作者は、Claude Code と Codex の間でメモを貼り直す役を Fulcra に渡してた。
元ポストの RodmanAi いわく、毎回セッションの始まりに同じことが起きてた。Claude Code がリポジトリを読み直して、決まりを覚え直して、前の日に答えたことをまた聞いてくる。Codex に切り替えたら、メモの壁を貼って同じことのやり直し。記憶係をやってたのは自分だった、と。
そこで入れたのが Fulcra。自分で持つ文脈の置き場所で、エージェントはそこから読んで、そこへ書く。入った中身は整えられて時系列に並ぶから、1体が分かったことを次の1体がそのまま使える。作者の1日を変えたのは受け渡しのほうで、Claude Code が止まるときに文脈を残して、Codex がそれを拾って続けるそう。
誰に何を見せるかも決められる。エージェントごと、人ごとに範囲を分けられて、お客さんのエージェントには1フォルダだけ読み取り専用で渡す、なんて使い方まで書いてある。
ターミナルからは npx skills add fulcradynamics/agent-skills の1行で入る。
コピペの橋渡しをやめられるなら、2つのAIを行き来してる人にはやばい話。
渡すたびに貼り直してた中身は、仕事ごとの手順としてスキルに分けておけば毎回打たなくていい。
Codex に仕事ごとの手順を持たせるスキルの選び方は、この下の記事で30本まとめてます👇
【朗報】
AIに作らせた画面、動くけど見た目がもう一歩な人へ。
角の丸みや影から、文字・配色・配置まで面倒を見るスキル集がまとめて入る。
元ポストの Chenfacai0 が紹介してたのは jakubkrehel/skills。画面の見た目づくりを、細部から全体の確認までAIエージェントに覚えさせるスキルの集まり。
受け持つのは、UI の細部から画面全体の見直しまで。
・角の丸み・影・小さな動きといった UI の細部
・文字の選び方と組み方、OKLCH を使った配色
・ページの配置と、使いやすさ(アクセシビリティ)への配慮
・UX の文言と、画面全体の見直し
入れ方は2つで、プラグインとして Claude Code に足すか、Skills の CLI を使うか。1行で済ませたいなら npx skills add jakubkrehel/skills。
ぶっちゃけ、画面をAIに任せきりにしてる人ほど、最後の仕上げ役として手元に置いておきたい。
中身の一覧はこちら👇
github.com/jakubkrehel/skill…
見た目の基準は、スキルが毎回読みに行く形にしておくと崩れにくい。
AIっぽい見た目を避ける UI スキルの組み立て方は、この下の記事で全部書いてます👇
【先読み】
打ち込んでる途中で、次に使うスキルの候補が確率つきで出る仕組みがあるの知ってた?😳
Jev Skill Typeahead、中身がまるごと公開された。
公開したのは dani_avila7。投稿自体は短くて、Jev Skill Typeahead のコードを全部オープンソースにしたから、中を見たり改善を送ったりして、スキルの予測をもっと正確にするのを手伝ってほしい、という内容。
添付の画像は README の表示例で、入力欄の上に候補のスキルなどの名前と、その確率が並んでる。
スキルが増えてくると、名前を覚えておくだけで一苦労なんだよね。打ってる途中で候補が出てくれるなら、呼び忘れはだいぶ減りそう。
コードの置き場所はこちら👇
github.com/davila7/claude-co…
スキルが呼ばれるかどうかは、最初に読まれる名札の書き方で決まる部分が大きい。
スキルが読み込まれる3つの段階と、呼ばれる説明文の書き方は、この下の記事で書いてます👇
【保存推奨】
作者の話だと、Claude Code の手伝い役3体に作業を任せても、元の会話に戻ってきたのは短い報告3本だけ。
その手伝い役は、ファイル1枚で作れる。
xitter.cf/0xbobaaa/status/210789…
元ポストの 0xbobaaa の説明だと、仕組みはこう。
・元の会話(親役、lead)が仕事を分ける
・手伝い役(サブエージェント)は、それぞれ空の会話から始まる。同時にも動かせる
・親に戻ってくるのは短いまとめだけ
作者いわく、昨日は3体で合わせて32万7千トークン(AIが読み書きした量のこと)分の作業をさせたのに、親の会話はその中身を一切見てない。親が持ってるのは報告3本だけで、ファイルの読み込みもログも行き止まりも入ってこない。
作り方は .claude/agents/ に Markdown を1枚置くだけ。名前は test-fixer、説明は「テストを回して落ちたら直す。コードを変えたあとに使う」、使える道具は Read・Edit・Bash。中身は「テストを回して、落ちたものを直す。返事は5行まで:何が壊れたか、何を変えたか、まだ何が落ちてるか」。
親の会話が小さいまま保てるのはこの5行の縛りのおかげか、ってなった。報告の上限を決めておく発想は、ほかの手伝い役にもそのまま持ち込める。
毎回読ませる場所と、必要なときだけ開く場所を分けると、会話が埋まりにくい。
指示を置ける場所の使い分けは、この下の記事で公式の説明から整理してます👇
【整理術】
良い README は自分を売り込まない、という考え方をスキルにした人がいるの知ってた?😳
読む人が「これは自分向けか」を一目で分かるようにする。
元ポストの QuantumTransf は、長く手を入れ続けた案件ほど README が肥大して読めなくなるから、そういうときにエージェントに試させてみて、と紹介してた。
中身は、the art of readme という文章から作者が抜き出した原則がベース。作者のお気に入りは「良い README は自分を売り込まない。この案件が自分に合うかを、読む人に一目で分からせるべき」という考え方。
コマンドは npx skills add tommy0103/better-readme-skill の1行だけ。作者いわく、使う前と後でかなり変わるらしい。
README って書いた本人ほど削れないんだよね。外の目で削ってくれる役がいるのは本当にありがたい。
入れ方と中身はこちら👇
github.com/tommy0103/better-…
人に渡す説明書は、用途と試し方が短く書いてあるだけで、読んだ人がすぐ試せる。
スキルを人に渡す前の確認と、配る説明書の書き方は、この下の記事で書いてます👇
AIに開発を任せて迷子にならないために、入れておきたい開発のskillを15個まとめました。
選んだ元は6つのskill集で、いちばん大きい obra/superpowers は親リポのスター(GitHubのお気に入り登録)が301,495。
内訳は addyosmani の agent-skills から5個、mattpocock の skills から4個、DietrichGebert の ponytail から3個、残り3つのskill集から1個ずつ。スターは親リポ全体の数字で、skill 1個の人気ではありません。
仕様を固める所から、実装、エラー直し、点検、レビューへの対応まで作業の順に並べたので、AIに任せた開発の質を上げたい人は必ず見てください。
━━━━━━
【開発】
1. ask-matt
mattpocock の skill 集のどれを、どの順で使えばいいかを聞ける案内役のskill。思いつきを聞き取りで固め、仕様・チケット・実装・振り返りへ進む道筋を状況に合わせて示す。自分で呼んだときだけ動く。
github.com/mattpocock/skills…
2. domain-modeling
会話の中で曖昧な言葉が出たら、その場で問いただして GLOSSARY.md(用語集)に確定した意味を書くskill。言っていることとコードが食い違えば指摘し、戻しにくい決定だけを ADR(決定の記録)に残す。
github.com/mattpocock/skills…
3. context-engineering
新しい会話を始める時や、AIの出力がずれてきた時に使うskill。CLAUDE.md などの決まりファイル、仕様、関係するファイル、エラーの出力の順に、AIへ渡す情報を必要な分だけ整える。
github.com/addyosmani/agent-…
4. karpathy-guidelines
Karpathy の観察をもとに第三者がまとめた、AIのコーディングの失敗を減らす4つの決まり。思い込みを先に言う、頼まれていない機能を足さない、頼まれた所だけ直す、確かめ方を先に決める。
github.com/multica-ai/andrej…
5. ponytail
頼まれた仕事を、いちばん小さい変更で丸ごと片づけさせるskill。直す前に呼び出し元やテストまで影響範囲を洗い出し、返事の最後に確かめていないこととリスクを1〜2行で添えさせる。
github.com/DietrichGebert/po…
6. implement-spec
/to-spec と /to-tickets で作った仕様とチケットを、統合用のブランチにまとめて実装するskill。着手できるチケットから実装役を並べて走らせ、最後に code-review をかける。課題管理の設定が前提。
github.com/mattpocock/skills…
7. implement
仕様やチケットを渡して実装させる、短い入口のskill。tdd を使いながら型チェックとテストを回し、終わったら code-review で見直してからコミットする。自分で呼んだときだけ動く。
github.com/mattpocock/skills…
8. caveman-commit
差分から、Conventional Commits 形式の短いコミットメッセージを書くskill。何をしたかより「なぜ」を残し、git commit そのものは実行しない。
github.com/JuliusBrussee/cav…
9. debugging-and-error-recovery
テストが落ちた、昨日動いたものが壊れた、という時に使うskill。新しい作業を止めて証拠を残し、再現→場所の絞り込み→最小化→原因の修正→再発防止の順で進めさせる。
github.com/addyosmani/agent-…
10. browser-testing-with-devtools
Chrome DevTools MCP(ブラウザの検査機能をAIにつなぐ仕組み)を使い、本物のブラウザで画面・コンソールのエラー・通信を確かめるskill。直したつもりの見た目を実画面で確認できる。MCP の設定が前提。
github.com/addyosmani/agent-…
11. code-simplification
動きは一切変えずに、深い入れ子や重複、分かりにくい名前を整理するskill。新しく入った人がすぐ読めるかを基準に、最近触ったコードから順に直す。
github.com/addyosmani/agent-…
12. ponytail-audit
引き継いだばかりの担当のつもりで、リポジトリ全体を点検するskill。バグ・安全性・負荷・テスト不足・速さ・消せる所を大事な順に並べ、読まなかった部分も申告させる。コードは変えない。
github.com/DietrichGebert/po…
13. ponytail-review
変更の差分を、壊れたら呼び出される担当の目で見直すskill。指摘ごとに何が起きてどう直すかを書き、最後に出してよいか、先に直すべき番号を一言で返す。
github.com/DietrichGebert/po…
14. code-review-and-quality
取り込む前の変更を、正しさ・読みやすさ・設計・安全性・速さの5つの軸で見直すskill。自分が書いたもの、別のAIが書いたもの、人が書いたもの、どれにも使える。
github.com/addyosmani/agent-…
15. receiving-code-review
レビューの指摘を受け取った時、すぐ直さずに意味を確かめ、今のコードで正しいかを検証してから1つずつ直させるskill。うのみにも、口先だけの同意もさせない。
github.com/obra/superpowers/…
━━━━━━
仕様を固める・作る・直す・確かめる・指摘に答えるの順で並べたので、次にAIへ開発を頼む前にブックマークしておいてください。
入れたスキルは毎回まるごと読まれるわけではなく、まず短い説明文で選ばれる。
skillが読み込まれる3つの段階と、呼ばれる書き方は、この下の記事で公式の資料から書いてます👇
【新機能】
Claude Code、ついに「コミットの前に自分で確かめる」動きを入れてきた😳
その名も
ーーーverify スキル!!
これまで Claude Code は、変更したらそのままコミットで、見直すのはこっちの仕事だった。新しい版だと、案件に verify という名前のスキルがあれば、コミットの前に毎回それを走らせてくれる。
Voxyz_ai が配ってる指示は、.claude/skills/verify/SKILL.md に3段の手順を書かせるもの。
1. 案件にあるテスト・型チェック・リントを回す。落ちたらそこで止めて、場所を言う
2. コミットする変更を、OpenAI のレビュー基準で見る。挙動の変化・データ消失・端のケースのテスト不足を優先して、問題ごとに「どの入力で起きるか・期待・実際」を書く
3. 起きちゃいけない挙動の変化や、データが消えるおそれがあれば、コミットせずに直して1からやり直す
文書やテストだけのコミットは対象外。版が古いなら、先にターミナルで claude update を。作ったあとは、組み込みの /verify が置き換わることと、効くのは新しいセッションからなのも覚えておきたい。
止める基準まで手順に書いてあるの、正直かなり頼もしい。書き方の好みでは止めない線引きもありがたい。
確認を「お願い」で書くか「止める手順」で書くかで、守られ方は変わる。
お願いではなく判定で止める、置き場所の分け方はこの下の記事で書いてます👇
【衝撃】
会話が長くなって圧縮されたあと、Claude Code がさっきまで直してたエラーの文面を忘れる人へ。
要約し直さずに、古くなった作業の記録だけを消すプラグインが出てる。
これまでの圧縮は、AIに古いやりとりを要約させるやり方。でもその要約で、ファイルの場所や正確なエラー文、守るべき条件が抜け落ちる、っていうのが元ポストの RoundtableSpace の指摘。
今回の fast-jev-compaction は、何も書き換えない。消すのは、ファイルを読んだりコマンドを打ったりした作業の記録(道具の呼び出しと結果)のうち、Jev が採点して「もう古い」とした分だけ。残した部分は一字一句そのまま、順番も変えずに置いておく。
入れ方は2通り。Claude Code のプラグインとしても、npm のライブラリとしても使える。
直してる途中のエラー文が消えないなら、長い作業の後半がガチで楽になる。
置き場所はこちら👇
github.com/tamaratran/fast-j…
会話に残す量が性能に効くことは、公式の説明でも触れられてる。
会話に詰め込みすぎると言うことを聞かなくなる理由は、この下の記事にまとめてます👇
【保存版】
AIの働き方を、6つの約束だけで書いた AGENTS.md の見本が出回ってる。
計画・最小の変更・分担・バグ・確認・記録の6節を、Claude Code と Codex の共通の決まりにできる。
配ってたのは simplifyinAI。元画像の AGENTS.md は、6つの節がそれぞれ短い約束になってる。コードを変える前に計画を立てる、問題を解く最小の変更にとどめる、分身に作業を回す、バグの修正に責任を持つ、終わったと言う前に結果を確かめる、直されたことを全部記録する。
なかでも確認の節は具体的で、「チェックを走らせていないなら、そう言う。走らせていないチェックは合格ではない」と書いてある。これは耳が痛い。
Codex はこのファイルをそのまま読む。ただ Claude Code で使うときは、案件に CLAUDE.md があると既定では CLAUDE.md だけが読まれる。ここが地味なハマりどころなので、置く前に一度確かめておきたい。
6つとも短いから、自分の案件に合わせて1節ずつ書き換えるところから始めるのがよさそう。
「直されたことを記録する」を本当に効かせるには、記録の置き場を分けるのがコツ。
置き場の分け方はこの下の記事で3つに整理してます👇
【公開】
HeyGen が、AIに書かせた HTML を MP4 にする道具をオープンソースで出してきた😳
その名も HyperFrames。Claude Code のプラグインでも、スキルでも、コマンドでも入れられる。
考え方はシンプルで、動画を「Webページ」として書いて、それを書き出すだけ。元ポストに並んでた中身はこの4つ。
・動画づくりの発想は Remotion から来ているけど、React ではなく素の HTML で書ける
・画面を出さずに動くブラウザ(Headless Chrome)と FFmpeg が、HTML・CSS・素材・動きを MP4 にする
・同じ入力からは毎回同じ動画になる書き出し方
・入れ方は Claude Code のプラグイン、エージェントのスキル、コマンドの3通り
ライセンスは Apache 2.0 で、動かすには Node.js 22 以降と FFmpeg が要る。
編集ソフトを開かずに、ページを直す手つきで動画まで直せるの、ガチで気楽。
公開ページ:
github.com/heygen-com/hyperf…
この道具を土台にして、声や字幕まで足していく入れ方もある。
動画系のスキル7つと一緒に、この下の記事でまとめてます👇
【実演】
Claude のスキルが、ついに「視点を回せて、ボタンも押せる3Dの画面」まで作れるようにしてきた😳
その名も ーーー ISO-GLOW!!
xitter.cf/Aprilzz423/status/2109…
Aprilzz423 の投稿によると、今回の更新で同じ Claude のスキルが3D表示の道具 Three.js を使うようになった。視点を回す・斜め上から見下ろす角度にピタッと合わせる・ちゃんと押せるボタン、の3つがそろってる。
もう1つやばいのが、手持ちの3Dモデルを .glb(3Dモデルのファイル)で渡すと、整えてから見た目を描き直してくれるところ。遊べる作例も12個あって、次に3Dを作る時の手本として取っておける。
同じスキルのまま3Dまで扱えるようになってて、え、そっちまで行くの?ってなった。作例12個と更新版のスキルは、元ポストのリンクから落とせる。
立体でも平面でも、見た目の基準はファイルに書いて、読む手順はスキルに分けて渡せる。
その3つの部品の作り方は、この下の記事で書いてます👇
【衝撃】
入れて10分で、洞窟の壁画から2026年までの画風を1本につないだアニメを Opus 5.5 が作った、と紹介者の Voxyz_ai が動画で見せてる😳
使ったのは alchaincyf が配っている huashu-art-motion というスキル。部屋と猫と女の子はそのままで、画風だけが変わっていく。
xitter.cf/Voxyz_ai/status/210969…
頼み方は「ゴッホ風・モネ風・バウハウス風で」「ナレーションに合わせた説明アニメを」くらいのざっくりでよくて、参考のアニメを渡せば、カットの切り替え・テンポ・画面のどこが動くかを分解してからコードで作り直してくれる。
・画風ごとに「絵の中で何が動くか」が決めてあり、クリムトの衣の目は順にまばたきする
・音楽もコードで、テンポの格子に合わせて1音ずつ作る
・できたら点検用のスクリプトを走らせ、制作に関わっていない別のAIが完成品だけを見て問題を探す
・途中に0.3秒以上の空白コマがある動画と、青紫の背景が3割を超える動画は書き出しで止める
画風は元ポストの時点で35種類、今の配布版の手順書では36種類。説明書は中国語で、書き出しには uv・ffmpeg・Playwright Chromium が要る。人物を出すなら自分のキャラ絵か画像生成AIのつなぎ込みが必要で、どちらも無ければ手と後ろ姿だけになる。
作るところを見ていない別のAIに完成品だけをチェックさせる流れ、これはエグい。自分の動画づくりにも欲しい。
入れ方は npx skills add alchaincyf/huashu-art-motion。配布ページ:
github.com/alchaincyf/huashu…
はじめての作品は、台本から短い見本を作って、直す場面を絞っていく進め方が早い。
その手順はこの下の記事が参考になります👇
【保存版】
分身(サブエージェント)にデザインのスキルを持たせて、作業の進み具合を描く地図係にできるの知ってた?
長い作業から戻った時、終わった所・詰まってる所・次の一手が HTML 1枚で見られる。
勧めてたのは Voxyz_ai。Opus 5.5 に夜通し作業させる前に、まず地図を描かせておこう、という話で、元ポストのプロンプトを順に追うと作り方はこう。
① ~/.claude の agents フォルダに project-map を作る。モデルは Opus、考える深さ(effort)は medium、記憶は memory: user にして、手持ちのデザインのスキル(例として impeccable)を先に読み込ませる
② 初回だけ手前で動かし、暗い画面か明るい画面か、差し色を1色聞かせる。答えは記憶に残り、次からはそれに従う
③ 地図はダブルクリックで開く HTML 1枚。案件を数個の部品に分け、終わった・進行中・未着手・詰まってるで印を付け、詰まっている所は何待ちかも書く
④ ~/.claude/CLAUDE.md に「長く自走する前に地図を裏で描かせ、区切りごとに更新し、今どこ?と聞かれたら地図から答える」と足す
書き込み先は案件の .project-map/ だけで、そのフォルダは .gitignore に入れる。地図の上には、次の区切りまでの残りの数とおすすめの次の一手まで出る。公式の説明でも、分身に skills を指定すると起動時にその中身が読み込まれ、memory を付けると会話をまたいで残るフォルダを持てる。
朝いちばんに「で、どこまで行った?」って聞かなくて済むの、これはずるい。
地図係のように、毎回は読ませず必要な時だけ動かす役は、置き場所を分けておくと扱いやすい。
毎回読ませる場所と、必要な時だけ開く場所の置き分けは、この下の記事にまとめてます👇
【警告】
Claude Code の分身を「読むだけ係」にして、書き換えは本体だけに残せるの知ってた?
頼むだけでなく、書こうとした瞬間に止める見張りまで付けられる。
xitter.cf/dani_avila7/status/210…
Claude Code 用の部品集 Claude Code Templates を作ってる dani_avila7 が、Haiku で動く分身は調べ物専用にして、コードの変更は本体に任せるのを強く推してた。足された部品は2つで、本体の扱いも合わせると👇
・Subagents Explore Only(設定):分身が動き出す時に「読む・探す・見つけたことを報告するだけ」と伝える。説明にも、これはお願いで強制ではないとある
・Subagent Read Only Guard(フック=決まった時に自動で動く処理):分身が道具を使う直前に、ファイルの書き込みや許可していないコマンドを止める
・本体の Claude Code は止められず、普段どおりの権限で動く
入れ方は npx claude-code-templates@latest に --setting hooks/subagents-explore-only と --hook security/subagent-read-only-guard を付けた1行。ただフックの説明には、MCP(外部サービスとつなぐ仕組み)の道具や git の一部の処理は守備範囲外とあるので、そこは別に気をつけたい。
お願いだけで終わらせず、破りかけたら止める側まで同梱してくるの、地味に心強い。
「読むだけにして」と書くだけでなく、守られなかったら止まる判定に変えておく考え方は、ほかのルールにも使える。
止め方の設計はこの下の記事が詳しいです👇
【公開】
Claude Code で作ったサイトのボタンやカードが、のっぺりして味気ない人へ。
押すと紙飛行機が飛ぶボタンのような動くUIが無料で配られていて、スキルに頼めば自分のサイトに組み込むところまでやってくれる。
xitter.cf/lucian__03/status/2109…
作ったのは、韓国語で発信している開発者の lucian__03。Lucian UX/UI Prompt という自作のオープンソースで、昼と夜が切り替わるスイッチや、動くカードとグラフなどを、サイトで実際に押して選べる。投稿では、動くUIを200個、全部無料で出したと書いてる。
使い方は2通り。1つは、気に入った部品の「プロンプトをコピー」を押して Claude Code や Codex に貼る方法。もう1つは npx skills add Seokwoooo/lucian-uxui でスキルを入れて「lucian-uxui スキルでホームページに料金プランの切り替えとFAQを入れて」と頼む方法で、AIが先に案件の作りとテーマを確かめてから、ギャラリーで必要な部品を探して実際のコードを持ってきてくれる。
スキルの手順書では、明るい画面と暗い画面の両方、幅375pxのスマホ、キーボード操作、動きを減らす設定まで最後に確かめることになってる。個人の制作でも商用のサービスでも無料で使える。
1個ずつ貼るのも手軽だけど、テーマを読んで合わせてくれるなら、ぶっちゃけスキル経由を選ぶ。
紹介と使い方のページと、オープンソースの GitHub:
lucianlabs.dev/uxui-prompt/i…
github.com/Seokwoooo/lucian-…
部品を足す前に、色と書体の基準ファイルを先に作っておくと、見た目がそろいやすい。
参考サイトから基準を作る手順は、この下の記事で書いてます👇
【公式】
OpenAI が、Figma のデザインを画面にする手順を、スキル1つにまとめて公開してる😳
選んだ枠の構造を読みにいき、完了と言う前に Figma の画面と見比べるところまで決めてある。
xitter.cf/figma/status/210499404…
スキルの名前は figma-implement-design で、OpenAI の skills に入ってる。手順書だと、最初はファイルの番号と選んだ枠の番号を取り出して、デザインの構造の情報を読みにいく工程(get_design_context)。最後は、出来上がった画面を Figma のスクリーンショットと見比べてから完了にする。
Figma 公式も「Dev Mode, now in Codex. Available in the Figma plugin.」と発表していて、Figma の Dev Mode(開発モード)が Codex でも使えるようになった。入口は Figma のプラグインから。
最後に元のデザインと見比べる工程までスキルに入ってるから、作りっぱなしで終わらない。ここがやばい。
OpenAI の skills にある figma-implement-design:
github.com/openai/skills/blo…
作った画面を元のデザインと見比べたあとは、ナビから新しいページへ辿り着けるかまで見ておくと抜けが減る。
確認の頼み方は、この下の記事で実例つきで書いてます👇





















