Communitygithub.com

Lutie デザインフィロソフィー & ビジュアルアート生成スキル

デザインフィロソフィー(美学運動)を定義し、それを元に高度なビジュアルアート(.png / .pdf)を生成します。ユーザーがポスターやアート作品、デザインなどを依頼した際に、熟練の職人技による芸術作品を制作します。著作権侵害を避けるため、既存のアーティスト作品を複製することはありません。

Lutie デザインフィロソフィー & ビジュアルアート生成スキル とは?

このスキルは、AIエージェント(Claude Code, Cursorなど)向けに設計された、デザインフィロソフィー(美学運動)の創出とその視覚表現を統合する高度なワークフローです。ユーザーから「ポスター」「アート」「デザイン」といった抽象的な依頼を受けた際、まず4~6段落からなる独自のデザインフィロソフィーを.mdファイルとして生成します。このフィロソフィーは、フォルム、空間、色彩、構成といった視覚的要素を詩的に定義し、作品に一貫性と深みを与えます。次に、そのフィロソフィーを解釈して、1ページの.pdfまたは.png形式のビジュアルアートを制作します。テキストは最小限に抑え、視覚的要素(図形、パターン、タイポグラフィ)が主役となるよう設計します。重要なのは「職人技の強調」であり、作品は何時間も掛けて丹念に作り込まれた、第一線のプロフェッショナルによる傑作であるかのような品質を要求します。また、作品内部に「微妙な概念的な参照(サブテーマ)」を埋め込むことで、見る人に直感的な気づきを与える高度な芸術性を実現します。対応プラットフォームはAIエージェント全般であり、./canvas-fonts ディレクトリからフォントを取得するなど、実際のツール操作も含みます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/agencelutie/LP-lutie/tree/main/skills-export/examples/canvas-design

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

デザインフィロソフィーの作成 - ビジュアル表現のための指針

これらの指示は、デザインフィロソフィー(美的運動)を作成し、それを視覚的に表現するためのものです。出力は、.mdファイル、.pdfファイル、.pngファイルのみとします。

以下の2ステップで完了します。

  1. デザインフィロソフィーの作成(.mdファイル)
  2. キャンバス上での表現(.pdfファイルまたは.pngファイル)

まず、以下のタスクに取り組みます。

デザインフィロソフィーの作成

はじめに、(レイアウトやテンプレートではなく)視覚的な哲学を作成します。これは以下の要素を通じて解釈されます。

  • フォルム、空間、色彩、構成
  • イメージ、グラフィック、シェイプ、パターン
  • 視覚的なアクセントとしての最小限のテキスト

重要な理解

  • 受け取るもの: ユーザーからの微妙な入力や指示。これを基盤として考慮しますが、創造的自由を制約してはいけません。
  • 作成するもの: デザインフィロソフィー/美的運動。
  • 次に行うこと: その後、同じバージョンがその哲学を受け取り、視覚的に表現します。成果物は90%がビジュアルデザイン、10%が必須テキストです。

以下のアプローチを考慮してください。

  • 芸術運動のためのマニフェストを書く。
  • 次のフェーズではアートワークを制作する。

この哲学は以下を強調する必要があります。視覚表現、空間的コミュニケーション、芸術的解釈、最小限の言葉。

視覚哲学の生成方法

運動に名前をつける(1~2語): 「ブルータリスト・ジョイ」 / 「クロマティック・サイレンス」 / 「メタボリスト・ドリームス」

哲学を明確に述べる(4~6段落、簡潔だが完全)。

視覚的な本質を捉えるため、哲学が以下のものを通じてどのように現れるかを表現します。

  • 空間とフォルム
  • 色彩と素材
  • スケールとリズム
  • 構成とバランス
  • 視覚的階層

重要なガイドライン:

  • 冗長性を避ける: 各デザイン要素は一度だけ言及します。色彩理論、空間関係、タイポグラフィの原則について、新たな深みを加えない限り繰り返さないでください。
  • 職人技を繰り返し強調する: 哲学は、最終作品が「何時間もかけて丹念に作り込まれた」「第一線のプロフェッショナルによる」ものに見えることを何度も強調しなければなりません。このフレーミングは不可欠です。「丹念に作り込まれた」「深い専門知識の産物」「細心の注意」「マスターレベルの実行」といったフレーズを繰り返し使用してください。
  • 創造的スペースを残す: 美的方向性については具体的に、しかし次のClaudeが解釈の選択を行えるよう、十分に簡潔で、かつ極めて高いレベルの職人技を維持できるようにします。

