本技能用于创建具有高端机构质感的 React（.jsx）网站设计，目标是让页面看起来经过专业创意投入，而非模板化产出。
主要用途：生成高完成度的网站界面组件，覆盖排版、配色、布局、动效与 3D 元素等设计决策。
主要能力：
- 反 AI 套路清单——明确禁止常见做法，如 Inter、Poppins 等被滥用的主字体，紫蓝渐变，Hero+三栏特性+评价+CTA+页脚等固定结构，滚动淡入、统一过渡、悬停缩放等动效，以及 blob 背景、漂浮几何图形等装饰。
- 高端设计原则——排版作为身份（特色展示字体搭配精炼正文字体、clamp() 流式缩放、大标题负字距、混合对齐、宽字距大写微标签）；颜色作为氛围（以黑白为起点、暖灰与离白、克制的对比色、考究的深色层次）；布局作为叙事（打破网格、大面积留白、重叠元素、粘性元素、砖石网格、账本式行表格、编辑器风格表单）。
- 结构 DNA 目录——要求每次调用选定一个主结构概念并贯彻，如同一批次内不得重复；给出的候选包括 Index Manuscript、Sticky Horizontal Diorama、Two-Pane Permanent Split、Slide Sequence、Staged Object on a Plinth、Pinned Narrative、Horizontal Navigation、Sidebar + Column、Chapter Gates、Ledger / Registry、Collage / Grid-Breaker、Single Object No Chrome、Product UI Slate、Dashboard Tile Grid、Conversation Timeline 等。
- 导航多样性——禁止默认三栏顶栏，可选无导航、侧栏内嵌、底部命令栏、跑马灯导航、竖排导航等。
- 行业调研要求——至少研究 5 个真实参考站点，并给出不同领域的起始参考集，如 AI 工具类可参考 Vercel、Cursor、Linear、Stripe 等。
- 3D 组件——每个站点都含 3D 元素，且禁止用 Three.js 基础几何体拼装主体视觉，仅允许用于背景氛围效果。
使用方式：以 Claude 技能形式调用，输入网站需求后按上述规则生成 JSX 组件；具体安装与运行命令资料暂未提供。
适用场景：面向需要高端视觉的网站设计，如餐饮、香水、钟表、文化刊物、技术产品、AI 工具、网络安全、基础设施等领域。
限制：资料主要描述设计规则与禁忌，未提供价格、平台支持、性能指标或效果保证；部分内容（如官方文本）为空，具体集成方式暂未提供。