本文へ移動
cccskills
無料GitHub で公開

web-prototype-taste-editorial

Editorial-minimalist web prototype. Warm monochrome canvas, serif display + grotesque body, 1px hairline borders, muted pastel chips, generous macro-whitespace, ambient micro-motion. Distilled from Leonxlnx/taste-skill `minimalist-skill`.

nexu-io/open-design
インストール方法を見る

含まれるファイル（2）

  • SKILL.md3.2 KB
  • example.html17.8 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Web Prototype — Editorial Minimalism

A single-page web prototype shaped like a Notion/Linear marketing site or premium documentation surface. Use when the brief asks for "clean", "editorial", "premium SaaS", "documentation", or "knowledge product".

Source

Distilled from Leonxlnx/taste-skill — skills/minimalist-skill/SKILL.md and the spatial-rhythm rules in skills/taste-skill/SKILL.md. See example.html in this directory for a fully-realized template.

Hard rules

  • Canvas: warm off-white (#FBFBFA or #F7F6F3), never pure white.
  • Foreground: off-black #111111, secondary text #787774. Never #000000.
  • Borders: 1px solid #EAEAEA only. No drop shadows above 0 1px 2px rgba(0,0,0,0.04).
  • Type pairing: display in editorial serif (Instrument Serif / Newsreader / Lyon), body in grotesque (Geist / Switzer / SF Pro), monospace for meta/keystrokes (Geist Mono / JetBrains Mono).
  • Display tracking: letter-spacing: -0.025em, line-height: 1.05.
  • Pastel chips only: muted backgrounds (#FDEBEC, #E1F3FE, #EDF3EC, #FBF3DB) for tags/badges. Never as section backgrounds.
  • Containers: border-radius: 8–12px max. No pill containers, no rounded-full on cards.
  • Section padding: py-24 minimum, py-32 for hero.

Banned

  • Inter, Roboto, Open Sans (use Geist / Switzer / SF Pro).
  • Generic Lucide thin-stroke icons (use Phosphor Bold or Radix).
  • Gradients, neon, glassmorphism beyond a subtle navbar blur.
  • Drop shadows above shadow-sm. No glows.
  • Generic placeholder names (John Doe / Acme / Lorem). Use specific contextual content.
  • AI copy clichés: "Elevate", "Seamless", "Unleash", "Next-Gen".
  • Pure black #000000.
  • Centered hero H1 over a dark image.

Required components

  • Sticky pill navbar (translucent off-white, backdrop-blur-md, hairline border).
  • Asymmetric hero: serif display left-aligned, eyebrow tag above, lede paragraph at max-w-[52ch].
  • Bento feature grid with uneven row heights and visible 1px dividers — never 3 equal cards.
  • A "what it isn't" or contrast block separated by border-t only, no card.
  • Pricing or signup band with one accent CTA.
  • Footer: monospace metadata, single hairline above.

Motion (subtle only)

  • Scroll entry: translateY(12px) → 0 + opacity 0 → 1 over 600ms cubic-bezier(0.16, 1, 0.3, 1). IntersectionObserver only.
  • Hover lift on cards: box-shadow from 0 0 0 to 0 2px 8px rgba(0,0,0,0.04) over 200ms.
  • Stagger lists by --index * 80ms.
  • Animate only transform and opacity.

Pre-flight

  • Serif display + grotesque body pairing present
  • Canvas is warm off-white, foreground is off-black
  • All cards/dividers use 1px solid #EAEAEA
  • At least one asymmetric layout (split, eyebrow tag, uneven bento)
  • Pastel chips used only for tags, never as block backgrounds
  • Section padding ≥ py-24
  • No emojis, no banned fonts, no AI clichés

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

8-bit-orbit-video-template

無料

Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月12日 更新

ad-creative

無料

Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月12日 更新

after-hours-editorial-template

無料

Luxury dark-editorial HyperFrames template for three-page cinematic storyboards, inspired by haute couture title cards and magazine chapter spreads. Use when the user asks for premium fashion-style motion pages, moody serif-led storytelling, or a high-end dark presentation aesthetic with rich transitions.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月12日 更新

agent-browser

無料

Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, reading selected OpenDesign browser-tab context, testing web apps, dogfooding OpenDesign previews, QA, bug hunts, or reviewing app quality. Prefer local OpenDesign preview URLs unless the user explicitly asks for external browsing.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月12日 更新

ai-music-album

無料

Full-lifecycle AI music album production — concept, lyric drafting, track sequencing, and export. Useful for indie album experiments and brand soundtracks.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月12日 更新

algorithmic-art

無料

Create generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic frame studies.

日本語の概要は準備中です。原文の説明を表示しています。

nexu-io/open-design10.1万2026年10月12日 更新

nexu-io のスキルをすべて見る

このスキルの問題を報告する