この哲学は、次のバージョンがアイデアをテキストではなく視覚的に表現するように導く必要があります。情報はデザインの中にあり、段落の中にはありません。

哲学の例

「コンクリート・ポエトリー」 哲学: 記念碑的なフォルムと大胆な幾何学によるコミュニケーション。 視覚表現: 巨大なカラーブロック、彫刻的なタイポグラフィ(巨大な単語、小さなラベル)、ブルータリスト的な空間分割、ポーランドポスターのエネルギーとル・コルビュジエの融合。アイデアは説明ではなく、視覚的な重みと空間的な緊張を通じて表現されます。テキストは稀で強力なジェスチャーとして配置され、段落は決して使わず、視覚アーキテクチャに統合された必須の単語のみ。あらゆる要素がマスタークラフトマンの精度で配置されます。

「クロマティック・ランゲージ」 哲学: 色彩を主要な情報システムとする。 視覚表現: 意味を生み出すカラーゾーンによる幾何学的な精密さ。タイポグラフィは最小限で、小さなサンセリフのラベルが色彩領域にコミュニケーションを委ねます。ヨーゼフ・アルバースの相互作用とデータ可視化の融合。情報は空間的かつ色彩的にエンコードされます。言葉は、色彩がすでに示していることを補強するためにのみ存在します。これは苦心の末の色彩調整の結果です。

「アナログ・メディテーション」 哲学: テクスチャと余白による静かな視覚的熟考。 視覚表現: 紙の質感、インクのにじみ、広大なネガティブスペース。写真とイラストレーションが支配的。タイポグラフィはささやくように(小さく、抑制され、視覚に奉仕する)。日本の写真集の美学。画像はページをまたいで呼吸します。テキストは控えめに現れ、短いフレーズのみで、説明的なブロックは決して使われません。各構成は瞑想実践のような注意深さでバランスが取られています。

「オーガニック・システムズ」 哲学: 自然なクラスタリングとモジュール状の成長パターン。 視覚表現: 丸みを帯びたフォルム、有機的な配置、建築を通した自然からの色彩。情報は視覚図、空間関係、アイコノグラフィによって示されます。テキストは空間に浮かぶ主要なラベルのみ。構成は、専門家による空間の調整を通じて物語を伝えます。

「ジオメトリック・サイレンス」 哲学: 純粋な秩序と抑制。 視覚表現: グリッドベースの精密さ、大胆な写真または無駄を削いだグラフィック、劇的なネガティブスペース。タイポグラフィは正確だが最小限 – 小さな必須テキスト、大きな静かなゾーン。スイスのフォルマリズムとブルータリストの素材の正直さの融合。構造が伝達し、言葉は伝達しません。すべての配置は無数の洗練の結果です。

これらは簡略化した例です。実際のデザインフィロソフィーは、4~6段落の充実したものにしてください。

必須の原則

  • 視覚哲学: デザインを通じて表現される美的世界観を作成する。
  • 最小限のテキスト: テキストはまばらで、必須のみ、視覚要素として統合され、決して長大にならないことを常に強調する。
  • 空間的表現: アイデアは空間、フォルム、色彩、構成を通じて伝えられ、段落ではない。
  • 芸術的自由: 次のClaudeが哲学を視覚的に解釈する – 創造的余地を提供する。
  • 純粋なデザイン: 装飾の付いた文書ではなく、アートオブジェクトを作る。
  • 専門家の職人技: 最終作品は丹念に作り込まれ、細心の注意を払って手間をかけられ、第一線のプロフェッショナルによる何時間もの作業の産物のように見えなければならないことを繰り返し強調する。

デザインフィロソフィーは4~6段落の長さにします。 核となるビジョンをまとめた詩的なデザイン哲学を記述します。同じポイントを繰り返すのは避けてください。デザインフィロソフィーは、アートの意図に言及せず、あたかもどこでも使用できるかのように汎用的に保ちます。デザインフィロソフィーを.mdファイルとして出力します。


微妙な参照の推測

重要なステップ: キャンバスを作成する前に、元のリクエストから微妙な概念的な糸を特定します。

必須の原則: トピックは、アート自体に埋め込まれた微妙でニッチな参照です。常に文字通りではなく、常に洗練されています。その主題に詳しい人は直感的にそれを感じ、他の人は単に達人的な抽象構成を体験します。デザインフィロソフィーは美的言語を提供します。推測されたトピックは魂を提供します – それはフォルム、色彩、構成に目に見えない形で織り込まれた静かな概念的なDNAです。

