gstack フロントエンド スキル パノラマ: 設計から起動までの AI ワークフロー
gstack の 25 以上のフロントエンド/UI 関連スキルのシステムレビュー、推奨される開発ワークフロー、実際のテスト提案
はじめに
以前のノートでは、gstack とは、ワークフローの実行方法、スキルのエンジニアリング アーキテクチャ について説明しました。しかし、議論されていない質問が 1 つあります。gstack のインストール後にもたらされる 60 以上のスキルのうち、フロントエンド/UI デザインに関連するものはどれですか?どのような順序で？ **
このノートでは 2 つのことを行います。まず、フロント エンドに関連する約 27 のスキルを機能ごとに分類し、次に、興味深い小さなプロジェクトであるカウントダウン記念ページを使用して、実際の効果を確認できるように、最初から最後まで完全なワークフローを各段階のスクリーンショットとともに説明します。
フロントエンド スキル キット パノラマ
gstack のフロントエンド スキルは、基礎から屋根まで 6 つの機能レイヤーに分割でき、各レイヤーはさまざまな段階で問題を解決します。
インフラストラクチャの設計
プロジェクト レベルでの 1 回限りの設定で設計言語を決定し、その後のすべてのスキルがこれらのベンチマークを参照します。
| スキル | 何をすべきか | いつ使用するか |
|---|---|---|
/design-consultation | 完全なデザイン システムのコンサルティング、出力カラー マッチング、フォント、間隔、テクスチャの方向 | 新しいプロジェクトを開始するとき、または視覚スタイルを再定義したい場合 |
/teach-impeccable | デザイン設定を一度に収集し、AI 構成ファイルに書き込みます。 gstack のインストール後に一度実行すると、AI に美学を記憶させることができます。 | |
/brand-guidelines | 既存のブランドのカラーマッチングとフォント仕様を適用 | 既存のブランドマニュアルがある場合は直接申請 |
プロジェクトにすでに
DESIGN.mdがある場合、このレベルはスキップできます。
設計の検討
方向性がわからない場合は、複数のオプションをすぐに比較してください。
| スキル | 何をすべきか | いつ使用するか |
|---|---|---|
/design-shotgun | 3 ～ 5 個の視覚的なソリューションを生成し、比較パネルを開きます。どのようなスタイルが必要かわからない、可能性を見てみたい | |
/frontend-design | 認識可能な運用レベルのフロントエンド インターフェイス コードを生成する | 方向性が明確になったらすぐに作業 |
/canvas-design | ポスター、ビジュアル アートの生成 (PNG/PDF) | Web コンポーネントではなく静的なビジュアル デザインが必要 |
設計の実装
計画を実際に実行可能なコードに変換し、植字、レイアウト、応答性を処理します。
| スキル | 何をすべきか | いつ使用するか |
|---|---|---|
/design-html | 確認されたデザインドラフトを製品レベルの HTML/CSS に変換 | 直接実装したいモックアップがあります |
/mobile-responsiveness | モバイルファーストのレスポンシブなレイアウトとタッチ操作 | ゼロからのモバイル適応 |
/adapt | デバイスと画面サイズ間のブレークポイントの適応 | デスクトップ バージョンがあり、携帯電話/タブレットに適合させる必要があります。 |
/typeset | フォントの選択、レベル、サイズ、太さ、読みやすさの最適化 | テキストのレイアウトは「ほとんど無意味」に見える |
/arrange | レイアウトの間隔、視覚的なリズム、配置の修正 | 間隔が一貫しておらず、レイアウトが混雑しているか散在しているように感じられます |
デザインの強化
機能の完成に基づいて、動的な効果、個性、感情的な詳細を注入します。
| スキル | 何をすべきか | いつ使用するか |
|---|---|---|
/animate | 目的を持ったマイクロインタラクションとアニメーションを追加する | ページの機能は問題ありませんが、「硬い」と感じます。 |
/delight | サプライズの詳細とパーソナライズされたタッチを追加 | ユーザーにこのページを覚えておいてもらいたい |
/bolder | 視覚的なインパクトを増幅する | デザインが地味すぎて無難すぎる |
/colorize | 単調なインターフェースに戦略的な彩りを添える | ページは灰色すぎて、地味すぎて、温かみがありません。 |
/overdrive | 技術的な爆発レベルのエフェクト - シェーダー、スプリング物理学、スクロール ドライブ アニメーション | 特定の領域はすごい効果を望んでいます |
/onboard | 新しいユーザー ガイダンス プロセス、空の状態の設計 | 初めてのユーザーエクスペリエンス |
これら 4 つの強化スキルは漸進的な関係にあります。animate は基本的なダイナミック効果、delight は感情的、bolder は増幅、overdrive は爆発です。プロジェクトのニーズに応じて段階的に積み重ねてください。すべてを使用する必要はありません。
設計の最適化
収束と洗練 – 余分なものを取り除き、ずれを調整し、粗いエッジを研磨します。
| スキル | 何をすべきか | いつ使用するか |
|---|---|---|
/polish | 最終的な品質の磨き: 位置合わせ、間隔、一貫性 | リリース前の最後のパス |
/quieter | 視覚刺激の強度を下げる | デザインが派手すぎてうるさい |
/distill | 不必要な複雑さを最小限に抑えて削除する | ページ上の要素が多すぎるため、要素を減らしたい |
/normalize | デザイン システム標準を調整する (トークン、間隔、色) | スタイルが DESIGN.md 仕様から逸脱しています。 |
/clarify | UX のコピーライティング、エラー メッセージ、ラベルの文言を改善する | コピーライティングはわかりにくい、エラー メッセージは不親切 |
設計のレビューと検証
オンラインにする前の体系的な検査、問題の発見、採点、修正。
| スキル | 何をすべきか | いつ使用するか |
|---|---|---|
/plan-design-review | 実装前の設計計画のレビュー (0-10 スコア) | AIにデザイナーの視点で計画を見直してもらいたい |
/design-review | 導入後のビジュアル QA、スクリーンショットの自動比較と修復 | コードを書いた後、視覚的な復元度を確認します |
/critique | UX 評価: 視覚階層、認知負荷、感情的共鳴 | 構造化設計レビューレポートが欲しい |
/audit | 技術レビュー: アクセシビリティ、パフォーマンス、テーマ、応答性 | 本番稼働前の体系的なチェック |
/benchmark | パフォーマンスのベースライン テスト、前後の比較 | パフォーマンスに対する変更の影響を定量化したい |
gstack のフロントエンド関連のスキルは、機能別に インフラストラクチャ → 探索 → 実装 → 強化 → 最適化 → レビュー の 6 つのレイヤーに分かれており、設計からローンチまでの完全なパイプラインを形成しています。毎回すべてを実行する代わりに、必要に応じてそれらから引き出すことができます。
実践的なデモンストレーション: カウントダウン記念日ページを使用してプロセス全体を確認します
分類表を見るだけでは抽象的すぎます。私たちは、小さなプロジェクトを使用して上記のスキルをつなぎ合わせます - カウントダウン/記念日の単一ページの作成: 意味のある日付を選択し、デジタル アニメーションと背景効果を備えたカウントダウン表示を作成します。
このプロジェクトは小規模ですが完成度が高く、6 つのスキル レベルのほとんどをカバーするのに十分です。完全なプロセスは次のとおりです。
基建 → 探索 → 构建 → 增强 → 调优 → 审查 → 发布7 つのステップすべてを毎回実行する必要はありません。熟練したら、一般的に使用されるリンクは
/frontend-design → /animate → /polish → /shipの 4 ステップだけです。完全な能力を発揮するために、あらゆるステップがここで行われます。
ステージ 1: インフラストラクチャ - 設計言語を決定する
Skill：/design-consultation + /teach-impeccable
これはプロジェクトの開始時に 1 回だけ実行する必要があります。 DESIGN.md を出力します。これにより、AI にデザイン設定を記憶させることができます。プロジェクトにすでに DESIGN.md がある場合は、それを直接スキップします。
> /design-consultation
"我要做一个倒计时纪念日页面，风格偏好是深色背景、
数字大而醒目、整体氛围温暖但克制"ステージ 2: 探索 - 複数のオプションの比較
Skill：/design-shotgun
方向性がわからない場合は、AI に 3 ～ 5 つの視覚的なソリューションを生成させ、比較パネルを開いて選択します。
> /design-shotgun
"做一个倒计时/纪念日单页，展示距离某个日期的天/时/分/秒，
要有数字翻牌动画，背景有微妙的粒子或渐变效果，
整体氛围要温暖但不俗气。给我 3 个方向。"方向を 3 つのオプションから選択します。必要なものが正確にわかっている場合は、このステップをスキップして、ステージ 3 に直接進みます。
ステージ 3: ビルド - 運用レベルのコードを生成する
Skill：/frontend-design + /adapt
コアリンク。最初から応答性を確保しながらコードを作成します。
> /frontend-design
"基于方案 2 实现倒计时页面。要求：
- 实时倒计时（天/时/分/秒）
- 响应式布局（桌面 + 手机）
- 日期可配置"ステージ 4: 強化 – 動きと個性を注入する
スキル: /animate → /delight (オンデマンド /overdrive)
これら 3 つは漸進的な関係にあります。animate は基本的なダイナミック エフェクト、delight は感情的なディテール、overdrive は爆発的なエフェクトです。必要に応じてレイヤーを追加します。
> /animate
"给倒计时数字加翻牌动画效果，页面加载时有入场动画"
> /delight
"给页面加一些有趣的小细节，比如到达整点时的微庆祝效果"
> /overdrive （可选，想要 wow effect 的话）
"给背景加粒子效果或流体动画，60fps"DESIGN.md を参照するアニメーション制約に注意してください。デザイン システムで 150 ミリ秒のホバー遷移のみが許可されている場合、/overdrive は適用されません。これは良い判断練習になります。
ステージ 5: チューニング - 収束と磨き
スキル: /typeset + /polish (オンデマンド /distill、/normalize)
間隔の調整、フォントの階層、視覚的なリズム。追加しすぎた場合は、/distill を使用して減算してください。
> /typeset
"检查数字字体的大小、粗细层级是否合理"
> /polish
"最终打磨，检查对齐、间距、暗色模式支持"ステージ 6: レビュー – 体系的なチェック
Skill：/design-review + /audit
ビジュアル QA + 技術レビュー。 /design-review は自動的にスクリーンショットを取得して問題を比較および修正し、/audit はアクセシビリティとパフォーマンスをチェックします。
> /design-review
"视觉 QA，截图对比桌面和手机端"
> /audit
"检查可访问性和性能"ステージ 7: リリース
Skill：/ship
標準の gstack リリース プロセス - テスト、差分レビュー、PR の作成。
> /ship期待される結果: プロセス内で 8 ～ 10 のフロントエンド スキルを使用した、視覚的に優れたカウントダウン ページ。それよりも重要なのは、「どの段階でどのスキルを使うか」という感覚を確立することです。
毎日のチートシート
以上が完全なプロセスです。日々の開発で特定の問題が発生した場合は、次の表を確認してください。
| 私の現在の質問 | 何を使うか |
|---|---|
| どのようなスタイルにしたいのかわからない | /design-shotgun |
| ページ機能は良いが「ほとんど役に立たない」と感じる | /polish |
| 何かが間違っているような気がしますが、説明できません | /design-review |
| フォント/レイアウトがぎこちないです | /typeset |
| 乱雑な間隔と混雑したレイアウト | /arrange |
| スタイルがデザインシステムから逸脱している | /normalize |
| パブリックコンポーネントを抽出したい | /extract |
| ページが複雑すぎるため、 | を削除したいと思います。 /distill |
| デザインが地味すぎて無難すぎる | /bolder または /colorize |
| デザインが派手すぎてうるさい | /quieter |
エラー メッセージのテキストが親切ではありません。 /clarify | |
| 携帯電話の表示に問題がある | /adapt |
| アニメーション効果を追加したい | /animate (基本) または /overdrive (爆発) |
| オンライン化前の体系的な検査 | /audit |
| debug | /investigate |
概要
このメモは次の 2 つのことを行います。
- パノラマ - gstack の 27 のフロントエンド スキルは 6 つの層 (インフラストラクチャ→探索→実装→強化→最適化→レビュー) に分類されています。
- 実践的なデモンストレーション - カウントダウン記念日ページを使用して完全なワークフローを実行し、各段階でどのようなスキルが使用されるか、およびその理由を示します。
重要なポイント: これらのスキルの最も強力な使用法は、スキルを個別に呼び出すのではなく、パイプラインで組み合わせることであり、各段階で明確なスキルを選択しながら、方向性を検討し、実装を構築し、磨きを強化し、リリースをレビューします。
ただし、プロセスに縛られないでください。熟練したら、ほとんどの場合、/frontend-design → /animate → /polish → /ship 4 つのステップで十分です。
gstack - Claude Code Skills
23+ opinionated skills that transform Claude Code from a single AI assistant into a virtual engineering team.
関連書籍:
- gstack の概念 — gstack とは何ですか? gstack によってどのような問題が解決されますか?
- gstack 実践編 — インストールから実行までの完全なワークフロー
- gstack スキル アーキテクチャの分解 — スキル開発者は何を学ぶことができますか?
- Claude Skills Concept — スキルの基礎となるメカニズムを理解する