DESIGN.md と SKILL.md：見た目の文脈と手順
見た目の情報は視覚コンテキストに、再利用する手順はスキルに、今回の変更は要件に分けます。ページごとのレイアウトを保ちつつ、サイト全体の方向性を揃えやすくなります。
2026年10月8日に確認。利用するツールのバージョンに対応した公式ドキュメントをご確認ください。
動くページを出発点に
動く HTML ページをプレビューし、ソースと付属プロンプトを使ってコーディングエージェントで手法を試せます。
Skills は引き続きログイン不要で無料閲覧・コピーできます。テンプレートのプレビューは公開されています。ソースと付属プロンプトのダウンロードにはアカウントと対象の購入権限またはプランが必要です。 ソースの利用条件と料金
DESIGN.md に何を書くか
Google の DESIGN.md は視覚的なアイデンティティを記述する alpha 仕様です。色の役割、書体、余白、操作要素、レスポンシブ動作と、その理由を示しましょう。下記は通常の Markdown で、Google のトークンスキーマで検証したファイルではありません。
SKILL.md に何を書くか
繰り返す手順として、レビューのタイミング、確認対象、守る動作、失敗の報告方法を記します。案件の事実と今回の依頼は別にします。例はこの分担を示す指示文で、第三者の配布パッケージではありません。
具体的なウェブサイト要件と組み合わせる
ページ、訪問者、主要操作、実際の内容、守る動作を指定します。視覚情報と手順を明示的に読ませ、編集前に制約を説明させます。同じファイル名でも、すべてのツールが自動で読み込み制約を強制するとは限りません。
変更に合わせて情報を更新する
採用した変更の説明と確認結果を更新します。共通操作には安定したルールを保ち、各領域の配置は必要に応じて変えます。動作やアクセシビリティはコードとブラウザでも検証し、メモだけに任せないでください。
書き換えて使えるオリジナルの練習
Neruve が作成した英語の入力例です。実行結果や有料テンプレートのプロンプトではありません。架空の情報を実際の情報に置き換えてください。
ビジュアルアイデンティティのメモ
# Fieldnote visual context — original exercise
Audience: small product teams comparing research notes.
Primary action: Explore the workflow → #workflow.
Background: warm paper; primary text: ink; muted text must remain readable.
Typography: a strong but compact heading, readable body text, short line lengths.
Spacing: use a consistent scale; the research-note specimen has more breathing room.
Links and buttons: clear intent, visible keyboard focus, readable hover states.
Motion: brief and optional; respect reduced-motion preferences.
Mobile: stack the specimen below the introduction; avoid horizontal scrolling.
Protected facts: no invented customers, testimonials, prices or signup behavior.
This is plain Markdown context, not a validated DESIGN.md token-schema file.
If converting it to Google's format, check the current alpha specification.手順だけを記述したレビュースキル
---
name: review-website-layout
description: Review a website layout and propose one evidence-backed repair.
---
1. Read the project's supplied visual context and protected behavior.
2. Open the actual page at desktop and mobile widths.
3. Record a concrete layout defect and its viewport; do not infer a pass from code.
4. Propose one scoped repair before changing source.
5. Repeat the same check after the repair; retain unresolved defects.
This is an original instruction-only exercise, not Anthropic's frontend-design
skill, a packaged plugin, or a compatibility-tested installation.実際の演習：CodexでFieldnoteを生成
Fieldnote では独自の入力、未編集の Codex HTML、デスクトップとモバイルの確認記録を公開しています。frontend-design Skill は使用していません。ChatGPT や Claude Design の実測ではありません。
実際の演習：CodexでFieldnoteを生成よくある質問
Claude Code、Codex、Stitch で使えますか？
各ツールが文書化する形式と読み込み方法を使ってください。通常のメモはテキストとして渡せますが、変換、自動検出、拡張は別途確認が必要です。Neruve の DESIGN.md 出力や自動連携を約束するものではありません。
デザインと付属プロンプトを見る
Neruve の公開カタログではサイトのデザイン、利用可能な対応プロンプト、Skills ディレクトリを提供しています。操作可能なプレビューにログインは不要です。対応するプロンプトにはアイテムとプランの利用条件が適用されます。このワークフローでは自分の開発ツールを使うため、公開された Neruve サイト生成機能は必要ありません。
公式資料
外部ツールやスキルは各作者に帰属します。参照リンクは提携や利用権の付与を意味しません。