Claude Code 高级设计技能——13个真正原创的编辑、豪华、高端网页界面组件。
概览
一个Claude Code技能+组件库，用于高端品牌、奢侈品、设计导向的SaaS和创意作品集。 想象一下：编辑杂志遇上动态设计。衬线显示排版、有意运动、克制调色板、不对称构图。不是技术SaaS的流畅——编辑豪华。 ，所有这些都围绕一个连贯的设计语言从零开始构建： Plus 设计基础文档：- design-tokens.md — 颜色、排版比例、间距 - motion-principles.md — 易用库、时长缩放、揭示图案 克隆到你的Claude代码技能目录中： 重启Claude代码。该技能触发状态为：“高级设计”、“编辑”、“奢华”、“高端”、“工作室”、“高级”、“创意代理网站”、“作品集网站”。 每个组件都是独立的TSX。
概述（AI 翻译）
一个Claude Code技能+组件库，用于构建高端、编辑级网页界面——适用于高端品牌、奢侈品、设计导向的SaaS和创意作品集。
想象一下：编辑杂志遇上动态设计。衬线显示排版、有意运动、克制调色板、不对称构图。不是技术SaaS的流畅——编辑豪华。
里面是什么
13个真正原创的组件，全部围绕统一的设计语言从零开始构建：
| 节 | 组件 |
|---|---|
| 导航 | 编辑编辑头条（桌面悬停+全屏移动叠加） |
| 英雄 | 动能面具英雄（滚动驱动，无产品模型） |
| 专题 | 编辑索引（编号行数 + 聚焦） |
| 统计 | 编辑编号（衬线计数动画） |
| 标志 / 客户 | 编辑客户账本（字体设计，无标志图片） |
| 画廊 / 作品 | 编辑作品索引（非对称跨度） |
| 关于 | 社论 / 宣言（下写 + 引号） |
| 推荐语 | 社论拉出引言（单大引言+导航员） |
| 定价 | 编辑不对称（5-col，特色+叠加） |
| 常见问题 | 编辑评论（斜体问题，可扩展） |
本页由 AI 翻译，技术细节请以原文为准。
README
以下为原文 README 节选，完整内容请查看原文。
Premium Design Skill — Kinetic Luxe
A Claude Code skill + component library for building premium, editorial-grade web interfaces — for high-end brands, luxury products, design-forward SaaS, and creative portfolios.
Think: editorial magazine meets motion design. Serif display typography, intentional motion, restrained palettes, asymmetric composition. Not tech-SaaS sleek — editorial-luxe.
What’s inside
13 genuinely original components, all built from scratch around a cohesive design language:
| Section | Component |
|---|---|
| Navigation | Editorial Masthead (desktop hover + full-screen mobile overlay) |
| Hero | Kinetic Mask Hero (scroll-driven, no product mockup) |
| Features | Editorial Index (numbered rows + spotlight) |
| Stats | Editorial Numbers (serif counter animations) |
| Logos / Clients | Editorial Client Ledger (typographic, no logo images) |
| Gallery / Work | Editorial Work Index (asymmetric spans) |
| About | Editorial Story / Manifesto (drop-cap + pull quote) |
| Testimonials | Editorial Pull Quote (single large quote + navigator) |
| Pricing | Editorial Asymmetric (5-col, featured + stacked) |
| FAQ | Editorial Remarks (italic questions, expandable) |
| CTA | Moment CTA (full-viewport, giant & decorative) |
| Contact | Editorial Correspondence (underline form) |
| Footer | Editorial Manifesto Footer |
Plus design foundation docs:
design-tokens.md— colors, typography scale, spacingmotion-principles.md— easing library, duration scale, reveal patterns
Install
Clone into your Claude Code skills directory:
git clone https://github.com/luukalleman/premium-design-skill.git ~/.claude/skills/premium-design-skill
Then symlink the skill into place:
ln -s ~/.claude/skills/premium-design-skill/skills/premium-design ~/.claude/skills/premium-design
Restart Claude Code. The skill triggers on: “premium design”, “editorial”, “luxe”, “high end”, “atelier”, “make it premium”, “creative agency site”, “portfolio site”.
Use the components directly (without the skill)
Every component is standalone TSX. Copy what you need from skills/premium-design/references/catalog/components/:
cp skills/premium-design/references/catalog/components/hero-variant-1.tsx src/components/
Dependencies per component:
framer-motion(all components)react(all)- Tailwind CSS with the design tokens (see
skills/premium-design/references/design-tokens.md) - Fonts: Fraunces (display) + Inter (body) — load via Google Fonts
Design language: Kinetic Luxe
Five rules (from SKILL.md):
- Typography is the protagonist — Fraunces for display at huge
clamp()sizes, Inter for body, strict tracking and leading. - Motion is intentional — no bouncy springs. Long
easeOutExpo(1.2–1.8s) reveals tied to scroll. - Depth through layers — noise texture + warm radial gradients + hairline borders. No
shadow-lg.
推荐工具
换一个关键词，或者移除筛选条件。
安装
npx skillfish add luukalleman/premium-design-skill