スキル自身の言葉で
Pretextネイティブのテキストレイアウトを備えた本番品質のHTML/CSSを生成します。テキストは実際にリフローし、高さは動的に計算され、レイアウトはリサイズに応じて適応します。承認済みのモックアップ（/design-shotgun）、CEOプラン（/plan-ceo-review）、デザインレビューのコンテキスト、またはユーザーの説明から作業を行います。デザインの複雑さに応じて適切なPretext APIのティアにルーティングされます（シンプルなレイアウトではprepare + layoutを使用、チャットUIではprepareWithSegments + walkLineRangesを使用、エディトリアルスプレッドではlayoutNextLineを使用してテキストが障害物を回避します）。
30KBのオーバーヘッド、依存関係なし。自己完結型のHTMLファイル（Pretextをインライン化してベンダリング）またはフレームワークコンポーネント（React/Svelte/Vue）を生成します。デフォルトはバニラHTMLで、ブラウザで即座にプレビューできるライブリロードサーバーを備えています。lorem ipsumは決して使用せず、モックアップから実際のコンテンツを抽出するか、プランから現実的なテキストを生成します。
生成されるもの
- Pretextをインライン化してベンダリングした自己完結型のHTMLファイルで、トークンから生成されたCSSカスタムプロパティ、セマンティックなHTML5、ライブ編集用のcontenteditable + MutationObserver、リサイズ時の再レイアウト用のResizeObserverを備え、~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.htmlに保存されます
- プロジェクトの依存関係に追加されたPretextのimportを含むフレームワークコンポーネントファイル（React TSX/JSX、Svelte、Vue）で、~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.[tsx|svelte|vue]に保存されます
- HTMLと並んで、source_mockupパス、source_planパス、モード（approved-mockup/plan-driven/freeform/evolve）、pretext_tier、フレームワークの選択、イテレーション回数、日付、画面名、ブランチを含むfinalized.jsonのメタデータです
- ユーザーが抽出の提案を受け入れた場合、生成されたHTMLから抽出されたCSSカスタムプロパティ、フォントファミリー、カラーパレット、スペーシングスケール、ボーダーラディウス、シャドウ値を含む、オープンなDESIGN.md形式のDESIGN.mdファイルです
仕組み
- 01デザインコンテキストを検出してルーティング
/design-shotgunによるapproved.json、CEOプラン、デザインバリアント、またはDESIGN.mdトークンの有無を確認します。
- 02実装仕様を抽出
デザインバイナリが利用可能な場合、承認済みPNGに対してpromptコマンドを実行し、GPT-4o visionで色、タイポグラフィ、レイアウト構造を抽出します。
- 03Pretext APIのスマートルーティング
デザインをティアに分類します：シンプルなレイアウトはprepare + layoutでリサイズ対応の高さを計算し、カードグリッドは同様の手法で自己サイズ調整を行い、チャットUIはprepareWithSegments + walkLineRangesでバブルをぴったりフィットさせ、エディトリアルスプレッドはlayoutNextLineで障害物の周りにテキストを配置します。
- 04PretextネイティブのHTMLを生成
Pretextをベンダリングしてインライン化した（またはCDNフォールバック付きの）単一ファイルを、トークンからのCSSカスタムプロパティ、セマンティックHTML5、ライブ編集用のcontenteditable + MutationObserver、リサイズ時の再レイアウト用のResizeObserverとともに、モックアップまたはプランから抽出した実コンテンツで書き出します。
- 05プレビュー前にスロップゲートスキャンを実施
デザイン検出器が利用可能な場合、完成したページを一度スキャンし、AIスロップパターン（紫のグラデーション、同一のカードグリッド、モックアップに存在しない汎用的なCTA）を検出します。