Home / All Skills / Design & Motion / minimalist-ui
English (EN)简体中文 (ZH)日本語 (JA)
Design & Motion · leonxlnx/taste-skill

minimalist-ui

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Author leonxlnxGitHub leonxlnx/taste-skill ↗Stars 85698License MIT（仓库根 LICENSE 文件；GitHub API spdx MIT；Copyright (c) 2026 Leonxlnx）Commit ccbc15639c
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

A pure prompt protocol file (single file of 85 lines, no scripts) that establishes the protocol titled 'Premium Utilitarian Minimalism & Editorial UI' with an opening master outline: warm monochrome, editorial hierarchy, bento grids, ultra-flat design, and muted pastels.

skills/minimalist-skill/SKILL.md
This protocol strictly enforces a high-contrast warm monochrome palette, bespoke typographic hierarchies, meticulous structural macro-whitespace, bento-grid layouts, and an ultra-flat component architecture with deliberate muted pastel accents.
The master outline locks in 'what is wanted' upfront, while subsequent sections provide concrete specifications for 'how to build it'.

A negative constraint checklist bans all default values that break minimalism: Inter/Roboto, Lucide/Feather/Heroicons, Tailwind heavy shadows, large colored backgrounds, gradients/neon/3D glass, large container rounded pill shapes, emojis, placeholder names, and AI clichés.

skills/minimalist-skill/SKILL.md
DO NOT use gradients, neon colors, or 3D glassmorphism (beyond subtle navbar blurs).
Bans are pinpointed to specific library names and Tailwind utility classes, giving the model determinable boundaries; an exception is strictly bounded with 'beyond subtle navbar blurs'.

A three-track typography system (UI sans / editorial serif / monospace meta) provides target font families, letter-spacing, and line-height parameters for each track, relying on extreme font contrast to sustain an editorial feel.

skills/minimalist-skill/SKILL.md
Editorial Serif (Hero Headings & Quotes): Target: `font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif`.
'Typography is the interface': minimal styles have no ornamentation, so hierarchy depends entirely on font personality and scale; the follow-up text of the same bullet provides tracking (-0.02em to -0.04em) and line-height (1.1) parameters.

The color palette is locked down with exact values: warm monochrome (white/bone/charcoal) + structural lines in #EAEAEA + four washed pastel accents (each paired with its own foreground text color), making color a scarce resource reserved strictly for semantics.

skills/minimalist-skill/SKILL.md
Canvas / Background: Pure White `#FFFFFF` or Warm Bone/Off-White `#F7F6F3` / `#FBFBFA`.
Provides hex codes directly instead of vague 'low saturation' descriptions to prevent the model from deviating; the same section also defines structural lines at #EAEAEA and four sets of washed pastel accents (each paired with foreground text colors).

Component specifications are rigidly specified one by one: bento cards with 1px #EAEAEA borders and an 8/12px border-radius cap, solid #111 primary buttons with 4-6px border-radius and no shadows, borderless accordions, kbd keycaps, and faux macOS windows.

skills/minimalist-skill/SKILL.md
Cards must have exactly `border: 1px solid #EAEAEA`.
This bullet belongs to Section 5 Bento Box Feature Grids sub-items (the same context includes an 8/12px border-radius cap, 24-40px padding, etc.), translating the 'Notion/Linear aesthetic' into copy-pasteable atomic specs.

Motion follows 'invisible refinement': 600ms entrance fade-in, cards transitioning from 0 to 2px 8px ultra-soft shadows, staggered cascades, and optional ultra-slow ambient glow blobs (≤0.04 opacity), strictly limited to transform/opacity-only and IntersectionObserver.

skills/minimalist-skill/SKILL.md
Scroll Entry: Elements fade in gently as they enter the viewport. Use `translateY(12px)` + `opacity: 0` resolving over `600ms` with `cubic-bezier(0.16, 1, 0.3, 1)`. Use `IntersectionObserver`, never `window.addEventListener('scroll')`.
Minimalism does not equal no motion: the author provides a 'quiet yet present' motion syntax while enforcing performance discipline.

A seven-step execution protocol systematically implements whitespace, width constraints, typography and palette, borders, entrance motion, and visual depth, concluding with a requirement for a finished product that 'needs no manual adjustment'.

skills/minimalist-skill/SKILL.md
Provide code that reflects this high-end, uncluttered, editorial aesthetic natively without requiring manual adjustments.
The self-sufficiency requirement at the end of the protocol preemptively shuts down the common failure mode of 'still requiring manual tweaking'.

2Core Capabilities

01Master control for editorial minimalist design language (warm mono + dual-font contrast + bento + flat)
02Absolute negative constraints: total ban on default fonts, icon libraries, heavy shadows, gradients, large capsule containers, emojis, and AI clichés
03Three-track typography system (sans/serif/mono) complete with font family, letter-spacing, and line-height parameters
04Quantified warm monochrome palette + semantic washed pastels (each with foreground text color)
05Component-level specifications: bento, solid buttons, borderless FAQs, kbd tags, faux window chrome
06Quiet motion syntax: 600ms entrance, stagger, ultra-soft shadows, low-opacity ambient light, paired with performance discipline
07Depth completion for 'no empty planes': low-opacity background imagery, radial gradients/glows, geometric line patterns

