メニュー
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/deathrashed/agents --skill designコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Control the in-app Browser for opening, navigating, inspecting visible or interactive page state, clicking, typing, screenshots, and local web testing. It can have existing signed-in sessions. For semantic operations on linked resources, prefer a purpose-built connector, API, or CLI when available.
Control the user's Chrome browser for tasks that depend on existing Chrome state: tabs, logged-in sessions, or extensions. Prefer purpose-built connectors, APIs, or CLIs when available.
Control local Mac apps through Computer Use for tasks that require reading or operating app UI. Prefer purpose-built connectors, APIs, or CLIs when available.
SOC 職業分類に基づく
SKILL.md を表示中
| name | design |
| description | Design UI/UX with multiple modes (Designer Agent) |
Design request:
Task: {{args}}
| Mode | Trigger | Speed | Output |
|---|---|---|---|
| FAST | "fast", "quick" | 60-120s | Rapid mockup |
| GOOD | "good", "production" | 3-5min | Production-ready |
| UI | "ui", "visual" | 2-3min | Wireframes, layout |
| UX | "ux", "flow" | 2-3min | User flows |
| 3D | "3d", "three" | 3-5min | Three.js scene |
| DESCRIBE | "describe", "extract" | 1min | Extract from image |
| AUDIT | "audit", "wcag" | 2min | Accessibility check |
| SYSTEM | "system", "tokens" | 3min | Design tokens |
Quick mockup with:
Full implementation with:
// Three.js setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000);
// Orbit controls
const controls = new OrbitControls(camera, renderer.domElement);
// PBR Materials + HDR Lighting
const material = new THREE.MeshStandardMaterial({
map: texture,
roughness: 0.5,
metalness: 0.3
});
Output: 360° rotation, zoom/pan, color variants
Input: Screenshot/image path Output:
| Property | Value |
|---|---|
| Primary Color | #3B82F6 |
| Secondary | #10B981 |
| Font | Inter |
| Heading Size | 48px |
| Spacing | 8px grid |
| Border Radius | 8px |
backdrop-blur-md bg-white/10| Metric | Target | How |
|---|---|---|
| LCP | <2.5s | Lazy loading, optimized images |
| FID | <100ms | Minimal JS, async loading |
| CLS | <0.1 | Reserved space, font-display |
+-----------------------------------+
| [Logo] [Profile] |
|-----------------------------------|
| Hero Title |
| [ CTA Button ] |
|-----------------------------------|
| [Card 1] [Card 2] [Card 3] |
+-----------------------------------+
graph TD
A[Start] --> B{Condition}
B -- Yes --> C[Screen 1]
B -- No --> D[Screen 2]
C --> E[End]
interface ButtonProps {
variant: 'primary' | 'secondary' | 'ghost';
size: 'sm' | 'md' | 'lg';
}
Tailwind:
bg-blue-600 hover:bg-blue-700 text-whitegrid grid-cols-4 gap-4 auto-rows-[200px]backdrop-blur-md bg-white/10 border border-white/20Key Takeaway: Ship award-winning interfaces in minutes. WCAG + Lighthouse 90+ out of the box.