これは非常に重要です。参照は、作品の深みを高めるように洗練され、自己主張しすぎないようにする必要があります。ジャズミュージシャンが別の曲を引用するように考えてください。知っている人だけがそれに気づきますが、誰もが音楽を楽しむことができます。


キャンバスの作成

哲学と概念のフレームワークの両方が確立されたら、それをキャンバス上で表現します。少し時間を取り、思考を整理し、心を落ち着けてください。作成されたデザインフィロソフィーと以下の指示を使用して、専門家の職人技で哲学のすべての側面を具現化した傑作を作成します。

重要: あらゆる種類のコンテンツに対して、たとえユーザーが映画/ゲーム/本の何かをリクエストした場合でも、アプローチは洗練されている必要があります。これがアートであり、アマチュア的または漫画的なものではないという考えを決して見失わないでください。

美術館や雑誌に掲載される品質の作品を作成するには、デザインフィロソフィーを基盤として使用します。特に複数ページが要求されない限り、1ページで、視覚的に優れた、デザイン重視のPDFまたはPNG出力を作成します。一般的には、繰り返しパターンと完璧な形状を使用します。抽象的な哲学的なデザインを、あたかも体系的な観察のための科学のバイブルであるかのように扱い、意味を構築するための印の密集、反復要素、または層状のパターンという視覚言語を借りて、忍耐強い繰り返しを通じて持続的な鑑賞に報います。まばらで臨床的なタイポグラフィと体系的な参照マーカーを追加し、これが架空の学問分野からの図である可能性を示唆します。目に見えない主題を、観察可能な現象を記録するのと同じ尊敬の念で扱います。作品を、微妙に配置された単純なフレーズや詳細で固定し、意図的でまとまりのある限られたカラーパレットを使用します。分析的な視覚言語を使用して人間の経験についてのアイデアを表現するというパラドックスを受け入れます。その結果は、儚いものが注意深い観察を通じて研究され、マッピングされ、理解できることを証明する工芸品のように感じられるべきです。これこそが真のアートです。

文脈要素としてのテキスト: テキストは常に最小限で視覚優先ですが、文脈に応じて、それが囁くようなラベルであるか、大胆なタイポグラフィのジェスチャーであるかを判断します。パンク会場のポスターは、ミニマリストの陶芸スタジオのアイデンティティよりも大きく、より攻撃的なタイプを持つかもしれません。ほとんどの場合、フォントは細くする必要があります。フォントの使用はすべてデザイン重視で、視覚的なコミュニケーションを優先する必要があります。テキストのスケールに関係なく、ページから落ちるものや重なるものはありません。すべての要素は、適切なマージンでキャンバス境界内に含まれている必要があります。すべてのテキスト、グラフィック、視覚要素に余裕と明確な分離があることを注意深く確認します。これはプロフェッショナルな実行のために譲歩できない要件です。重要: テキストを書く場合は異なるフォントを使用します。 ./canvas-fonts ディレクトリを検索します。アプローチに関係なく、洗練さは譲歩できません。

これを実現するために必要なフォントをダウンロードして使用します。タイポグラフィ自体をアートの一部にすることに創造性を発揮してください。アートが抽象的な場合、フォントをデジタルで組版するのではなく、キャンバス上に持ち込みます。

限界を押し広げるために、哲学を指針として使用しながら、デザインの本能/直感に従います。究極のデザインの自由と選択を受け入れます。美学とデザインを最先端に押し上げます。

重要: AI生成ではなく、人間が作り出した品質を達成するために、何時間もかけて作られたように見える作品を作成します。あたかもその分野の絶対的なトップにいる誰かが、細部に至るまで丹念に手間をかけたように見せかけます。構成、間隔、色彩の選択、タイポグラフィなど、すべてが専門家レベルの職人技を叫んでいることを確認します。何も重なっておらず、フォーマットに欠陥がなく、すべての詳細が完璧であることを再確認します。専門知識を証明し、紛れもなく印象的であると言えるような作品を作成します。

最終結果を、使用したデザインフィロソフィー(.mdファイル)と共に、単一のダウンロード可能な.pdfまたは.pngファイルとして出力します。


最終ステップ

