Agent Skills › fanfan-de/anybox › obsidian-like

obsidian-like

GitHub

用于设计类 Obsidian 风格的桌面应用设置界面，涵盖偏好、插件及配置页。强调安静、低对比度布局，包含左侧分组导航栏与右侧内容区，采用中性色表面、圆角面板及紧凑控件，营造原生应用质感。

.agents/skills/obsidian-like/SKILL.md fanfan-de/anybox

Trigger Scenarios

需要构建桌面应用设置或偏好页面要求生成具有 Obsidian 风格的 UI 组件或 CSS 设计插件管理、账户配置等密集控制面板

Install

npx skills add fanfan-de/anybox --skill obsidian-like -g -y

More Options

Non-standard path

npx skills add https://github.com/fanfan-de/anybox/tree/master/.agents/skills/obsidian-like -g -y

Use without installing

npx skills use fanfan-de/anybox@obsidian-like

指定 Agent (Claude Code)

npx skills add fanfan-de/anybox --skill obsidian-like -a claude-code -g -y

安装 repo 全部 skill

npx skills add fanfan-de/anybox --all -g -y

预览 repo 内 skill

npx skills add fanfan-de/anybox --list

SKILL.md

Frontmatter

{
    "name": "obsidian-like",
    "description": "Design desktop application settings, preferences, plugin management, and configuration screens in a quiet Obsidian-like visual style. Use when Codex needs to build, restyle, critique, or generate prompts\/CSS\/components for settings UI with a left navigation sidebar, neutral surfaces, subtle dividers, rounded setting panels, compact controls, and purple accent actions."
}

Obsidian Like

Core Direction

Create a mature desktop productivity settings interface: quiet, utilitarian, low contrast, spacious, and component-driven. Favor the feel of a native app preferences window over a marketing page or decorative web dashboard.

Use this style primarily for:

Settings and preferences pages
Account, update, language, editor, appearance, hotkey, plugin, sync, and advanced configuration screens
Desktop app dialogs with persistent navigation and dense repeated controls
Frontend prompts that need an Obsidian-like settings aesthetic

Layout

Use a two-pane desktop layout.

Left sidebar width: 280px to 300px
Sidebar background: near-white gray, such as #fbfbfb or #fafafa
Main background: #ffffff or very light neutral
Divider between sidebar and content: 1px solid #dedede or softer
Main content max width: 880px to 920px
Main content horizontal padding: 56px to 72px on desktop
Top/right close action: small gray X icon button with minimal hover feedback

Keep the main content aligned with generous whitespace. Do not fill the whole width with dense cards unless the product already uses that pattern.

Sidebar

Build the sidebar as grouped navigation.

Group labels: small, muted, gray text; examples: Options, Core plugins, Third-party plugins
Nav rows: icon plus label, about 32px high
Icons: thin line icons, dark gray, approximately 18px
Text: 14px to 15px, dark gray
Selected item: light gray rounded rectangle, 5px to 6px radius, no strong accent color
Group spacing: visibly separate groups with vertical gaps around 28px to 36px

Use the accent color sparingly; the selected sidebar state should usually be neutral, not purple.

Content Sections

Structure content as section headings followed by grouped setting panels.

Section title: 18px to 20px, weight 600, near-black
Section spacing: 28px to 36px between major groups
Panel background: #fafafa, #f8f8f8, or equivalent neutral surface
Panel radius: about 12px
Panel padding: 24px
Panel shadow: none, or a barely perceptible border/shadow only if needed for separation
Internal dividers: 1px solid #e2e2e2

Do not nest cards inside cards. A settings panel may contain rows, but rows should not become separate decorative cards.

Setting Rows

Each setting row should feel scannable and compact.

Row height: usually 72px to 96px, depending on description length
Left side: setting title and helper text
Right side: control aligned vertically center
Title: 15px to 16px, medium or regular weight, near-black
Description: 13px to 14px, muted gray, compact line height
Links inside descriptions: purple accent, no default underline

