Choose a page kit
Begin with a service, product, portfolio, or WordPress business structure.
devs Tools / Section Composer 1.0.0
Section Composer: Design and export complete web pages
Compose thirteen semantic page sections, manage content, headings, design tokens, and quality in one local project, then export eight HTML and WordPress implementation formats.
Section Composer is a local-first page composition workspace. Start from a page kit, arrange semantic sections, edit only the content slots each section needs, validate the complete page, and export eight deterministic HTML and WordPress implementation formats.
- Content and generation stay in this browser
- One semantic H1 and versioned quality evidence
- No automatic WordPress or server writes
First visit? Choose a Page Kit on the left, edit Content Slots on the right, then open Quality and Export.
View the detailed stepsOpening the local page workspace…
Page workflow
From a page goal to an implementation package
Arrange and write
Add, duplicate, move, hide, or remove sections, then edit typed content slots.
Preview and validate
Compare four widths, light and dark token modes, headings, required content, links, contrast, and WordPress conversion.
Export and verify
Download code together with conversion losses and install, verification, and rollback instructions.
Four page kits
Start from what the page must communicate
service-landing
Service landing
11 Sections saas-productSaaS product
10 Sections creative-portfolioCreative portfolio
8 Sections wordpress-businessWordPress business
9 SectionsA page kit is a starting structure, not finished copy. Replace sample claims, prices, proof, images, contact details, and legal text before publishing.
Eight adapters
One project, eight explicit outputs
Swipe horizontally to view every column.
| Output adapter（出力変換） | Generated result | Best for |
|---|---|---|
| Semantic HTML | HTML・CSS・必要時のみJavaScript | 一般的なWeb制作・静的サイト |
| Gutenberg markup | ページ全体とSection単位のBlock markup | WordPress投稿・固定ページ |
| Theme /patterns | WordPressテーマ用PHP Pattern file | テーマ開発・子テーマ |
| Pattern plugin | Pattern登録用の小型プラグイン | テーマ変更後もPatternを残す運用 |
| Starter Page Pattern | 新規固定ページの開始候補 | core/post-content・page |
| theme.json v3 fragment | palette・layout・custom tokenとCSS fallback | WordPress 6.6以降 |
| Project JSON | Project・検証レポート・catalog lock | 再編集・監査・引き継ぎ |
| Runbook（作業手順書） | Install・Verify・Rollback・Content Checklist | 安全な導入と復旧 |
Each adapter reports warnings and conversion losses. Motion, nested selectors, or editor-specific behavior are never removed silently.
Public knowledge base
Inspect the contract behind every generated page
Glossary
Terms used in the workspace
- Section（セクション／ページの区画）
- A semantic page region such as a hero, features, pricing, FAQ, or call to action.
- Content Slot（コンテンツスロット／入力項目）
- A typed field a section needs, such as a heading, link, image, price list, or FAQ pair.
- Variant（バリアント／配置違い）
- A layout or density variation that keeps the section’s meaning and content contract.
- Design Token（デザイントークン／意味付き設計値）
- A named design decision for color, type, spacing, radius, shadow, or motion.
- Quality Guard（品質ガード）
- Versioned checks for content, headings, accessibility, responsive layout, security, SEO, and WordPress output.
- Loss（ロス／変換損失）
- A behavior that cannot be represented completely by a selected output format.
Safety boundary
What this version deliberately does not automate
- No live WordPress, database, theme, plugin, or server writes.
- No remote image downloads, site scraping, arbitrary PHP, or AI-generated free-form HTML.
- No claim that a passing automated report replaces target-site, device, editor, accessibility, legal, or security review.
FAQ
Before exporting a page
Does it replace a visual page builder?
It uses a vertical semantic section stack. This keeps reading order, responsive behavior, keyboard operation, and WordPress serialization predictable.
Can it publish directly to WordPress?
No. It generates block markup, pattern files, a pattern plugin, a starter pattern, theme.json fragments, and runbooks. You review and install the chosen output.
Why are warnings and losses included?
A target format cannot always preserve motion, nested selectors, or editor behavior. Recording the difference makes installation and rollback reviewable.