AI Services Market
AI Services Market › スキルファクトリー › その他 › Slate Admin Console
$4.99 · サインイン不要v1.0.0– 回表示

Slate Admin Console

チームが実際に運用できるバックオフィス

すっきりしたスレートグレーの管理コンソールをレイアウトします。サイドバーナビゲーション、絞り込み可能なデータテーブル、スライドオーバーの詳細パネル、そして開発者が推測なしに構築できる完全なデザイン仕様を備えます。

Slate Admin Console のプレビュー
こんな方におすすめ
社内ツールを構築する創業者、プロダクトマネージャー、開発者の皆さま
所要時間
~45分
レベル
中級

3ステップでインストール

登録不要。CLIツールも不要です。お使いのAIを選んで、1行コピーして貼るだけです。

Pro — 全511件のスキル

ご自分で入れたい場合は、スキルを購入($4.99)し、購入完了画面からZIPをダウンロードして、上のディレクトリに展開し、AIのセッションを再起動してください。結果は同じです。すでに購入済みの場合は、AIアシスタントにダウンロードしてもらうこともできます。

パックの内容

SKILL.md(手順書)1点とスターターテンプレート1点が入っています。プレビューはこちらです:

Slate Admin Console

When to use

  • You're building an internal admin console — users, orders, content moderation, support tickets — and the current UI is a pile of unstyled tables
  • Your team keeps asking "where do I find X?" because navigation grew organically and nothing is grouped
  • A dashboard shows the right numbers but nobody can act on them — no filters, no bulk actions, no drill-down
  • You're redesigning a legacy back office that only its original author can operate
  • You need a console design spec a developer can build from without a week of back-and-forth

Workflow

  1. Map the jobs (input: who uses the console → output: job list + primary screens)
    List every user role (admin, support agent, moderator, finance) and the 2–3 jobs each does daily. Each job becomes a screen or a view: "find a user and refund an order" beats "user management module". Cut anything no role does weekly — admin consoles bloat because every edge case gets a permanent menu item. The output is a short job list with the primary screen for each, not a feature wishlist.
  2. Structure the navigation (input: job list → output: sidebar map)
    Group screens into 4–6 sidebar sections max, each with 2–5 items. Put the daily jobs at the top, settings and audit logs at the bottom. Use plain nouns ("Users", "Orders", "Content", "Settings") — no clever labels, no jargon. Add a global search in the top bar that jumps to any record by ID, email, or name: in a console, search is navigation. The sidebar collapses to icons on narrow screens but never hides search.
  3. Design the list views (input: sidebar map → output: table spec per screen)
    Every list screen follows the same pattern: filter bar on top (search + 2–4 most-used filters + date range), a table with the columns people actually scan, row actions on hover, and bulk actions when rows are selected. Default sort is newest-first or most-urgent-first — never alphabetical by ID. Cap visible columns at 6–8; the rest live in the detail panel. Status gets a colored pill (one color per status, consistent across the whole console), never bare text.
  4. Design the detail panels (input: table spec → output: detail panel spec)
    Clicking a row opens a side panel (slide-over), not a full page reload — the list stays visible behind it so context survives. The panel leads with identity (name, ID, status, created date), then the fields grouped in sections, then the timeline of everything that happened to this record, then the actions. Destructive actions (delete, ban, refund) sit at the bottom, require a confirmation step, and state exactly what will happen. Every action writes a line to the timeline: who, when, what changed.
  5. Apply the slate system (input: screens + panels → output: complete design spec)
    The visual language: slate-gray neutrals (background #f1f5f9-ish light or #0f172a-ish dark, panels white/slate-800, borders slate-200/700), one accent color reserved for primary actions and active states, one font family, 8px spacing grid, 4px radius on inputs and cards. Dense but not cramped: 14px base text, 40px row height, generous cell padding. Deliver the spec as: sidebar map, per-screen table spec (columns, filters, sorts, row/bulk actions), detail panel spec, and the color/type/spacing tokens — enough for a developer to build it without guessing.

テンプレートのプレビュー

Slate Admin Console — Design Spec Template

One document per console. A developer should be able to build from this without guessing.

Product: {console name}

Users & their daily jobs:

Cut list (requested but nobody does it weekly): {item} — {why it was cut}

Sidebar map (4–6 sections)

  1. {Section} — {Item}, {Item}, {Item}
  2. {Section} — {Item}, {Item}
  3. {Section} — {Item}, {Item}
  4. {Section} — {Item}
  5. Settings — {Item}, {Item}
  6. Audit log — {Item}

Top bar: global search — "Jump to {record}, {record}, {email}…" · Collapse: icons on narrow screens, search always visible.

List view spec (one per screen)

Screen: {name}

スキルパック本体(SKILL.md とテンプレート)は英語で書かれています。

Pro — 全511件のスキル

こちらもおすすめです