skills.rest
Rabbit-Ivan
Rabbit-IvanCOMMUNITY
Explore all skills by this author →
GitHub

benzenith-frontend-design2

Generates BenZenith-branded frontend pages with Next.js, React, Tailwind, and HTML/CSS.

Updated Jan 10, 2026
Search Tags:#next.js#design tokens#tailwind#frontend design#page templates#responsive layout#brand website
One-click install
npx skills add https://github.com/Rabbit-Ivan/Ivan-skills --skill benzenith-frontend-design2-rabbit-ivan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: benzenith-frontend-design2
Source: https://github.com/Rabbit-Ivan/Ivan-skills/tree/main/skills/benzenith-frontend-design2
Command: npx skills add https://github.com/Rabbit-Ivan/Ivan-skills --skill benzenith-frontend-design2-rabbit-ivan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building pages for the BenZenith jewelry brand often drifts into generic template aesthetics that ignore the brand's Eastern minimalist, ink-wash, gallery-style design language. This Skill locks the visual system, PC layout specs, and page templates so generated code consistently matches the official design drafts. ## Core Features & Use Cases - Spec-driven page generation: Produces production-grade Next.js/React/Tailwind/HTML/CSS code following fixed 1920px PC layout specs, typography rules, and spacing constraints. - Five locked page templates: Home, Series landing, Product detail, Brand story, and Exhibition templates with mandatory module ordering and a signature oversized footer. - Design token enforcement: Applies the Ink/Sand/Ivory neutral palette, restrained gold accents, editorial link CTAs, and low-contrast ink-wash backgrounds while banning SaaS-style or candy-colored drift. - Use Case: Given a screenshot of the BenZenith homepage hero section, generate a pixel-faithful responsive implementation with the correct 1920x800 hero, 46px title baseline, and bilingual serif typography. ## Quick Start Use the benzenith-frontend-design2 skill to build a BenZenith series landing page in Next.js and Tailwind following the official PC layout specs.

Frequently Asked Questions about benzenith-frontend-design2

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

FAQPage Schema
How do I generate a BenZenith-style landing page with Next.js and Tailwind?▼

Provide a page type, module list, design draft, or reference link, and the Skill selects one of five locked templates as the structural baseline. It then outputs runnable Next.js/React/Tailwind code with the brand's tokens, PC layout specs, and a design decision summary.

What page templates does this frontend design skill support?▼

It supports five templates: Home (editorial plus gallery), Series landing, Product detail with split gallery, Brand story with two-column reading layout, and Exhibition poster pages. Every generation must declare which template it uses.

Does the generated code support responsive mobile layouts?▼

Yes, output is desktop-first based on a 1920px canvas using clamp() scaling between 1440 and 1920 pixels, with breakpoint reflow below 1024px. Each delivery includes a short responsive strategy describing breakpoints and folding behavior.

Can I use this skill for a generic SaaS dashboard design?▼

No, the Skill explicitly forbids style drift toward SaaS dashboards, candy colors, heavy gradients, glassmorphism, or stacked component-library cards. It only produces the BenZenith brand aesthetic of Eastern minimalism, ink-wash structure, and gallery presentation.

What accessibility requirements does the generated frontend code meet?▼

Generated code must include sufficient color contrast, keyboard navigation, visible focus states, semantic HTML tags, and image alt text. These checks are part of the mandatory self-review before final output.

Related Skills

Explore More Design & Creative Skills→
desduvauchelledesduvauchelle

penny-build

Generate a self-contained index.html from design specs, branding config, and copy.

Community
Intermediate
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
xbg-solutionsxbg-solutions

typeset

Creates modular type scales and semantic color tokens for UI typography consistency and accessibility.

Official
Advanced
yuch4yuch4

frontend-design

Generate frontend UI designs with React, TypeScript, Tailwind CSS, and motion libraries.

Community
Advanced