1实现原理 · 为什么它能做到
纯 prompt 协议文件(85 行单文件,无脚本),以『Premium Utilitarian Minimalism & Editorial UI』命名协议并先立总纲:暖单色、编辑式层级、bento、ultra-flat、muted pastel。
This protocol strictly enforces a high-contrast warm monochrome palette, bespoke typographic hierarchies, meticulous structural macro-whitespace, bento-grid layouts, and an ultra-flat component architecture with deliberate muted pastel accents.
负向约束清单把会破坏极简的默认值全部禁掉:Inter/Roboto、Lucide/Feather/Heroicons、Tailwind 重阴影、大面积彩色背景、渐变/霓虹/3D glass、大容器圆角胶囊、emoji、占位名、AI 套话。
DO NOT use gradients, neon colors, or 3D glassmorphism (beyond subtle navbar blurs).
三轨字体系统(UI sans / 编辑 serif / 等宽 meta)各自给出目标字体族、字距与行高参数,靠极端字体对比撑编辑感。
Editorial Serif (Hero Headings & Quotes): Target: `font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif`.
色板用数值锁死:暖单色(白/骨白/炭黑)+ 结构线 #EAEAEA + 四个水洗粉彩 accent(含各自前景文字色),颜色成稀缺资源只用于语义。
Canvas / Background: Pure White `#FFFFFF` or Warm Bone/Off-White `#F7F6F3` / `#FBFBFA`.
组件规格逐一定死:bento 卡片 1px #EAEAEA 边框+8/12px 圆角上限、主按钮 #111 实底 4-6px 圆角无阴影、无框手风琴、kbd 键帽、伪 macOS 窗口。
Cards must have exactly `border: 1px solid #EAEAEA`.
动效走『不可见的精致』:600ms 入场淡入、卡片 0→2px 8px 超柔阴影过渡、stagger cascade、可选超慢速环境光斑(≤0.04 透明度),且一律 transform/opacity-only + IntersectionObserver。
Scroll Entry: Elements fade in gently as they enter the viewport. Use `translateY(12px)` + `opacity: 0` resolving over `600ms` with `cubic-bezier(0.16, 1, 0.3, 1)`. Use `IntersectionObserver`, never `window.addEventListener('scroll')`.
七步执行协议从留白/宽度约束/字体色板/边框/入场动效/视觉深度依次落地,最后要求『不需要手动调整』的成品。
Provide code that reflects this high-end, uncluttered, editorial aesthetic natively without requiring manual adjustments.
2核心能力
3外部依赖
| 类型 | 依赖 |
|---|---|
| network | picsum.photos(占位图服务) |
| package | Phosphor Icons / Radix UI Icons |
4风险提醒 风险提醒:绿色 · 放心使用
- 纯文本命令,遵从度依赖宿主模型 — 无执行校验;模型可能漏掉某条 DO NOT(如仍输出 emoji 或阴影)而文件无强制手段。
- 『禁渐变』与低透明 radial 例外的措辞张力可能被模型误读 — 两类表述并存,理解力弱的模型可能要么过度禁用氛围层、要么把渐变带回来;页面建议给出明确判据(透明度阈值)。
- 字体族链依赖宿主环境 — 若项目无 Geist/Switzer/Newsreader 等字体,agent 可能引入外链或退化到系统字体栈,与设计意图产生偏差。
- 风格窄化风险 — 极简编辑风不适合需要高情绪/高彩度/装饰性的品牌场景;用户拿它做游戏站或快消品会明显错配。
5第二遍独立确认
- [ok] 目录资产面(含隐藏/未跟踪文件) — git ls-files + ls -A 双查:该 skill 目录仅 1 个文件 SKILL.md,无 scripts/references/模板/数据/隐藏文件,无可执行代码。
- [ok] 执行类 token 扫描 — 逐文件扫描 bash/exec/child_process/curl/wget/fetch/axios/process.env/API_KEY/.env/fs./writeFile/.github 等零命中(brutalist 一处 'sans-serifs.' 单词结尾 fs. 为误报,人工复核排除)。
- [ok] 引文逐条 grep -F 字节复核 — 本 JSON 所用全部 quote 均以 grep -F 在 pin commit 工作树中逐条验证存在,无 paraphrase 冒充。
- [ok] 元数据与 pin 核对 — 本地 git HEAD == 任务 pin ccbc15639c97057cbfcf32ecebc38ef716e4bb37(README 显示该提交为 docs/sponsor 修订 #102,2026-08-24);GitHub API 实查 stars=85698、MIT、pushed_at=2026-08-24T15:23:56Z。frontmatter name 与任务给定名一致。
- [ok] 功能声明 vs 实际能力夸大检查 — description 声称均由 SKILL.md 正文纯 prompt 机制兑现,无脚本可调用、无越界承诺(详见本文件 how_it_works 引文)。
- [ok] 『No gradients』vs Section 6/7 的 radial-gradient 是否自相矛盾 — 细读后判定为措辞张力而非矛盾:禁令对象是渐变填充/霓虹色带('DO NOT use gradients, neon colors, or 3D glassmorphism'),而 radial light spots 限 opacity 0.03、ambient blob 限 0.02-0.04 且须 pointer-events-none 固定层——属超低透明氛围例外,语义上不与『视觉渐变』冲突,但模型可能误读,建议页面标注此细微差别。
- [ok] 『no heavy shadows』与 hover 阴影建议是否矛盾 — Section 2 禁的是 Tailwind 默认重阴影(shadow-md/lg/xl);Section 7 hover 用 0 2px 8px rgba(0,0,0,0.04) 超柔阴影——低透明度自洽,无矛盾。
- [ok] bento 网格『flat』与 8/12px 圆角上限的执行一致性 — 正文对所有大容器统一 8/12px 上限并禁 rounded-full(Section 2),唯 tags/badges 用 9999px 药丸(Section 5 Tags),两级圆角策略明确无冲突。
6结论
1878e24d26888079…3cca18b368