重要: ユーザーはすでに「それは十分に完璧ではありません。プリズムのようにきれいで、職人技の傑作であり、まるで美術館に展示されるかのようなものでなければなりません。」と言っています。

重要: 作品を洗練するために、グラフィックを追加するのではなく、作成されたものを洗練し、非常にシャープにして、デザインフィロソフィーとミニマリズムの原則に完全に従うようにします。楽しいフィルターを追加したり、フォントをリファクタリングしたりするのではなく、既存の構成をどのようにアートとよりまとまりのあるものにするかを考えます。新しい関数を呼び出したり、新しい形状を描いたりしたいという衝動に駆られたら、止まって、「すでにあるものをどのようにアート作品としてより高めることができるか?」と自問します。

2回目のパスを取ります。コードに戻り、さらに洗練/研磨して、これを哲学的にデザインされた傑作にします。

複数ページオプション

追加のページが要求された場合、デザインフィロソフィーに沿って、明確に異なるクリエイティブなページを作成します。それらのページを同じ.pdfまたは複数の.pngにバンドルします。最初のページを、コーヒーテーブルブック全体の単なる1ページとして扱い、それが埋められるのを待っています。次のページを、オリジナルのユニークなひねりと記憶として作成します。非常にセンスの良い方法で、ほとんど物語を語るようにします。完全な創造的自由を行使します。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

agencelutie/LP-lutie

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

agencelutie/LP-lutie

Submit expense reimbursements through Benepass (app.getbenepass.com). For users whose employer uses Benepass as their benefits platform. Handles login, benefit selection, form filling, receipt upload, and submission. Requires browser/computer-use capabilities.

agencelutie/LP-lutie

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

agencelutie/LP-lutie

Make a phone call to book an appointment or reservation. Checks calendar first, gets explicit consent before dialing, discloses AI identity on the call, and adds the booking to calendar when done.

agencelutie/LP-lutie

Cancel a subscription or unsubscribe from a service. Works from a description, a pasted charge line, a URL, or a photo/screenshot. Can also audit a full statement for recurring charges and cancel several at once. Finds the right contact method and handles the cancellation — including phone calls.

agencelutie/LP-lutie

Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.

agencelutie/LP-lutie

Help plan an event — from a birthday dinner to a wedding. Scales to the size of the occasion. Handles venue research, guest lists, timelines, vendors, and budgets.

agencelutie/LP-lutie

Help submit an expense or reimbursement on any platform. Detects the right tool (Benepass, Brex, Concur, Expensify, etc.), finds receipts, checks for duplicates, and walks through submission.

agencelutie/LP-lutie

Handle small bureaucratic tasks — jury duty responses, parking tickets, passport renewals, DMV forms, permit applications, and other government or administrative paperwork.

agencelutie/LP-lutie

Run financial calculations and scenario comparisons — tax estimates, loan comparisons, retirement projections, rent vs. buy, investment scenarios, and more. Pure math, no accounts or logins needed.

agencelutie/LP-lutie

Help order groceries for delivery. Concierge-style flow — store selection, occasion-based list building, budget tracking, and cart assembly.

agencelutie/LP-lutie

Help find and book a service provider for a task — cleaning, handyman, moving, assembly, yard work, errands, etc. Searches TaskRabbit, Handy, Thumbtack, and similar platforms.

agencelutie/LP-lutie

A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).

agencelutie/LP-lutie

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

agencelutie/LP-lutie

Help order food timed to arrive at a specific time. Works backward from target arrival, suggests restaurants, builds cart, and monitors delivery.

agencelutie/LP-lutie

Refill a prescription at a pharmacy. Works from a medication name, an Rx number, a photo of the bottle, or just "I'm running low." Confirms exactly what's being requested, gathers everything the pharmacy will ask for up front, and handles the refill online or by phone — whichever is fastest.

agencelutie/LP-lutie

Help return an item or request a refund from any retailer. Identifies the item, finds the return policy, navigates the process, and handles shipping labels or phone calls.

agencelutie/LP-lutie

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

agencelutie/LP-lutie

Landing page quality assessment for paid advertising campaigns. Evaluates message match, page speed, mobile experience, trust signals, form optimization, and conversion rate potential. Use when user says "landing page", "post-click experience", "landing page audit", "conversion rate", or "landing page optimization".

agencelutie/LP-lutie

Generate structured landing page copy with hero, body, proof, and CTA sections. Framework-agnostic - adapts approach based on awareness level and offer type.

関連スキル