peterhadorn/swiss-design-skill

swiss-design-skill は何をしますか？

Claude Code および Codex 用スキル。スイス・デザインの伝統に基づき、厳格なグリッド、ネオ・グロテスク書体、抑制された色彩でウェブサイトを構築します。

概要

このスキルは、スイス・デザインの原則に従ったウェブサイトを生成するために設計されています。主な特徴は以下の通りです。

• 厳格なグリッド: CSS Grid または Flexbox を使用した正確なレイアウト
• ネオ・グロテスク書体: Neue Haas Grotesk, Helvetica, Arial などのサンセリフ書体を優先
• 抑制された色彩: 白、黒、赤を基調とし、アクセントカラーは限定的に使用

使用方法

このスキルは、Claude Code または Codex 環境で有効化した後、以下のようにプロンプトで指示することで利用できます。

スイスデザインのスタイルでランディングページを作成してください。

または、より具体的な指示:

厳格なグリッドとネオ・グロテスク書体を使用して、ポートフォリオサイトを構築してください。カラーパレットは白と黒、そしてアクセントに赤のみを使用します。

サポートされるプラットフォーム

• Claude Code
• Codex (OpenAI)

スキルの仕組み

1. ユーザーからのリクエストを解析
2. スイスデザインの原則（グリッド、タイポグラフィ、色彩）に従ったHTML/CSSコードを生成
3. 必要に応じてJavaScriptによるインタラクションを追加
4. レスポンシブデザインに対応

注意事項

• 生成されるコードは主に静的サイト向けであり、フレームワーク固有の機能は含まれません
• 画像やフォントファイルは外部リソースとして扱われます
• デザインの正確性を保つため、特定のCSSプロパティ（font-family, display: grid など）が優先されます

ライセンス

このスキルはオープンソースであり、MIT ライセンスのもとで提供されます。