01
フォームでも、YAMLでも
デザイントークンをフォームで調整し、DESIGN.mdのテキストも編集。文字と画面を行き来して、ルールを組み立てます。
01 — Features
Featuresできること
02
ルールを見える形に
中央のプレビューで色や文字の見え方を確認。PREVIEW.mdで文例なども調整し、使う場面に合った見本にできます。
03
AIと同じファイルを使う
CodexやClaude Codeと作業フォルダを共有し、デザインの調整を依頼。AIが変更したファイルもプレビューへ反映されます。
02 — Get started
Get started使いはじめる
01
リポジトリを取得する
GitHubからファイルを取得し、READMEの案内に従って起動。使うブラウザに合わせて、直接開く方法かローカルサーバー版を選びます。
02
デザインを開いて調整
プロジェクトフォルダを選び、デザインを開きます。フォームまたはYAMLで編集し、中央のプレビューで確認します。
03
保存し、AIと育てる
通常の編集は自動保存。同じフォルダをAIの作業対象にすれば、自然言語で相談しながらルールを更新できます。
03 — Spec
Spec仕様・関連情報
| 主なファイル | DESIGN.md：デザインシステム ／ PREVIEW.md：プレビュー用の設定 |
|---|---|
| 管理単位 | design/<デザインシステム名>/ にDESIGN.mdとPREVIEW.mdを配置 |
| 起動方法 | Chrome・Edgeはindex.htmlを直接開く方法に対応。その他のブラウザはREADMEのローカルサーバー版を参照。 |
| 保存 | 通常の編集は自動保存。外部から開いたファイルは「別名で保存」を使用。 |
| AIとの作業 | Codex・Claude Codeなどに同じ作業フォルダを指定 |
| ソース | github.com/yoshihik0/design-md-editor |
ローカルのプロジェクトファイルを扱うアプリです。最新の起動手順と対応環境はGitHubのREADMEを確認してください。