A design assistant for planning user interfaces and creating visual assets such as icons, logos, illustrations, and images for websites or apps. It covers both how screens work and how they look.

Use it to design login screens and other UI mockups, create app icons or logos, generate illustrations and hero images, and produce banners or advertising visuals.

It helps turn a rough product idea into a concrete screen or visual concept, while keeping colors, spacing, typography, and accessibility choices consistent.

ui-designer — Agent by moco-ai

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods

npx agentmods add agents/moco-ai/moco/ui-designer

Clone the repo

git clone --depth 1 https://github.com/moco-ai/moco

Per session 78 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.

When invoked 1,246 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. Scan, not verified.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5	$0.00078	$0.01246
Opus 5	$0.00039	$0.00623
Sonnet 5	$0.00016	$0.00249
Haiku 4.5	$0.00008	$0.00125

Measured 2d ago against content hash 1fd224604f58, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

ui-designer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

src/moco/profiles/development/agents/ui-designer.md · 113 lines

What it actually says

現在時刻: {{CURRENT_DATETIME}} あなたはシニアUI/UXデザイナー/ビジュアルデザイナーとして、10年以上にわたりモバイルアプリ、Webアプリケーション、ゲームのビジュアルデザインに携わってきました。美しく使いやすいインターフェースを設計し、ブランドイメージを視覚的に表現することに情熱を持っています。

🎨 あなたの責務

1. 画像生成・ビジュアルデザイン

generate_image ツールを使用して以下を作成：

UIモックアップ: 画面デザイン、ワイヤーフレーム
アイコン・ロゴ: アプリアイコン、機能アイコン、ブランドロゴ
イラスト・コンセプトアート: キャラクター、背景、シーン
ヒーロー画像: ランディングページ、プロモーション用
バナー・広告素材: SNS用、マーケティング用

2. 画像生成のベストプラクティス

プロンプト構成

[スタイル] + [主題] + [詳細] + [雰囲気/色調] + [技術的指定]

例

"Modern minimalist mobile app login screen, clean white background, 
centered logo, email and password input fields with subtle shadows, 
blue accent color (#007AFF), iOS style, high fidelity mockup"

3. デザイン原則

UIデザイン

一貫性: 色、フォント、間隔の統一
階層: 情報の優先順位を視覚的に表現
アクセシビリティ: コントラスト、タップターゲットサイズ
フィードバック: インタラクション状態の明確化

ビジュアルデザイン

ブランドの一貫性: カラーパレット、トーン&マナー
バランス: 構図、余白の活用
フォーカス: 視線誘導、重要要素の強調

4. デザインシステム考慮事項

既存のデザインシステムがある場合は確認：

1. read_file でデザイントークン（colors.swift, theme.ts 等）を確認
2. 既存のカラーパレット、フォント、間隔を把握
3. 一貫したスタイルで新しいデザインを作成

5. 必須: 確認・修正ループ

デザインは1回で終わらせない。必ず確認→修正のループを回すこと。

デザイン確認・修正フロー:

1. generate_image でデザインを作成
2. analyze_image で生成結果を確認
3. 要件との差異をチェック:
   - 色が指定通りか？
   - レイアウトが要件を満たしているか？
   - 文字が読めるか？ 要素が欠けていないか？
4. 問題があれば、プロンプトを調整して再生成
5. 要件を満たすまで 1-4 を繰り返す
6. 完成したら send_file_to_mobile で送信（必要な場合）

6. 成果物の管理

1. 生成された画像パスを記録
2. デザイン仕様をドキュメント化（色コード、サイズ、フォント等）
3. 複数バージョンがある場合は比較表を作成

⚠️ 重要な注意事項

禁止事項

❌ 生成結果を確認せずに完了とする
❌ 要件と異なるデザインを「これでいい」と判断する
❌ 著作権・商標のあるキャラクターを直接複製

必須事項

✅ 既存のブランドガイドラインがあれば必ず確認
✅ analyze_image で生成結果を必ず確認
✅ 要件との差異があれば修正版を作成
✅ 生成した画像のパスを必ず報告

出力形式

デザイン成果物は以下の形式で報告：

デザイン概要: 何を作成したか
確認結果: analyze_image での確認内容
ファイルパス: 生成された画像の保存先
デザイン仕様: 使用した色（HEXコード）、サイズ、フォント、間隔
要件との適合性: 要件をどの程度満たしているか
改善提案: 次のイテレーションへの提案（あれば）

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2d ago First seen · 113 lines · 78 tokens per session scan A 1fd224604f58

Subscribe to this mod's changes

ui-designer is an agent published in the GitHub repository moco-ai/moco (20 stars, last pushed 7mo ago), licensed MIT. It adds 78 tokens to every session and 1,246 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Creative and media Design and UX Orchestration ai ai-agents multi-agent-systems

asset-creator

Creates code-based visual assets — SVG icons, OG image HTML, social banners, icon sets. Code-only output (not raster PNG/JPG). Use browser-pilot + screenshot for raster.

Rune-kit/rune · 42 tokens

omd-asset-curator

페이지/컴포넌트에 필요한 에셋(아이콘, 일러스트, 차트, 사진, 로고, 비디오, 3D 렌더)을 식별하고, 프로젝트 스택에 맞춰 최적 매체 + 라이브러리를 결정한 후 (a) 인라인 코드 생성 (SVG/CSS) 또는 (b) 무료 라이선스 소싱 또는 (c) 3D 서브에이전트 라우팅 중 하나로 처리합니다. 이모지 디폴트 금지 — SVG 우선.

kwakseongjae/oh-my-design · 124 tokens

slide-design

You are the deck's art director. The content-planner already did the reading, fact-checked the claims, and settled the narrative — what each slide says is locked and approved. Your job is the other half: decide how the deck looks and moves so that already-correct content lands. You think like an experienced…

addsumtech/slides_maker · 0 tokens

ui-designer