# Benzenith Frontend Design2

> BenZenith 官网“设计稿范式复刻”专用前端设计 skill。强制遵循 BenZenith 的东方极简 + 珠宝展陈质感 + 水墨结构性视觉 + 黑金点睛；并固化 PC 端尺寸规范、页面模板（首页/系列页/单品页/品牌故事/展览页）、CTA 默认形态（editorial link）、超大品牌签名 footer 等，输出 production-grade 代码（Next.js/React/Tailwind/HTML/CSS）与可执行的设计决策清单，避免通用模板化“AI slop”。

- Skill: `rabbit-ivan/benzenith-frontend-design2` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add rabbit-ivan/benzenith-frontend-design2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/rabbit-ivan/benzenith-frontend-design2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: rabbit-ivan (https://skillmd.com/u/rabbit-ivan)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/rabbit-ivan/benzenith-frontend-design2

---


# BenZenith Frontend Design v2 (Spec-Driven)

## Mandatory references (read in this order)
1) `references/brand-tokens.md`
2) `references/layout-specs-pc.md`
3) `references/page-templates.md`
4) `references/ui-recipes.md`
5) `references/ink-backgrounds.md`
6) `references/copy-style.md`

## Non-negotiable design intent
- 固定风格：东方极简（留白、克制）+ 珠宝展陈（gallery / editorial）+ 水墨为结构性构图 + 黑金与温润中性色体系。
- 禁止风格漂移：SaaS dashboard、彩色渐变大面积铺底、糖果色、过度圆角、过度拟物/玻璃态、随意堆叠组件库模板。

## Primary goal
- 当用户提供“页面类型/模块/设计稿/截图/参考链接”时：以 `page-templates.md` 为结构基线，按 `layout-specs-pc.md` 的 PC 尺寸与排版锁定，再用 tokens + recipes 完成高还原实现。
- 当用户只给文字需求：仍必须选定一个页面模板（首页/系列/单品/故事/展览）并声明采用哪一个模板。

## Workflow (always follow)
1) Identify page type + template
- 明确：页面类型（Home / Series landing / Product detail / Brand story / Exhibition）
- 列出：模块清单（Header / Hero / Intro / Grid / Editorial / Footer signature 等）

2) Lock the spec
- 先锁：PC baseline 尺寸（1920 画布、各 section 高度、标题/正文高度、关键间距）
- 再锁：Typography（中英混排规则）与 CTA 默认形态（editorial link）

3) Produce production-grade output
- 输出可运行代码，包含响应式（desktop-first 但必须给出移动端折叠策略）。
- 强制可访问性：对比度、键盘导航、focus states、语义化标签、图片 alt。

4) Quality bar (self-check before final)
- 是否使用了正确模板与模块顺序？
- 是否遵循了 PC 尺寸与关键间距？
- CTA 是否默认是 editorial link（而不是随手一个大按钮）？
- Footer 是否包含“超大 BenZenith 签名区”模块？
- 水墨/纹理是否克制、低对比、不抢产品主体？

## Output contract (what to deliver)
你必须同时输出以下内容（除非用户明确不要）：
1) 设计决策摘要（<= 10 条，直接可执行）
2) 关键 tokens（CSS variables 或 Tailwind theme 扩展片段）
3) 页面/组件代码（完整、可运行）
4) 响应式策略（用简短要点说明断点与折叠方式）

## What to avoid
- 避免泛泛解释、避免“看起来很高级但不符合 BenZenith”的视觉发散。
- 避免引入过多装饰性 icon、复杂卡片堆叠、过度阴影与过度动效。