mcpField
T
to-artifact

to-artifact

github.com/angusfretwellデザイン・UI147 回インストール2 日前に更新
リポジトリ

to-artifact について

to-artifactは、指定されたハウススタイルに沿って根拠のあるページを制作・公開するスキルです。デザイナーやコンテンツ制作者向けに、テーマ選定から論旨の構成、レンダリング、テーマと狭い画面での確認までを案内します。

主な機能

  1. 01テーマの選定と根拠の確認
  2. 02読者に沿った論旨とページ構成
  3. 03指定スタイルとスタイルシートの適用
  4. 04ライト・ダークテーマと狭幅表示の確認
  5. 05レンダリング、修正、公開

活用シーン

  1. 01根拠に基づくプロジェクトや課題のページ制作
  2. 02資料を概要読解と監査の経路に整理
  3. 03テーマや狭い画面でのページ表示確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/angusfretwell/skills --skill to-artifact

インストール後、Claude Code で/to-artifactを入力して読み込まれたか確認します。

同梱ファイルassets/style.cssreferences/design.md

詳細

成果物は、ハウススタイルに沿って公開するArtifactです。

デザインに取りかかる前に artifact-design と humanize を読み込み、チャートを書く前に dataviz を読み込んでください。references/design.md にはハウススタイルが記載されています。すなわち、文体、使用する書体と色、それらを設定するスタイルシート、そして避けるべきお決まりの手法です。ページ内のすべての文言は humanize に従います。

1. 主題を決める

主題が示されている最初の情報源から主題を特定します。呼び出しで指定された対象、このセッションで議論されている主題、現在のタスクに関連する PR または issue のいずれかです。すべての情報源が空なら、質問してください。

主題が1行で書かれ、それを裏付ける資料が手元にある状態になれば完了です。

2. 読者の目的を定める

デザインに取りかかる前に、利用可能な資料をすべて確認します。次の点を非公開で明確にしてください。

  • 誰が、どのような状況でこれを開き、何を判断または理解するのでしょうか?
  • 最も強く裏付けられている答えは何でしょうか?
  • その答えの信頼性を高める根拠は何でしょうか?
  • 解釈に影響するトレードオフ、不確実性、制約は何でしょうか?
  • 最初に読む際の妨げにならない形で、監査のために残しておくべき情報は何でしょうか?

事実、単位、日付、情報源、数式、矛盾、不明点、プライバシー上の制約を整理します。観察、導出、予測、推奨、因果関係を区別してください。意図、所有権、緊急性、確実性、期限、承認、将来の行動、機密性を捏造してはいけません。

情報源の順序ではなく、読者のニーズに沿って並べます。2つの読み方に対応させてください。エグゼクティブ向けの読み方では、タイトル、見出し、決定的な数値、キャプション、結論から論旨を素早く把握できるようにし、監査向けの読み方では、正確な表、前提、方法論、注意点、情報源を残して記録を保存します。

論旨を書き出せば完了です。つまり、読者の疑問、最も強く裏付けられた答え、その答えを信頼できるものにする根拠を明確にします。各セクションは、ほかのセクションでは答えていない読者の疑問に答えるものとし、すべての主張には根拠の置き場所を1つだけ設けてください。後半の表で正確な情報を参照できるようにしてもかまいませんが、別の要約、チャート、結論で、同じ答えを同じ目立ち方で繰り返してはいけません。

3. 作成して確認する

論旨に合わせて構成を決めます。最初の画面には、マストヘッドや導入ではなく論旨を置きます。その後は、資料にふさわしい内容を構成してください。references/design.md から書体、色、文体を採用し、指定どおりに assets/style.css をページの隣に公開します。そこに挙げられているお決まりの手法は一切使わないでください。

公開したページをレンダリングし、ライトテーマとダークテーマ、狭い画面幅で確認します。

  1. **最初に読むとき:**最初の画面しか見ていない読者は、タイトルや雰囲気ではなく、中心となる関係性、判断、またはツールを覚えているでしょうか?
  2. **簡潔さ:**意味、操作性、リズムを損なわずに省ける面、境界線、ピル、アイコン、ラベル、色、段落、セクションはないでしょうか?あれば取り除いてください。
  3. **テーマとリフロー:**ライトテーマとダークテーマで、階層とコントラストは同等でしょうか?また、はみ出したり、文字単位で改行されたりせずに、ページが再構成されるでしょうか?

影響が最も大きい不備を修正し、もう一度レンダリングして、同じ確認を繰り返します。

スタイルシートをページの隣に置いて公開し、レンダリング結果が3つの確認項目すべてを満たし、ユーザーにページそのものを渡せる状態になれば完了です。このレビューは内部向けです。スコア、作業記録、自己批評は提出しないでください。

コメント