penframe/docs/outline.md

A lightweight DSL-based wireframe and UI structure visualization tool.

# Penframe - プロジェクト概要(outline.md)

## 📌 概要

**Penframe** は、シンプルなDSL(ドメイン固有言語)を用いてワイヤーフレームやUI構造を記述し、視覚的にレンダリングする軽量ツールです。

テキストで画面構成やUIレイアウトを記述することで、**PC / タブレット / スマホ**向けの画面構造や流れを簡単に可視化できます。

Mermaid / PlantUML / Marp などのツールにインスパイアされ、**UI構造に特化した直感的な記法**を提供することを目的としています。

---

## 🎯 目的

- 誰でも簡単にUI構造を記述・共有できるDSLを提供する
- **PC / タブレット / スマホ** それぞれの画面サイズに対応(`@app` 構文)
- **見出し(@h1 / @h2 / @h3)やコンポーネントの位置指定(x / y)** が可能
- デザイン部分(フォントサイズ、スタイル)はツール側が一括管理 → ユーザーは構造に集中
- **SVG / HTML / PDF** への出力をサポート予定
- CLI / API から利用可能にし、**ドキュメントやツールチェーン** に組み込みやすくする

---

## 🛠️ コア概念

### @app

レンダリング対象の画面サイズ・スケールを定義します。

```plaintext
@app pc {
  width: 1440px;
  height: 1024px;
  scale: 1.0;
}

@app mobile {
  width: 375px;
  height: 812px;
  scale: 0.8;
}
```

### @h1 / @h2 / @h3

画面上に見出しを配置します。  
**x / y** で配置座標を指定し、色(color)はユーザーが指定可能です。  
フォントサイズやデザインはPenframe側で統一管理します。

```plaintext
@h1 "チャット画面設計" {
  x: 100;
  y: 50;
  color: #333333;
}

@h2 "エージェント設定" {
  x: 120;
  y: 100;
  color: #666666;
}
```

---

## ✨ 予定機能

- DSLパーサ： PEG.js または Nearley.js を使用予定
- レンダリングエンジン： SVG出力を第一目標とし、HTML / PDF 出力にも対応予定
- Webベースのライブプレビュー
- CLI(例： `penframe compile outline.pf --output out.svg`)
- 基本的なコンポーネントライブラリ(ボックス、テキスト、アイコン、画像プレースホルダーなど)
- カラープリセットによるテーマ対応
- **入れ子構造の表現**(コンテナ内に要素を配置)
- Markdownとの連携を視野に入れた拡張記法

---

## 🚧 現状状況

- プロジェクト名： `Penframe` に決定
- `@app`, `@h1`, `@h2`, `@h3` の構文設計済み
- パーサのドラフト作成中
- SVGレンダラーの初期設計中
- CLIインターフェースの設計案策定開始

---

## 📅 今後の予定

- DSL構文(PEG.js)定義の完成
- パーサ→AST変換の実装
- SVGレンダリングエンジンの実装
- CLI MVP版の作成
- サンプルファイルと初期ドキュメントの作成
- GitHub公開＋コントリビューター募集

---

## 🙌 コントリビューター

- プロジェクトリード: 良太 山藤
- コミュニティからの貢献歓迎！

---

## ライセンス

MIT License