安装命令
npx skills add https://github.com/seika139/dotfiles --skill creative-frontend-aesthetics🇨🇳中文介绍
Creative Frontend Aesthetics Skill
你必须摆脱统计上常见的“AI生成感”设计（AI slop），构建出能让用户惊喜和愉悦的、富有独创性的前端。
重点事项
1. 字体排印
- 请选择美观、独特且引人注目的字体。
- 避免： Arial、Inter 等通用字体。
- 推荐： 能提升前端美学的特色字体。
2. 色彩 & 主题
- 请彻底贯彻一致的美学。
- 使用 CSS 变量来保持一致性，优先采用“鲜明的主色 + 锐利的强调色”的组合，而非模糊的配色方案。
- 灵感来源： 可以从 IDE 主题、文化美学（赛博朋克、复古、北欧现代等）中汲取灵感。
3. 动效
- 引入有效的动画和微交互。
- 对于 HTML，优先使用纯 CSS 解决方案；对于 React，优先使用
framer-motion等库。 - 策略： 与其使用零散的动效，不如专注于“关键时刻”的呈现，例如页面加载时的错开显示效果。
4. 背景
- 避免使用纯色，营造氛围和纵深感。
- 通过叠加 CSS 渐变图层、几何图案或符合语境的背景效果来提升质感。
应避免的“AI生成设计”特征
- 字体： 过度使用 Inter、Roboto、Arial 或系统字体。
- 配色： 白色背景搭配紫色渐变（过于典型）。
- 布局： 可预测的组件排列、模板化的设计。
- 个性： 无视语境、“放之四海而皆准”的设计。
创造性诠释
请积极尝试明暗主题切换、大胆的字体选择以及出人意料的设计决策。不要固守于特定字体（如 Space Grotesk 等），始终要提出“跳出框架”的建议。
🇯🇵日本語
Creative Frontend Aesthetics Skill
あなたは、統計的にありがちな「AIが生成したっぽい」デザイン（AI slop）から脱却し、ユーザーを驚かせ、喜ばせる独創的なフロントエンドを構築しなければなりません。
重点項目
1. タイポグラフィ
- 美しく、ユニークで、興味を惹くフォントを選択してください。
- 回避: Arial, Inter などの汎用フォント。
- 推奨: フロントエンドの美学を高める特徴的なフォント。
2. カラー & テーマ
- 一貫した美学（Cohesive aesthetic）を徹底してください。
- CSS変数を使用して一貫性を保ち、ぼやけた配色ではなく「強い主色 + 鋭いアクセント」の構成を優先します。
- インスピレーション: IDEのテーマ、文化的な美学（サイバーパンク、レトロ、北欧モダンなど）から着想を得てください。
3. モーション (動き)
- 効果的なアニメーションとマイクロインタラクションを導入します。
- HTMLの場合はCSSのみの解決策を、Reactの場合は
framer-motion等のライブラリを優先してください。 - 戦略: 散発的な動きよりも、ページロード時のスタッガード（時間差）表示など、「ここぞ」という瞬間の演出に注力してください。
4. 背景
- 単色（Solid colors）を避け、雰囲気と奥行きを作ります。
- CSSグラデーションのレイヤー、幾何学模様、文脈に合わせた背景エフェクトを重ねて質感を高めてください。
回避すべき「AI生成デザイン」の特徴
- フォント: Inter, Roboto, Arial, システムフォントの使いすぎ。
- 配色: 白背景に紫のグラデーション（あまりにも典型的）。
- レイアウト: 予測可能なコンポーネント配置、テンプレート感のあるデザイン。
- 性格: 文脈を無視した「どこにでもあるような」デザイン。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
