使用Hyperframes的HTML模板制作复古像素风格的三场景视频，替换标题、标签和配色，同时保留场景转换节奏及可重复的动画时序。
- 制作像素风格的介绍视频
- 替换三场景视频中的内容
- 通过HTML预览场景转换
nexu-io/open-design10.3万2026年10月20日 更新
免费在 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.
中文简介正在准备中。当前显示英语简介。
原文查看原文说明
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`.
适用场景
- Prototype a SaaS marketing page
- Explore a documentation page design
- Build an introduction page for a knowledge product
包含的文件（2）
- SKILL.md3.2 KB
- example.html17.8 KB
SKILL.md（原文）
安装前可以查看交给 AI 代理的指令内容。
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 (
#FBFBFAor#F7F6F3), never pure white. - Foreground: off-black
#111111, secondary text#787774. Never#000000. - Borders:
1px solid #EAEAEAonly. No drop shadows above0 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–12pxmax. No pill containers, norounded-fullon cards. - Section padding:
py-24minimum,py-32for 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
1pxdividers — never 3 equal cards. - A "what it isn't" or contrast block separated by
border-tonly, 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 → 1over600ms cubic-bezier(0.16, 1, 0.3, 1).IntersectionObserveronly. - Hover lift on cards:
box-shadowfrom0 0 0to0 2px 8px rgba(0,0,0,0.04)over200ms. - Stagger lists by
--index * 80ms. - Animate only
transformandopacity.
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
评价
还没有评价。欢迎分享你的使用感受。
评论
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
同一仓库的技能
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-design10.3万2026年10月20日 更新
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-design10.3万2026年10月20日 更新
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-design10.3万2026年10月20日 更新
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-design10.3万2026年10月20日 更新
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-design10.3万2026年10月20日 更新