Keep controls close to the right edge of the panel. Leave enough text width so Chinese and English labels do not wrap awkwardly.

Row-First Settings Standard

When restyling an existing desktop settings page, prefer the row-first pattern used by the Appearance settings:

Use one light neutral rounded panel per related setting group, usually #fafafa with 8px to 10px radius.
Inside the panel, use rows separated by 1px solid #dedede; do not create separate cards for individual settings.
Each row uses a two-column grid: left minmax(0, 1fr), right 156px to 220px, with 18px to 32px column gap.
Row padding should be around 16px 0 inside a 24px padded panel. Minimum row height should be about 76px.
Left copy uses a title and optional helper description. Title: 15px, weight 500, color near #1f1f1f. Description: 13px, color around #6d6a66, line-height around 1.45.
Right controls are compact and right-aligned. Selects are about 34px tall, light gray (#eeeeee) with a #d9d9d9 border and 6px radius. Buttons are also about 34px tall.
Toggles should appear as the right-side control of a row, not as a separate decorative card. Hide nonessential leading icons in setting rows when the Appearance page standard is being used.
On narrow screens, collapse rows to a single column and stretch the control to the row width.

This pattern should be used for preference-style pages such as General, Appearance, Developer, update settings, language settings, and other app preferences. Do not force dense management surfaces such as provider catalogs, model lists, archived session lists, or marketplace directories into this pattern when their data needs richer list or table treatment.

Controls

Use familiar desktop controls with restrained styling.

Primary buttons: purple background near #8b5cf6 or #8f63e9, white text, 6px radius
Secondary buttons: white background, light gray border, dark text, 6px radius
Buttons: compact height around 34px to 38px; no oversized CTA styling
Select inputs: white background, light gray border, subtle radius, native or simple arrow
Toggles: capsule track; purple when on, gray when off, white thumb
Icon-only controls: use line icons and tooltips when the action is not obvious

Use purple only for affirmative, active, or link states. Avoid using it as a broad background or decorative gradient.

Visual Tokens

Start from these tokens and adapt to the host codebase:

:root {
  --obs-bg: #ffffff;
  --obs-sidebar-bg: #fafafa;
  --obs-surface: #f8f8f8;
  --obs-surface-subtle: #fbfbfb;
  --obs-border: #dedede;
  --obs-border-subtle: #e7e7e7;
  --obs-text: #1f1f1f;
  --obs-text-muted: #666666;
  --obs-text-faint: #8a8a8a;
  --obs-accent: #8b5cf6;
  --obs-accent-hover: #7c4fe8;
  --obs-radius-panel: 12px;
  --obs-radius-control: 6px;
}

Prompt Pattern

When asked to write a design prompt, include:

Create a quiet Obsidian-like desktop settings interface: two-pane layout with a narrow left navigation sidebar, subtle gray selected nav item, centered main content, rounded light-gray settings panels, compact setting rows with dividers, muted helper text, simple secondary buttons, purple accent primary buttons and toggles, low contrast neutral palette, no decorative gradients, no marketing hero, no nested cards.

Avoid

Marketing landing-page composition
Large hero sections or oversized headings
Decorative gradients, blurred blobs, or ornamental illustrations
Heavy shadows or bright borders
One-note purple backgrounds
Card-in-card layouts
Pill-shaped text buttons everywhere
Excessive whitespace that makes the settings page feel sparse rather than calm
In-app explanatory text about how the UI works unless the product genuinely needs it

Version History

08dc189 Current 2026-07-05 18:54

Metadata

Files: 0
Version: 08dc189
Hash: 789faa77
Indexed: 2026-07-05 18:54

obsidian-like

obsidian-like

Trigger Scenarios

Install

SKILL.md

Obsidian Like

Core Direction

Layout

Sidebar

Content Sections

Setting Rows

Row-First Settings Standard

Controls

Visual Tokens

Prompt Pattern

Avoid

Version History

Same Skill Collection