artifact-design｜AIスキル大辞典

このSkillでできること

✓Artifactツールで公開するページのデザイン方針と基礎を整理する
✓主題や読者に合わせた配色、タイポグラフィ、レイアウトを設計する
✓CSS・JavaScript・データ・画像を含む自己完結HTMLとして構成する
✓ライト／ダークテーマや、必要に応じたライブラリ利用方針を設計する

使い方

STEP 1

公開するページを作成する前に、このスキルを読み込む

STEP 2

既存のデザインシステムやテーマがあれば、ユーザーの指示に次ぐ優先順位で適用する

STEP 3

ページの主題、対象読者、単一の目的を定め、実際の内容を使って設計する

STEP 4

ページの用途に応じて実用的または編集的な表現を選び、過剰な装飾を避ける

Skillのインストール

AIにこのSkillを追加してもらう

GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。

このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。

Repository:
https://github.com/IsuruMaduranga/one-code

手動でインストールする

README / SKILL.mdから機械抽出できたコマンドのみ表示しています。推測したコマンドではありません。

npm install -g @one-ai/one-code
cd your-project
onecode

git clone https://github.com/IsuruMaduranga/one-code
cd one-code
npm install
cd ..
pi install ./one-code
pi list

このSkillを使うプロンプト例

Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。

Artifactツールで公開する自己完結HTMLページを設計してください。主題、対象読者、ページの目的に合う配色、タイポグラフィ、レイアウト、ライト／ダークテーマを検討し、既存のデザインシステムがあれば優先してください。

出力例を見る

主題に固有の内容を用い、適切なタイポグラフィ階層、余白、配色を備えた自己完結HTMLページの設計案。

安全性チェック

自動解析による参考情報です。Skillの安全性を保証するものではありません。

外部API通信検出あり

Shellコマンド実行明確な記述なし

ファイル読み取り明確な記述なし

ファイル書き込み明確な記述なし

ネットワークアクセス検出あり

認証情報明確な記述なし

検出根拠を見る

network: independent, open-source implementation built on [pi](https://github.com/earendil-works/pi). It recreates the coding workflow; features that depend on C
network: eas behind the project, read [Harness Engineering 101](https://isuruwijesiri.com/harness-engineering-101/). The sixteen-chapter series starts with a smal

artifact-design

このSkillでできること

使い方

Skillのインストール

AIにこのSkillを追加してもらう

このSkillを使うプロンプト例

安全性チェック

関連Skill

verify-wink

od-contribute

agent-device