5Kスター自主メディア画像スキル - シャオヘイスキル：手描き記事画像チュートリアル
今日は、イラストとして使える画像をいくつかご紹介します。ソーシャルメディアの世界では、記事を書くことはあくまで基礎であり、魅力的な画像を選ぶ能力がますます重要になってきています。現代人はもはや長い記事をじっくり読むことはほとんどなく、代わりに興味深い画像を見ることに多くの時間を費やす傾向があります。
今日は、イラストとして使えるようなものをいくつか投稿します。
ソーシャルメディア向けコンテンツを作成する際、記事を書くことはあくまで基礎であり、魅力的な画像を選ぶ能力がますます重要になってきています。現代人は長文の記事をじっくり読むことは少なくなり、代わりに、記事に添えられた興味深い画像に目を留める傾向があります。
ここに何人かの人がいます推薦するとても楽しいイラストプロジェクト：ian-xiaohei-illustrations、私が普段「シャオヘイスキル」と呼んでいるものです。
WeChatでフォローして「オープンソース「、参加するAIオープンソースプロジェクトディスカッショングループ
helloianneo/ian-xiaohei-illustrations は Ian です オープンソースコーデックス・スキルの一つである「生のイメージ・ロジック」とは、記事中の判断、プロセス、状態、比喩表現を取り上げ、白い背景に手描きで描かれた、風変わりでありながらも新鮮なイラストを複数枚作成し、本文に添えることである。
これがシャオ・ヘイの姿だ。全身真っ黒で、白い点のある目、細い脚、そして虚ろな表情。
Xiaohei Skillが表示する画像は通常、16:9の比率で白い背景に手描きで描かれており、赤、オレンジ、青の中国語の注釈がいくつか添えられ、余白が多く、まるで製品デザイナーが白い紙にさりげなく描いた説明スケッチのようだ。
プロジェクト住所：https://github.com/helloianneo/ian-xiaohei-illustrations
ケース1：イラスト企画
シャオヘイスキルにはいくつかの用途があります。まず一つ目は、イメージプランニングです。以前の記事を使って試してみましょう。
プロンプトワード：
小海スキルを使用する際は、まだ生の画像は使用しないでください。以下の記事のどの部分に画像が必要かを分析し、約5枚の画像のリストを出力してください。各画像について、配置場所、テーマ、核心的な意味、構造の種類、小海が何をしているか、そして中国語のキャプション案を明確に記述してください。
記事：
今日は、学術的なことに興味のある方にぴったりの投稿をします。
今 AI 学術ツールの普及に伴い、執筆速度は向上したが、綿密なチェックを行うと数多くの欠陥が明らかになる。
さらに辛いのは AI 非常に説得力のある主張をすることはできるが、引用した元の文献が必ずしもその主張を裏付けているとは限らない。
最近、GitHubでこの種の問題に特化した学術研究プロジェクトを見かけたのですが、すでに3万ものスターを獲得していました。
写真
01
プロジェクト概要
学術研究スキル（ARS）は、以下の目的で設計された一連のスキルです。 Claude Code のオープンソース学術研究スキルパッケージは、トピックの選択、文献検索、論文執筆、査読、改訂、書式設定のプロセスを細分化し、… AI 私たちは段階的に参加しますが、最終的な判断は私たちに委ねられています。
このプロジェクトは、テーマの選定と調査、文献検索、論文執筆、査読、改訂、最終的なフォーマット設定、プロセス概要に至るまで、学術研究の全工程を網羅しています。
写真
このプロジェクトには主に4つのスキルセットが含まれます。
徹底的な調査：詳細な調査、文献レビュー、系統的レビュー、および事実確認を実施する。
写真
学術論文：論文の執筆、要約の作成、フォーマット変換、引用フォーマットのチェックを支援します。LaTeX / PDF出力。
写真
学術論文レビューツール：査読をシミュレートし、複数の視点から論文を検証し、品質スコアと修正案を提供します。
写真
学術パイプライン：これは研究プロセスから論文の出版までを繋ぐもので、段階的に進行し、その過程で学術的な誠実性に関するチェックが組み込まれています。
写真
また、非常に使いやすい。単純。
すでに使用している場合は Claude Codeを使えば、たった2行のコマンドでプラグインを直接インストールできます。
/plugin marketplace add Imbad0202/academic-research-skills
/plugin install academic-research-skills
写真
02
プロジェクト測定
このプロジェクトにおける4つのスキルセットは互いに補完し合い、論文を完成させる過程で10種類以上のスキルが交互に登場します。例えば、このプロジェクトを指針として論文を書くことができます。
プロンプトワードそれがきっかけで、出生率低下の影響に関する論文を書くことになった。
「学術論文」スキルセットに含まれる「計画モード」スキルは、ガイド付きのアプローチを用いて論文の計画を立てるのを支援します。
写真
質問をすることで、論文の現在の進捗状況や、どの構成を採用したいのかを知ることができます。
写真
進捗状況に関する質問に回答し、論文の構成を選択した後、論文の現在の進捗状況に応じて作業を進めます。推薦するまずは徹底的な調査から始めましょう。
写真
もちろん、綿密な研究においては、論文の方向性を決定するために質問を用いることもあります。
＜画像をクリックして上下にスクロールすると、全文が表示されます＞
ご覧のとおり、これは学術論文スキルグループのフルモードワークフローに移行します。
プロセスは直接フェーズ1へと進み、研究課題の概要と方法論的な設計図が作成されました。
彼らは文献調査を行う前に、特定の方向性に関する問題を慎重に確認する。そのプロセスは実に綿密だ。
＜画像をクリックして上下にスクロールすると、全文が表示されます＞
文献検索結果が4つの方向に分かれていたので、すでにかなり網羅的だと思っていたが、そこにいくつかの限界点まで記載されていたとは予想外だった。
＜画像をクリックして上下にスクロールすると、全文が表示されます＞
フェーズ3：分析と統合を完了した後、私たちは2つの選択肢を与えられました。
フェーズ4に進みます：完全な調査報告書を直接作成します。
あるいは、この研究の基礎を学術論文の計画段階に戻し、章ごとのガイド付き計画を進めていくこともできます。
2つ目の選択肢は、当初の目標に戻り、文献を集め、それから論文の構成を計画することです。
写真
文献レビューの初期段階が完了し、私たちの研究はもはや全くの白紙状態ではなくなりました。さらに、このプロセスを通して、論文の核心となる論点を抽出することもできました。
＜画像をクリックして上下にスクロールすると、全文が表示されます＞
中心となる主張を明確にすることで、各章の構成を練りやすくなります。ARSは論文全体を直接作成するのではなく、様々なスキルを駆使して一連の質疑応答を行い、私たちの視点を論文に取り入れようとします。
1回の照会後も変更が行われない場合、フルモードに移行します。 AI 論文の初稿を完全に書き上げてください。
＜画像をクリックして上下にスクロールすると、全文が表示されます＞
このプロジェクトの本質は、学術的誠実性の監視と引用監査にある。
私たち単純「論文全体を査読してください」と依頼すると、ARSは論文査読プロセスに専用のチェックポイントを設け、架空の引用、データの誤り、文献に裏付けられていない主張、方法論の誇張などをチェックします。AI 幻覚はこれらの問題を引き起こす。
具体的には、学術論文査読者スキルセットを直接呼び出すことでこれを実現します。
＜画像をクリックして上下にスクロールすると、全文が表示されます＞
ご覧のとおり、ARSは幅広い意味で多くの側面から論文を評価し、どの段落や文を修正する必要があるかを教えてくれます。
＜画像をクリックして上下にスクロールすると、全文が表示されます＞
最終結果からもわかるように、構成は非常にしっかりしており、内容もかなり充実しています。授業レベルの論文としては、既に十分な出来栄えと言えるでしょう。
03
掘る
論文を完成させること以上に、私が興味を持っているのはARSの背後にある方法論、つまり学術研究を再現可能で、文書化可能で、監査可能なシステムに分解することです。 AI ワークフロー。
大学は、ARSを論文執筆指導や学術倫理チェックに活用できます。研究チームは、文献レビューや予備的なプロジェクト調査にARSを利用できます。学術誌や教育機関は、初期スクリーニングや査読にARSを利用できます。企業の研究開発、コンサルティング、投資調査チームも、同様のプロセスを用いて報告書の証拠の連鎖を検証できます。
「引用監査」や「請求内容確認」といった機能は、将来的に標準的な慣行となる可能性が特に高い。 AI 学術ツールの中核となる充電ポイント。
今や多くの人が AI これらのツールは依然として「研究論文のような文章を書くのを助ける」レベルにとどまっており、根本的な問題は未解決のままです。それぞれの結論は関連文献によって裏付けられているのか？引用は誤って解釈されていないか？データは他の文脈から取得されていないか？
AI 専門的な仕事を一度にすべて終わらせようと急ぐ必要はありません。より良いアプローチは、専門的なプロセスに積極的に関わり、人々が追加の質問をしたり、情報を確認したり、詳細を再確認したりするのを手伝い、見落としがちな手順の抜け穴を埋めることです。
わずか数分で5枚の画像の選択が完了しました。
これら5つのポイントは全体的に適切に選ばれており、読者が立ち止まって熟考する可能性のある記事中の重要な場面を捉えています。これらの図は機能モジュールごとに均等に配置されているわけではなく、記事の中で真に判断が必要となる特定の箇所に焦点を当てています。
ケース2：本文に付随する画像
2つ目の使い方は、テキストに直接画像を生成することです。記事を渡すと、自動的に画像が生成されます。
プロンプトワード下記の記事に添える小黒をテーマにしたイラストを4枚作成するために、小黒スキルを使用してください。要件：16:9の横長、純白の背景、黒の手描き線画、赤、オレンジ、青の漢字による手書きの注釈。
記事：
今日は、フロントエンド開発者にとって役立つ情報をいくつかご紹介します。
正直に言うと、今はいくつかあります。 AI Agent フロントエンドのデザインは極めて劣悪で、レイアウトは中央揃えすぎ、カードは積み重ねられ、グラデーションは過剰に使用され、余白や階層構造は不自然で、アニメーションはリズム感に欠け、フォントや間隔は洗練さに欠ける。結果としてウェブページは安っぽく見え、Codexはその典型的な例である。
数日前、GitHubでついに見つけたのは Taste Skill このプロジェクトは解決できるAI Agent 美観の悪さという問題が原因で、プロジェクトのリポジトリには約4万個のスターが付けられている。
写真
01
プロジェクト概要
味覚スキルは AI Agent フロントエンドデザインスキルライブラリは、 AI テンプレートベースで画一的、かつ美的魅力に欠けるフロントエンドデザインは排除しましょう。
レイアウト、タイポグラフィ、モーションエフェクト、スペーシング、視覚的密度、デザイン言語といった要素（元々はデザイン経験がなければ判断できなかったもの）を、誰でも簡単に判断できるものへと変える。 AI Agent パフォーマンスを向上させるには、SKILL.md の指示を読み、実行してください。 AI インターフェース生成時の設計判断。
Taste Skillには現在、さまざまな目的のためのスキルモジュールが含まれており、各モジュールは特定の問題を解決するように設計されています。
design-taste-frontend
デフォルトのスキルは、要件に基づいてデザイン言語を推測し、レイアウトの多様性、アニメーションの強度、情報密度など、いくつかの重要な側面を通じて出力を制御します。
gpt-taste
適切な GPTレイアウト変更に対してより寛容な /Codex の厳密なバージョン、GSAP アニメーション効果とアンチテンプレート化に対する要求水準は高くなっています。
image-to-code
まずウェブページの参照画像を作成し、次に AI シナリオはフロントエンドコードに復元されます。
redesign-existing-projects
既存プロジェクトの刷新に使用します。まず、既存のUIをレビューし、レイアウト、間隔、階層構造、ビジュアルスタイルに関する問題を修正します。
high-end-visual-design
ビジュアルスタイルは高級感があり、控えめで洗練されており、柔らかなコントラスト、余白、フォントの質感、そして自然なアニメーションが強調されている。
minimalist-ui
NotionやLinearに似た、モダンでミニマルな製品インターフェースを備えているため、SaaS、ツール型製品、開発者向け製品、コンテンツベースのバックエンドなどに適しています。
industrial-brutalist-ui
工業的なスタイル、粗い質感、スイス風のフォント、強いコントラスト、そして実験的なレイアウトにより、より個性的でシャープな視覚表現に適しています。
full-output-enforcement
制約条件に使用されます AI 不完全な解答、プレースホルダー、または省略されたコードだけを提供するのではなく、適切な処理方法を提供してください。 Agent 問題は出力が不完全であることです。
画像生成スキル
これには、ウェブサイトのビジュアルドラフト、モバイルインターフェースフロー、ブランドビジュアルボードなどの参照画像を生成するために使用されるimagegen-frontend-web、imagegen-frontend-mobile、およびbrandkitが含まれ、それらはCodex、Cursor、または...に渡されます。 Claude コードの実装。
Taste Skillのインストール方法は非常に簡単です。単純CLI経由で直接インストールできます。
npx skills add https://github.com/Leonxlnx/taste-skill
特定のスキルのみをインストールしたい場合は、スキル名を指定することもできます。
npx skills add https://github.com/Leonxlnx/taste-skill –skill "design-taste-frontend"
このプロジェクトでは、より簡単な使用方法もサポートしています。SKILL.md ファイルをプロジェクトに直接コピーするか、チャットに貼り付けるだけです。GPT /Codex の会話で使用されます。
02
プロジェクト測定
コーデックス試験1
スキルありの場合とスキルなしの場合の両方についてウェブページを生成し、結果を比較してみましょう。
スキルなし:
プロンプトワード：
ゼロから実装するのを手伝ってください。AI Agent 製品ウェブサイトのホームページには、特別な機能は一切使用されていません。
製品名：LoopPilot
製品ポジショニング：チームを支援するツール自動タスクの計画、実行、およびレビュー AI Agent 作業台。
対象ユーザー：独立系開発者、小規模チームAI プロダクトマネージャー。
ページスタイル：典型的なSaaSテンプレートのような雰囲気、過剰な青紫のグラデーション、カードの過剰な配置は避けてください。目指すのは、洗練された、抑制された、明確な情報階層構造でありながら、未来的でツールのような美学を取り入れたデザインです。
以下の項目にご記入ください。
1. ホームページ全体をデザインする。
- 商品名、メインタイトル、サブタイトル、メインCTA、およびセカンダリCTAが含まれます。
– 3つの主要な機能を紹介します。自動タスクを細分化し、継続的に実行し、レビューと最適化を行う。
製品インターフェースのプレビュー領域は必須ですが、標準的なダッシュボードテンプレートに似せてはなりません。
―最初の画面には、明確な視覚的記憶ポイントを設けるべきです。
2. デザインスタイルの要件
– テンプレートを使用しないレイアウトを使用して、すべてのコンテンツを中央揃えや縦並びにならないようにしてください。
フォントの階層構造は明確であるべきであり、タイトルはインパクトがありながらも粗雑であってはならない。
配色を3～5色の主要色に限定する。
アニメーション効果は許容範囲内だが、単に技術力を誇示するためではなく、情報を伝えるためのものであるべきだ。
– このページは、モバイル端末とデスクトップ端末の両方に対応させる必要があります。
3. 規定要件
完全な実行可能なコードを直接出力してください。
プレースホルダーは使用しないでください。また、重要なコードを省略しないでください。
デザインの提案をするだけでなく、実際にページを実装してください。
コンポーネントを使用する場合は、すべてのコンポーネントが完全に記述されていることを確認してください。
スタイル設定が必要な場合は、完全なCSS/Tailwindクラスを提供してください。
4. 受入基準
– ページは次のように表示されるべきではありません AI デフォルトで生成されたSaaSテンプレート
- 明確な視覚的階層構造、分かりやすいCTA
– スクリーンショットは、モバイル端末で9時16分に有効なものでなければなりません。
– すべてのテキストは、はみ出したり重なったりしてはいけません。
最終的な成果物は、実際の製品発表会のホームページに似たものになるはずです。
まず、設計の方向性について簡単に説明し、その後、完全な実装例を示してください。
▲上下にスワイプして全文を表示
デスクトップ版：
写真
モバイル版：
＜画像をクリックして上下にスクロールすると、全文が表示されます＞
スキル機能のないバージョンは、「中央揃えのタイトル＋3枚のカード＋青紫のグラデーション」という、典型的なSaaSホームページのレイアウトに従っていません。
しかし、製品の使い勝手は良くありません。右側のワークベンチは、どちらかというと装飾的なイメージです。ユーザーは大きなタイトルやグラフィックに惹かれますが、結局、この製品がチームの作業をどのように支援するのか、あるいはどのようにクローズドループを形成するのかを理解できません。
モバイル端末でも閲覧可能ですが、タイトルの改行がやや唐突です。
味覚スキルを使う：
プロンプトワード：
Taste Skillのdesign-taste-frontendツールとfull-output-enforcementツールを使って、ゼロから実装するのを手伝ってください。AI Agent 製品の公式サイトホームページ。
製品名：LoopPilot
製品ポジショニング：チームを支援するツール自動タスクの計画、実行、およびレビュー AI Agent 作業台。
対象ユーザー：独立系開発者、小規模チームAI プロダクトマネージャー。
ページスタイル：典型的なSaaSテンプレートのような雰囲気、広範囲にわたる青紫のグラデーション、過剰なカードの配置は避けてください。洗練された、抑制された、明確な情報階層構造でありながら、未来的でツールのような美学を取り入れたスタイルを目指します。
以下の項目にご記入ください。
1. ホームページ全体をデザインする。
- 商品名、メインタイトル、サブタイトル、メインCTA、およびセカンダリCTAが含まれます。
– 3つの主要な機能を紹介します。自動タスクを細分化し、継続的に実行し、レビューと最適化を行う。
製品インターフェースのプレビュー領域は必須ですが、標準的なダッシュボードテンプレートに似せてはなりません。
―最初の画面には、明確な視覚的記憶ポイントを設けるべきです。
2. デザインスタイルの要件
– テンプレートを使用しないレイアウトを使用して、すべてのコンテンツを中央揃えや縦並びにならないようにしてください。
フォントの階層構造は明確であるべきであり、タイトルはインパクトがありながらも粗雑であってはならない。
配色を3～5色の主要色に限定する。
アニメーション効果は許容範囲内だが、単に技術力を誇示するためではなく、情報を伝えるためのものであるべきだ。
– このページは、モバイル端末とデスクトップ端末の両方に対応させる必要があります。
3. 規定要件
完全な実行可能なコードを直接出力してください。
プレースホルダーは使用しないでください。また、重要なコードを省略しないでください。
デザインの提案をするだけでなく、実際にページを実装してください。
コンポーネントを使用する場合は、すべてのコンポーネントが完全に記述されていることを確認してください。
スタイル設定が必要な場合は、完全なCSS/Tailwindクラスを提供してください。
4. 受入基準
– ページは次のように表示されるべきではありません AI デフォルトで生成されたSaaSテンプレート
- 明確な視覚的階層、分かりやすいCTA
– スクリーンショットは、9時16分時点でモバイル端末でも有効なものでなければなりません。
– すべてのテキストは、はみ出したり重なったりしてはいけません。
最終的な成果物は、実際の製品発表会のホームページに似たものになるはずです。
まず、設計の方向性について簡単に説明し、その後、完全な実装例を示してください。
▲上下にスワイプして全文を表示
デスクトップ版：
写真
モバイル版：
＜画像をクリックして上下にスクロールすると、全文が表示されます＞
Taste Skillに上部ナビゲーションバーが追加されたことで、見た目が格段に良くなりました。最近では、上部にナビゲーションバーがないウェブサイトなんてほとんどないですよね？
右側の製品プレビューは、もはや単なる抽象的な図ではなく、ユーザーは段階的なテキストを通して製品の流れを理解できるようになりました。
モバイル版もより成熟しており、機能が独立した情報ブロックとして整理され、読み上げ順序もより自然になっている。
コーデックス試験2
もちろん、既存のプロジェクトもTaste Skillを使ってリファクタリングできます。
プロンプトワード：
既存プロジェクトのホームページを再デザインするために、Taste Skill の redesign-existing-projects、minimalist-ui、high-end-visual-design、full-output-enforcement ツールをご活用ください。
プロジェクト所在地：
D:\360MoveData\Users\win\Desktop\公众号\wechat-topic-dashboard-ugly-homepage
背景：
こちらは「WeChat公式アカウントトピック管理プラットフォーム」の公式ホームページです。製品名はContent Deskです。WeChat公式アカウント、小紅書、動画アカウント、知乎などのプラットフォームで活動するコンテンツチームを対象としており、トピック選定、担当者の割り当て、進捗状況の追跡、コンテンツの閲覧などを支援します。 AI 推薦するそしてコンテンツの提示方法。
現在の問題点：
現在のページには必要な機能と情報がすべて揃っているが、見た目は非常にテンプレート的だ。
青・紫・ピンクのグラデーションが濃すぎる。
―誇張された見出し
- ページが過度に中央揃えになっている
- カードの積み重ねは深刻です
– CTAの繰り返し
―商品のスクリーンショットは装飾的なものであり、実際の商品とは異なります。
- 緩やかな情報階層
モバイル端末での読書経路は非常に長い
全体的に見て、普通の AI 生成されたSaaSランディングページ
リファクタリングの目標：
製品のテーマやコア情報を変更することなく、コンテンツ運用ツールのウェブサイトとして、よりプロフェッショナルで、抑制の効いた、信頼できるホームページにリファクタリングしてください。最終的な成果物は、テンプレートページではなく、ローンチ準備中の実際のSaaS製品の公式ウェブサイトに似たものになるべきです。
以下の項目にご記入ください。
1. 最初の画面再構成
– 製品名をContent Deskのままにする
– 製品ポジショニングの維持：コンテンツチーム向けのWeChat公式アカウントのトピック管理プラットフォーム。
– 明確なメインタイトル、サブタイトル、メインのCTA、およびセカンダリのCTAが必要です。
「効率が300％向上した」といった誇張表現は避けてください。
最初の画面には、単なる装飾画像ではなく、信頼できる製品インターフェースのプレビューを表示する必要があります。
視覚的に印象に残るものであるべきだが、派手であってはならない。
2. 製品機能の実演
以下の能力を実証する必要があります。
– AI 推薦するトピックの選択
– マルチプラットフォームのトピック選択管理
– ステータスと責任者の追跡
- 締め切りと優先順位の管理
– コンテンツのリスク警告
– 業績評価
表示しないメソッド単純6枚の大きなカードを積み重ね、コンテンツ操作シナリオに応じて情報階層を再編成します。
3. ワークフローの実演
コンテンツチームのトピック選定から事後分析までのプロセスを実演します。
話題のトピックを集める
―トピック選定を評価する
– 作文課題を出す
– レビューとリリース
– データレビュー
ワークフローは製品インターフェースに対応している必要があり、単なる1、2、3ステップのカードであってはなりません。
4. ページスタイルの要件
Notion、Linear、Larkのマルチテーブル機能、最新のB2B SaaSツールを彷彿とさせる雰囲気を持つ
控えめで、爽やかで、信頼できる
―適度な情報密度を保ち、過剰な情報は避ける。
青紫色のグラデーションが広い範囲に及ぶのは避けてください。
・大きくて丸いカードを重ねて置くのは避けてください。
影を過度に強調しない
マーケティング用語は避ける
レイアウトのリズム、余白、フォントの階層構造、ステータスカラーは明確に定めるべきです。
デスクトップ優先だが、モバイル優先も自然に受け入れられるはずだ。
5. 規定要件
– プロジェクト内の既存ファイルを直接変更する
– 完全な実行可能なバージョンを出力する
コードを省略しないでください
- ロレム・イプサムは使用しないでください
デザインの提案をするだけでなく、実際にページを実装してください。
デスクトップとモバイルデバイスの両方で、テキストがはみ出したり重なったりしないようにしてください。
― 純粋な静的HTML/CSSで実装できます。複雑なフレームワークは必要ありません。
6. 受入基準
– 見た目がこうであってはならない… AI デフォルトで生成されたSaaSテンプレート
製品のインターフェースプレビューは、それが「コンテンツ選択管理ツール」であることを明確に示す、信憑性のあるものでなければならない。
– CTAは明確だが、ノイズがない
能力とプロセスとは、単にカードを積み重ねることではなく、現実世界のコンテンツ運用シナリオに基づいてそれらを整理することである。
– モバイル端末での自然な読み順
―再建前と再建後の視覚的な違いは明らかであるべきです。
– 最終ページは、Taste Skillを使用して既存プロジェクトをリファクタリングするための実践的なケーススタディとして適しています。
まず、元のページの主な問題点を簡潔に指摘し、次にリファクタリング戦略を説明し、最後にプロジェクトファイルを修正して完全な実装例を示してください。
▲上下にスワイプして全文を表示
オリジナルのデスクトップ版：
＜画像をクリックして上下にスクロールすると、全文が表示されます＞
オリジナルモバイル版：
＜画像をクリックして上下にスクロールすると、全文が表示されます＞
元のページの青紫ピンクグラデーションと濃い影は目立ちすぎ、最初の画面は中央に配置されすぎており、機能やプロセスはすべて平均的にカードで積み重ねられていた。
中央にある製品のスクリーンショットも装飾的すぎるし、内部のデータやインターフェース構造も偽物のように見え、最初の画面を埋めるために配置されたモックアップのようだ。
モバイル端末では、これらの問題はより顕著になります。ナビゲーション、タイトル、ボタン、スクリーンショット、機能カードなどが次々と積み重なり、読み進めるのに時間がかかり、視覚的なノイズも大きくなります。
再設計されたデスクトップインターフェースは次のようになります。
写真
リニューアルされたモバイルアプリは以下のようになります。
＜画像をクリックして上下にスクロールすると、全文が表示されます＞
リニューアルされたページレイアウトははるかに見栄えが良くなりました。元のページの色は目がくらむほどでした。
デスクトップの左側には製品のポジショニングとコアデータが表示され、右側にはトピック選択ワークベンチの信頼性の高いプレビューが表示されます。ユーザーは、これがトピックの選択、ステータス、および…を管理するために使用されることを容易に理解できます。AI 推奨事項、リスク、およびリリースパフォーマンスに関するツール。
モバイル端末における情報表示順序は、ブランドナビゲーション、製品ポジショニング、メインタイトル、CTA（行動喚起）、そしてコアデータへと変化しました。ユーザーは、数多くの画面遷移やマーケティング用語をたどる必要がなくなり、製品の内容をより迅速に理解できるようになりました。
03
掘る
AI Agentそれは開発プロセスの一部になりつつある。
Stack Overflowの2025年開発者調査によると、開発者の84%がStack Overflowを利用したことがあるか、利用を計画している。 AI プロの開発者の51%が日常的に使用しているツール。
写真
同時に、AI コードツール市場は、2023年の43億ドルから2028年には126億ドルに成長すると予測されている。
写真
しかしAI コードを書けるからといって、製品を開発できるとは限らない。特にフロントエンド開発においては、多くの側面で高度なスキルが求められるため、このことはなおさら当てはまる。 Agent 生成された結果はまだデモ段階です。
Taste Skillは、フロントエンドデザイナーの経験と美的感覚をスキルルールに落とし込み、… AI Agent 実際の製品配送基準により近いインターフェースを生成できる。
解決済み AI フロントエンド開発における最も一般的な問題点としては、ページテンプレート、カードスタッキングやグラデーションの過剰使用、モバイル対応の不備、製品プレビューの信頼性の欠如、バックエンドの情報階層の混乱、既存プロジェクトの再構築コストの高さなどが挙げられます。
させてAI 製品ウェブサイトのホームページ、SaaSランディングページ、バックエンド管理システム、コンテンツ運用ワークベンチ、Agent Taste Skillは、製品デモの作成、顧客向けプロジェクトのプロトタイプ作成、既存プロジェクトのUIリファクタリングなどに活用できます。
完全なデザインチームを持たない小規模チームにとって、アイデアからMVP（最小実行可能製品）まで、そしてデモから実演可能な製品までのコストを大幅に削減できる。
Taste Skillの価値は、フロントエンドの美的感覚と製品判断を再利用可能なツールへと変革することにある。 AI 生産力。
Xiaohei Skillは、記事に添える画像として4つのポイントを選定した。
AI Agent フロントエンドの臭い：
味覚スキルルールマシン：
スキルなし／スキルありの比較：
デモは標準的な配信ゲートを通過します。
4つの選択ポイントの論理的な順序は非常にスムーズで、問題点、メカニズム、実際のテスト、そして価値の収束を網羅している。
この記事には多くのスキルモジュールとインストール手順が含まれていますが、これらはスクリーンショットやテキストによる説明の方が適しています。読者が判断を下す必要がある箇所に画像を配置することで、より効果的な説明となるでしょう。
ケース3 単一の概念/段落画像
3つ目の方法は、概念や短い文章を直接提供し、その後、小黒スキルを使用して図を生成する方法です。
プロンプトワードシャオヘイのスキルを使って、「誰もが心の中にアンテナを持っている。美しさ、希望、喜び、勇気、強さといった信号を受け取り続ける限り、人はいつまでも若々しく活力に満ち溢れることができる。」という文章を表す画像を生成してください。画像は風変わりでありながらも爽やかなものでなければならず、シャオヘイが中心となる動作を処理する必要があります。
この比喩は明確だ。5つのキーワード――美、希望、喜び、勇気、強さ――は、それぞれ花、日の出、笑顔、旗、炎に対応している。信号線は胸腔内のアンテナに入り、そこから蕾と時計へと繋がる。
シャオ・ヘイは劇中で行動を起こし、単なる飾り物にはならなかった。これはシャオ・ヘイのスキルの要求を満たしている。
人々はこう考えているかもしれません。「この小さな黒人のキャラクターはあまり好きじゃないんだけど、別のキャラクターを選べないかな？」
もちろん！誰もが自分好みのスタイルをカスタマイズできます。プロンプトワードこれにより、独自のIPイメージをスキルに統合することができます。
発掘現場の3つの視点からの図を提供しました。
次にCodexに入力するプロンプトワード：
プロンプトワード「リトルブラック」スキルの小さな黒い人物を掘削機の画像に置き換え、「リトルディガー」スキルをダンジョンとして作成します。
このようにして、私たちは個人的な知的財産が染み込んだ、ちょっとしたブラックスキル、あるいはむしろ、ちょっとした掘り出し物を見つけるスキルを手に入れることができるのです。
プロンプトワードこの文章の画像を生成するには、Xiaowa スキルを使用してください: GLM-5.2。この更新は、この文脈では特に価値があります。1M のコンテキストにより、モデルはより長いコードベースとインシデント資料を処理できます。MIT ライセンスとオープンソース重み付けにより、チームはプライベート展開、コスト管理、コンプライアンスレビューにおいてより柔軟に対応できます。 Agent 能力向上、特に研究開発効率の加速は、最も容易に実現できる方向性である。
もう一つ、引用文のような例を挙げましょう。
プロンプトワードシャオワのスキルを使って、この文章に合う画像を生成してください。偉大な夢は、待ったり叫んだりして得られるものではありません。それは、戦い、努力して勝ち取るものです。
プロンプトワードXiaowaスキルを使用して、この文章の画像を生成します: 一般 Agent 両端は繋がっていた。Agent 資料の理解に加え、ファイル、ブラウザ、画像生成、コード、ローカルエクスポートツールへのアクセスも可能です。PPT Skillをこのワークフローに統合することで、PPTプレゼンテーションの作成は「ツールを開く」作業から「タスクを割り当てる」作業へと変革されます。
これらの画像には既に「リトルディガー」のIPの特徴が表れており、オレンジ色の安全ヘルメット、ヘッドランプ、ゴーグル、三毛猫のパッチ、小さなつるはし、鉱山の坑道、トロッコなど、おなじみの特徴が見られる。
同じシリーズの複数の画像を見た読者は、これがコンセプトを掘り出している小さな鉱夫猫であることを覚えている可能性が高いでしょう。
コンテンツ制作は、テキストのみに基づく競争から、テキストと画像の組み合わせに基づく競争へと移行しつつある。
公式アカウント、ブログ、ナレッジベース、製品ドキュメント、コース教材など、あらゆる場面で、より頻繁かつ低コストな説明図解が求められています。多くのチームは既に… AI 最初の草稿を書く段階では、画像戦略とビジュアルスタイルが記事の印象的な要素となり始める。
Xiaohei Skillはまず、記事のどこに画像を含めるべきかを判断し、次に抽象的な視点、プロセス、状態、比喩を、分かりやすく手描きの解説図に変換します。コンテンツ制作者にとって、これは素材を急いで探したり、スクリーンショットを詰め込んだり、テンプレートのインフォグラフィックを使用したりするよりも、長期的な利用に適しています。
Xiaohei Skillは、長文記事による読解疲れ、画像スタイルの不統一、抽象的な概念の理解の難しさ、クリエイターにとって安定したビジュアルアセットの不足といった複数の課題を解決します。Xiaowaのような個人知的財産変換機能と組み合わせることで、アカウント独自のビジュアルアイデンティティシステムとしても機能します。
いつ AI 文章表現がより普及するにつれ、視点を明確に、興味深く、そして印象的に伝える能力が、コンテンツアカウントの新たな差別化要因となるだろう。
元のリンク:このGitHubの投稿は5000ものスターを獲得しており、添付された画像には実に素晴らしいスキルが示されています。