菜单
Reference DESIGN.md for developer database UIs: forest-green leaf brand, deep slate chrome, dashboard-first density with marketing surfaces in light editorial. Use when building UI components, applying design tokens, or implementing visual styles for data dense mongodb.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Choose a 3D generation or reconstruction pipeline given input type, output format, and use case. Use when you need help with 3d pipeline.
|. Use when you need help with 8 bit orbit video template.
Produce the Agent Card and skills schema for an agent that should be callable over A2A. Use when you need help with a2a agent spec.
Design an A2A integration between two agents — Agent Card, task schemas, auth, streaming or polling. Use when you need help with a2a integrator.
Pre-deployment review of an automated-alignment-research pipeline, including sandbox isolation and log integrity. Use when you need help with aar deployment review.
Design an LLM A/B test — pick platform (Statsig or GrowthBook), primary metric, guardrails, sample size with LLM-noise buffer, CUPED, sequential stopping, and multiple-comparison correction. Use when you need help with ab plan.
| name | acd-data-dense-mongodb-design |
| description | Reference DESIGN.md for developer database UIs: forest-green leaf brand, deep slate chrome, dashboard-first density with marketing surfaces in light editorial. Use when building UI components, applying design tokens, or implementing visual styles for data dense mongodb. |
You are an expert in the MongoDB — Data-Dense Atlas aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.
Reference DESIGN.md for developer database UIs: forest-green leaf brand, deep slate chrome, dashboard-first density with marketing surfaces in light editorial.
The cluster is the page. Marketing reads like a developer brochure — light backgrounds, generous whitespace, code panels framed as the hero. The Atlas console flips to deep slate so collection counts, IOPS sparklines, and shard maps stay legible across long on-call windows. One forest-green leaf earns the brand moment; everything else is slate, ink, or a measured chart hue.
Mood: technical, enterprise-trustworthy, never decorative.
/* marketing surface — light */
--bg: #ffffff
--bg-alt: #f9fafb
--surface: #f3f5f4 /* tinted leaf wash */
--text: #001e2b /* slate ink */
--text-muted: #5d6c74
--border: #e1e7e4
/* in-app shell — slate */
--bg-app: #001e2b /* MongoDB slate */
--bg-app-alt: #023430
--surface-app: #0a3a3f
--surface-app-2: #112c33
--text-app: #ffffff
--text-app-muted: #c1c7c6
--border-app: #1c4a4f
/* brand */
--accent: #00ed64 /* leaf green, primary CTA + brand */
--accent-hover: #00c757
--accent-deep: #00684a /* forest, ink-on-light variant */
--accent-soft: #c0fae6 /* tinted callouts */
/* status */
--status-ok: #00684a
--status-warn: #b45309
--status-error: #db3030
--status-info: #016bf8
/* categorical chart palette — preserve order */
--chart-1: #00684a /* forest */
--chart-2: #016bf8 /* electric blue */
--chart-3: #b45309 /* amber */
--chart-4: #889397 /* slate gray */
--chart-5: #00d2ff /* cyan */
--chart-6: #db3030 /* error red */
--chart-7: #5d4caf /* indigo */
--chart-8: #00ed64 /* leaf — reserve for highlight */
Rule: leaf green is reserved for primary action and the brand mark. On dashboards, the deep --accent-deep carries text that needs to read as "MongoDB-flavored" without screaming. Status hues are reserved for state; never reuse for arbitrary series.
Euclid Circular A, fallback Inter, fallback system. Weight 400/500/700.Source Code Pro, fallback JetBrains Mono, SF Mono. Used for query syntax, log lines, document JSON, shell prompts.Scale: 11 / 12 / 14 / 16 / 18 / 22 / 28 / 36 / 48 / 64.
Body lines hold a measure of 65–72 characters on marketing pages; in-app rows ignore measure and let tables breathe to viewport.
Buttons
--accent, slate text, radius 6px, padding 10/18, weight 500.--border, slate text. Hover: --surface.--text-app-muted, white text.--status-error fill, white text, only on confirm modals.Cards / dashboard tiles
--border, radius 8px, 24px padding.--surface-app fill, 1px --border-app, radius 6px, 16px padding. Eyebrow in 11px uppercase tracked +4%.--accent border on app tiles. No shadow, no lift.Inputs
--accent ring with 1px offset.--bg-app-alt fill on light surfaces — terminal-in-page treatment.Tables
Charts
--text-app-muted 11px. Gridlines --border-app at 30% opacity.--chart-1..8 declared order. Legend chips top-right with 8px swatch.--bg-app fill, white text, 1px --accent-deep border, radius 4px.Flat. Border + tonal shift only. Modals get 0 16px 48px rgba(0, 30, 43, 0.32) over a 60% slate scrim. Tooltips lift via 1px accent border, not shadow. Marketing cards get a single 0 1px 2px rgba(0, 30, 43, 0.04) for soft definition only.
Do
#001e2b. Light marketing only.db.collection.aggregate(...) block, not stock photography.Don't
Bias: deep slate #001e2b app shell paired with light marketing, leaf green #00ed64 primary action, Euclid Circular A with tabular numerals, 6–8px radii, eight-color categorical chart palette in declared order, dense 32px table rows, persistent left nav, hairline-only borders, code panels as the hero artifact.
Reject: light-mode dashboards, multi-color brand palettes, gradient chart fills, rounded "bubble" tiles, proportional numerals on metrics, hero illustrations in place of code, decorative emoji in chrome, "growth-marketing" pastel washes.