Skip to content
cccskills
FreePublished on GitHub

web-prototype-taste-editorial

Prototype a single-page website for SaaS, documentation, or knowledge products. Use warm off-white backgrounds, serif headings, fine dividers, generous spacing, and subtle motion to create a restrained layout with features and a signup or pricing section.

OriginalShow the original description

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

See how to install

Good for

  • Prototype a SaaS marketing page
  • Explore a documentation page design
  • Build an introduction page for a knowledge product

Files included (2)

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

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.

  • Create a retro pixel presentation video
  • Customize a three-scene video template
  • Preview scene transitions and motion in HTML
nexu-io/open-design102.2KUpdated Oct 19, 2026

ad-creative

FreeSummary

Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.

  • Drafting headlines for paid social ads
  • Creating descriptions for search ads
  • Revising the main text of an ad
nexu-io/open-design102.2KUpdated Oct 19, 2026

Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.

  • Creating a fashion-inspired motion presentation
  • Presenting a short story across three pages
  • Applying existing brand rules to a dark editorial sequence
nexu-io/open-design102.2KUpdated Oct 19, 2026

agent-browser

FreeSummary

Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.

  • Checking local OpenDesign previews
  • Testing clicks and text entry in web apps
  • Capturing page or element screenshots
nexu-io/open-design102.2KUpdated Oct 19, 2026

ai-music-album

FreeSummary

Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.

  • Planning an experimental independent album
  • Drafting lyrics around an album concept
  • Deciding the running order of tracks
nexu-io/open-design102.2KUpdated Oct 19, 2026

algorithmic-art

FreeSummary

Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.

  • Posters generated with programmed rules
  • Still images that suggest motion
  • Studies of artistic frame composition
nexu-io/open-design102.2KUpdated Oct 19, 2026

See all skills by nexu-io

Report a problem with this skill