App Spec Builder
Plan app layout, buttons, style, embed rules, and Coder/QC handoffs
App Spec Builder Help
Configure
Edit the active lesson, lab, blueprint, prompt, export, or roadmap contract in the center work area.
Loading lesson…
SpecForge is preparing the curriculum map.
Handoff Map
SpecForge teaches the communication contract before the production chain: define the idea, build the mockup, verify the behavior, then route the proven artifact through the formal suite when needed.
- Founder idea / taste directionDescribe the product, screen, problem, desired behavior, and visual taste.
- SpecForge Coder/QC mockup promptTurn the idea into scoped implementation language with preserve lists and pass/fail checks.
- Local mockup / candidate artifactBuild the candidate locally first, then inspect the interaction and layout.
- Human smoke testConfirm the UX direction before formal routing.
- Formal Command Center routing laterUse the proven prompt and artifacts only when the workflow is ready for the suite.
- C-Suite / role review laterRole lanes can review product, trust, technical, and implementation implications.
- Steward archive / source treatment laterArchive/source decisions stay controlled and are not automatic.
v0.2.3.1 does not perform Command Center, C-Suite, Steward, canon, source-of-record, production, launch, release, or archive promotion. It only teaches behavior/spec language and prepares local artifacts.
HTML Structure Lab
Translate a screen idea into a semantic app skeleton. Output is text only: SpecForge does not execute, render, or inject the generated HTML.
Generated HTML Skeleton
Learning artifact only. Preview is text-only and not a production-ready implementation.
Build a skeleton to preview it here.
Skeleton Explanation
- Select regions and build a skeleton to see how app language maps to semantic HTML.
CSS + M3 Visual Language Lab
Translate a visual goal into layout, surfaces, spacing, states, responsive behavior, and CSS instructions. Output is text only: SpecForge does not inject, preview, or execute generated CSS.
CSS is not “make it pretty.” It is the visual behavior contract: layout, spacing, hierarchy, states, breakpoints, and tokens.
M3-inspired language means clear surfaces, adaptive layout, readable type, tonal hierarchy, and visible interaction states.
Generated CSS Spec + Skeleton
Learning artifact only. The CSS snippet is displayed as text and is not injected into the app.
Build a CSS spec to preview it here.
CSS Spec Explanation
- Select layout, surface, state, token, and responsive requirements to see how visual intent becomes an implementation-ready CSS handoff.
JavaScript Behavior + Event/State Lab
Translate app behavior into an implementation-ready JavaScript spec. Output is text only: SpecForge does not execute, inject, preview, or alter runtime code from generated content.
EventWhat happens in the UI or browser: click, input, submit, keydown, page load, or storage read/write.
HandlerThe function that responds to the event, validates conditions, changes state, and updates the interface.
StateWhat the app remembers right now: selected lesson, generated output, saved specs, open menus, enabled buttons, and progress.
ValidationChecks input before output, storage, or state changes happen.
PersistenceWhat survives reload through browser storage, such as localStorage saved specs or selected lessons.
RenderingHow the UI updates. Generated output must remain text-only and should use safe methods like textContent.
Generated JS Behavior Spec + Safe Skeleton
Learning artifact only. The behavior spec and pseudocode are displayed as text and are not executed.
Build a JS behavior spec to preview it here.
JS Behavior Spec Explanation
- Select event, state, validation, persistence, accessibility, and safety requirements to see how behavior intent becomes an implementation-ready JavaScript handoff.
Live Component Lab: Buttons and Actions
Touch each control. The status message confirms interaction without sending data anywhere.
Use: one dominant screen action.
Prompt: “Make Build Spec the primary action.”
QC risk: primary action must not hide secondary actions.
Use: helpful but lower-priority action.
Prompt: “Keep Load Sample visually quieter than Build Spec.”
QC risk: secondary action remains discoverable.
Use: neutral artifact action.
Prompt: “Place Copy Spec near the generated output.”
QC risk: copied content must match preview.
Use: very low-emphasis support action.
Prompt: “Make Guide available without dominating the workspace.”
QC risk: text button remains visible in both themes.
Use: compact action when the label is obvious or accessible.
Prompt: “Use an icon button with an accessible name.”
QC risk: icon-only controls need labels.
Use: action is not available yet.
Prompt: “Show disabled state until output exists.”
QC risk: disabled state must not rely on color alone.
Use: clearing or deleting user work.
Prompt: “Keep Reset visible but not dominant.”
QC risk: destructive behavior must be clear.
Use: lower-frequency or secondary actions.
Prompt: “Group lower-frequency actions under More.”
QC risk: menu must be reachable by keyboard.
Blueprint
Define the app identity, layout, navigation, button behavior, visual language, accessibility, WordPress embed rules, and portfolio card before writing the Coder prompt.
App Identity
Layout
Navigation
Buttons
Style + Icons
Accessibility + AI Agent
WordPress Embed
Portfolio Card
Prompt-to-Spec Builder
Export
Turn current SpecForge work into copyable and downloadable local artifacts. Previews are text only and downloads use browser Blob files only.
File Package Planner
Build a multi-file local project package plan and download each selected file separately. This does not create folders, ZIP archives, File System Access connections, or backend uploads.