Skip to content
Skillpedia
PT
Interfaces (UI/UX)101k · #507

web-prototype-taste-editorial

Lets your agent generate a website prototype with an editorial minimalist design. It uses soft colors, serif fonts, and ample whitespace. Good for a clean and elegant look.

What it does

Creates a minimalist and elegant web prototype, similar to modern product websites. It uses soft colors, classic fonts, and ample whitespace for a premium feel.

When to use it

  • ✓When you want a 'clean' and professional website design.
  • ✓To create the look of a software product or documentation.
  • ✓If you need a 'premium' and editorial look for your page.

Example of what to ask your AI

“Create a web prototype with a minimalist editorial look.”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/nexu-io/open-design/blob/main/design-templates/web-prototype-taste-editorial/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/nexu-io/open-design/blob/main/design-templates/web-prototype-taste-editorial/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
View on GitHub ↗Raw file
How it works

The system uses a warm, soft color palette, pairing serif fonts for headings and sans-serif fonts for body text. It also applies generous spacing and thin borders for a clean appearance.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add nexu-io/open-design --skill web-prototype-taste-editorial

Or download just the file:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/design-templates/web-prototype-taste-editorial/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

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
FAQ

What colors are used?

It uses off-white tones for the background and soft black for text, with touches of muted pastels for tags.

What kind of fonts are recommended?

Serif fonts (like 'Newsreader') for headings and sans-serif fonts (like 'Geist') for body text.

What should be avoided?

It avoids pure black, generic fonts like 'Roboto', flashy gradients, strong shadows, and marketing clichés.

Details

Original description by the author

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`.

repo: nexu-io/open-design

Popularity

GitHub stars
101k
Ranking position
#507
License
Apache-2.0
Updated
10/16/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

General coding101k

sample-plugin

Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.

nexu-io/open-design

Branding101k

aster-atelier

Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.

nexu-io/open-design

Audio & voice101k

audio-jingle

Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.

nexu-io/open-design

Writing101k

blog-post

Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.

nexu-io/open-design

Similar skills

Interfaces (UI/UX)280k

accessibility

Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.

affaan-m/ECC

Interfaces (UI/UX)280k

design-system

Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.

affaan-m/ECC

Interfaces (UI/UX)280k

liquid-glass-design

Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.

affaan-m/ECC