skills.rest
Keimoshi
KeimoshiCOMMUNITY
Explore all skills by this author →
GitHub

web-prototype-taste-editorial

Generates editorial-minimalist single-page web prototypes with serif display typography and hairline borders.

Updated May 20, 2026
Search Tags:#typography#minimalist#landing page#design system#editorial design#html css#web prototype
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill web-prototype-taste-editorial-keimoshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-prototype-taste-editorial
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/web-prototype-taste-editorial
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill web-prototype-taste-editorial-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing clean, premium-looking marketing or documentation pages often results in generic layouts with default fonts, heavy shadows, and clichéd copy. This Skill encodes a complete editorial-minimalist design system so generated web prototypes follow consistent, opinionated visual rules. ## Core Features & Use Cases - Design rule enforcement: Hard rules for warm off-white canvas, off-black foreground, 1px hairline borders, serif display plus grotesque body type pairing, and muted pastel chips. - Banned-pattern guardrails: Explicitly blocks Inter/Roboto fonts, gradients, glassmorphism, drop shadows, pill containers, and AI copy clichés like "Elevate" or "Seamless". - Required component blueprint: Sticky pill navbar, asymmetric hero, uneven bento grid, contrast block, pricing band, and monospace footer, plus subtle IntersectionObserver-based motion. - Use Case: Ask for a landing page for a documentation tool and receive a complete HTML prototype like the included example.html, with responsive layout and reduced-motion support. ## Quick Start Use the web-prototype-taste-editorial skill to build a single-page marketing site for a technical writing tool called Quartz.

Frequently Asked Questions about web-prototype-taste-editorial

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an editorial-minimalist landing page prototype?▼

Invoke this Skill with a brief mentioning clean, editorial, premium SaaS, or documentation styling. It produces a single-page HTML prototype following hard rules for typography, color, borders, and layout, with example.html as a reference template.

What fonts does the editorial minimalist design system use?▼

Display type uses editorial serifs like Instrument Serif, Newsreader, or Lyon; body text uses grotesques like Geist, Switzer, or SF Pro; metadata uses JetBrains Mono or Geist Mono. Inter, Roboto, and Open Sans are explicitly banned.

Can I use gradients or drop shadows in this design style?▼

No. Gradients, neon, glassmorphism beyond a subtle navbar blur, and shadows above 0 1px 2px rgba(0,0,0,0.04) are banned. Separation comes from 1px solid #EAEAEA hairline borders and generous whitespace instead.

What layout components are required in the prototype?▼

Required components are a sticky translucent pill navbar, an asymmetric hero with eyebrow tag and serif display, an uneven bento grid with visible dividers, a contrast block separated only by border-t, a pricing band with one accent CTA, and a monospace footer.

Does the prototype support reduced motion and mobile screens?▼

Yes. Animations use only transform and opacity via IntersectionObserver over 600ms, and the example template includes a prefers-reduced-motion media query that disables reveals, plus a responsive breakpoint collapsing grids to single columns.

Related Skills

Explore More Design & Creative Skills→
adriancodesadriancodes

ecc-marketing-campaign

Plans multi-channel marketing campaigns and produces landing page, email, social, and ad copy.

Community
Intermediate
MattSenterMattSenter

senternet-site-design

Convert Claude Design HTML exports into React components and a design system.

Community
Advanced
hdkz-devhdkz-dev

accessibility-ally

Audit web applications for semantic HTML, keyboard navigation, and color contrast issues.

Community
Intermediate
yharuto0917yharuto0917

ai-elements

Provide composable UI components for AI-native apps with Vercel AI SDK and shadcn/ui.

Community
Advanced