3External Dependencies

KindDependency / Endpoint
networkpicsum.photos（占位图服务）
packagePhosphor Icons / Radix UI Icons

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
  • SKILL.md: Pure prompt instructions and rule text, without script execution or external side effects
Audit Notes: Pure prompt-based single-file skill: no script execution, no outbound network requests, no credential access, and no file writing by the skill itself. The mention of picsum.photos is merely a placeholder image URL recommendation within the delivered code, not a runtime call by the skill; icons and fonts are recommendations at the output layer. All noted points pertain to the conversational/generation layer and do not pose code-level risks.

5Second-Pass Verification

  • [ok] 目录资产面（含隐藏/未跟踪文件） — git ls-files + ls -A 双查：该 skill 目录仅 1 个文件 SKILL.md，无 scripts/references/模板/数据/隐藏文件，无可执行代码。
  • [ok] 执行类 token 扫描 — 逐文件扫描 bash/exec/child_process/curl/wget/fetch/axios/process.env/API_KEY/.env/fs./writeFile/.github 等零命中（brutalist 一处 'sans-serifs.' 单词结尾 fs. 为误报，人工复核排除）。
  • [ok] 引文逐条 grep -F 字节复核 — 本 JSON 所用全部 quote 均以 grep -F 在 pin commit 工作树中逐条验证存在，无 paraphrase 冒充。
  • [ok] 元数据与 pin 核对 — 本地 git HEAD == 任务 pin ccbc15639c97057cbfcf32ecebc38ef716e4bb37（README 显示该提交为 docs/sponsor 修订 #102，2026-08-24）；GitHub API 实查 stars=85698、MIT、pushed_at=2026-08-24T15:23:56Z。frontmatter name 与任务给定名一致。
  • [ok] 功能声明 vs 实际能力夸大检查 — description 声称均由 SKILL.md 正文纯 prompt 机制兑现，无脚本可调用、无越界承诺（详见本文件 how_it_works 引文）。
  • [ok] 『No gradients』vs Section 6/7 的 radial-gradient 是否自相矛盾 — 细读后判定为措辞张力而非矛盾：禁令对象是渐变填充/霓虹色带（'DO NOT use gradients, neon colors, or 3D glassmorphism'），而 radial light spots 限 opacity 0.03、ambient blob 限 0.02-0.04 且须 pointer-events-none 固定层——属超低透明氛围例外，语义上不与『视觉渐变』冲突，但模型可能误读，建议页面标注此细微差别。
  • [ok] 『no heavy shadows』与 hover 阴影建议是否矛盾 — Section 2 禁的是 Tailwind 默认重阴影（shadow-md/lg/xl）；Section 7 hover 用 0 2px 8px rgba(0,0,0,0.04) 超柔阴影——低透明度自洽，无矛盾。
  • [ok] bento 网格『flat』与 8/12px 圆角上限的执行一致性 — 正文对所有大容器统一 8/12px 上限并禁 rounded-full（Section 2），唯 tags/badges 用 9999px 药丸（Section 5 Tags），两级圆角策略明确无冲突。

6Verdict & Scenarios

  • Translates 'minimalist editorial style' into precise numerical values (hex, 1px borders, border-radius caps, tracking ranges), allowing models to replicate the Notion/Linear aesthetic simply by following along.
  • Negative constraint lists are equally specific down to library names and class names, minimizing evaluation cost and misuse probability.
  • Advanced color discipline: scarcity + semantic usage + foreground text pairing for every accent prevents pastel overuse from destroying readability.
  • 'Quiet motion' is strictly tied to performance discipline (transform/opacity-only, IntersectionObserver instead of scroll listeners), achieving both aesthetics and high frame rates.
  • Framework-agnostic (HTML/React/Tailwind/Vue) and single-file portable, ensuring minimal installation and integration overhead.
    • Best for: Ideal for interfaces with a clear editorial or workspace aesthetic: visual implementations of SaaS documentation, settings pages, notes/project management tools (Notion/Linear vibes), content sites, portfolios, and dashboards; greenfield frontend tasks requiring 'whitespace, hierarchy, and quiet sophistication' across HTML, React, Tailwind, and Vue.
    Not for: Not suitable for high-saturation brand marketing pages or gaming/entertainment visual styles with high emotional intensity; not suitable for industrial brutalism or high-end glassmorphism (use industrial-brutalist-ui or high-end-visual-design instead); not suitable for progressive refactoring of existing codebases (use redesign-existing-projects); not suitable for scenarios requiring rich decorative illustrations or motion showpieces.
    Install Agent-Ready
    ① Verified Mirror 2026-09-09
    Option A · Direct DownloadDownload minimalist-ui.tar.gz
    sha256: 1878e24d26888079…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 3cca18b368.