Re-Grid

Generate and manage grids layouts with AI

Overview

Design responsive page layouts with Grid/Flex patterns, live breakpoints, skeleton mode, and AI chat-ops. Import a structure, and iterate visually.

Feature Set

AI Layout Generation

  • Generate layouts from a brief, sitemap, or Markdown outline
  • Suggests Grid/Flex patterns (tracks, gaps, areas, stacking)
  • Creates named slots and responsive breakpoints

Manual Layout Editing

  • Drag to reorder sections; resize tracks; snap to 4/8px rhythm
  • Breakpoint toggles (xs/sm/md/lg/xl/2xl) with live preview
  • Skeleton mode to validate density and reading flow

AI Editing via Chat

  • Add/rename/move slots; change columns/rows/gaps
  • Switch patterns (Grid ↔ Flex) per region
  • Minimal-diff ops + undo/redo; protects against replace-all

Imports & Exports

  • Import structure via JSON, Markdown, or simple CSV
  • Export single-file React + Tailwind component and layout JSON
  • Export PNG/SVG thumbnails for design reviews

Instructions

Accepted Structure Inputs

  • Markdown outline (H1/H2/H3 → sections/cards)
  • JSON (regions, slots, metadata like “hero”, “sidebar”, “gallery”)
  • CSV (name, type, priority, group)

Tips for Better Generations

  • State the purpose, target device mix, and desired content density
  • List key regions (hero, nav, content, sidebar, footer) and any fixed heights
  • Specify breakpoints that matter (e.g. “2-col at md, 3-col at xl; cards auto-fit”)

End-to-End: Outline → Live Layout → Code

  1. Provide a structure — paste a Markdown outline, choose a JSON layout, or enter a short brief. Pick default pattern (Grid or Flex) and initial breakpoints.
  2. Generate — Re-Grid produces a normalized layout.json (regions, slots, patterns, gaps, bp-overrides) and renders a live preview.
  3. Refine visually — drag to reorder, resize tracks, toggle breakpoints (xs…2xl), and use Skeleton Mode to check density/whitespace.
  4. Iterate via Chat — request targeted edits (e.g. “cards auto-fit min 220px at ≥md”, “sidebar 280px left at ≥lg”). Chat applies minimal diffs and logs them.
  5. Export — download a single-file React + Tailwind component (named regions/slots), PNG/SVG thumbnails, and the canonical layout.json.

Tip: Treat layout.json as the source of truth. Re-import it later or hand it off across your app suite.

Layout via Chat (Minimal-Diff Ops)

Chat edits your layout using minimal operations against layout.json (add / update / delete / move / change pattern). It never replaces the whole layout unless you explicitly ask to reset.

Add & Arrange
  • “Insert a CTA strip between hero and features.”
  • “Add a left sidebar (280px) to Content at ≥lg.”
Skeleton & Density
  • “Enable skeleton mode; target ~65ch line length.”
  • “Tighten vertical rhythm by 2px in features.”
Grid Controls
  • “Cards: repeat(auto-fit, minmax(220px, 1fr)); gap 24px.”
  • “Areas: ‘hero hero’ / ‘content sidebar’ at ≥md.”
Reset (explicit)
  • “Reset and generate a magazine grid homepage.”
  • “Replace all with a two-pane docs layout.”
Flex Controls
  • “Header: display flex; justify-between; items-center; gap-4.”
  • “Tag list can wrap with gap-2.”
Breakpoints
  • “At md switch to 2 columns; at xl switch to 3.”
  • “Hide sidebar < md; move widgets below content.”

Notes: Slot IDs remain stable; breakpoint rules are respected; manual tweaks are preserved unless you request a replace-all.

Technical Overview

Stack

  • React (Vite) UI with Tailwind utility classes
  • shapeRegistry for pluggable sections/cards/navs
  • Drag & Drop (React DnD or dnd-kit) for slot reordering and nesting
  • Export to React + Tailwind and PNG/SVG (html-to-image)
  • Icons: Lucide; optional Framer Motion transitions

Layout Data Model

  • regions[]: top-level areas (hero, content, sidebar, footer)
  • slots[]: ordered children within a region (cards, rows, widgets)
  • pattern: grid | flex | flow per region
  • grid: columns/rows, gaps, areas, auto-fit rules
  • flex: direction, wrap, justify, align, gap
  • breakpoints: per-bp overrides merged top-down
  • skeleton: density hints (line length, block heights)
  • history: undo/redo stacks (manual & AI ops)

Chat Editing Protocol

  • Natural language → minimal operations (add/update/delete/move/pattern)
  • replaceAll blocked unless user explicitly resets
  • Snapshots include breakpoints/areas to prevent destructive rewrites
  • Dedicated AI Undo/Redo stack for chat changes

Exports

  • React + Tailwind: single component with named regions/slots
  • PNG/SVG: screenshot of current breakpoint & mode
  • layout.json: canonical model for re-import and cross-app handoff

Pattern Comparison

CSS Grid

  • Pros: Precise two-axis control; named areas; complex layouts
  • Cons: Slightly higher upfront planning; can be verbose

Flexbox

  • Pros: Simple to reason about; great for bars/lists
  • Cons: One-axis control; complex grids can be awkward

Flow

  • Pros: Content-first; fast to implement
  • Cons: Less explicit structure; harder complex composition