GRIDGEIST
ไทยGitHub ↗

Documentation / v1.0

FROM INTENT
TO SYSTEM.

Use Gridgeist to create, redesign, or review a web interface with a clear hierarchy and a product-specific visual language.

READ TIME
08 MIN
MODES
03
LICENSE
MIT

01 / Quickstart

Start with the product,
not an aesthetic label.

Invoke $gridgeist and describe the product, the people using it, the job to do, what must remain unchanged, and how the result should be checked.

PROMPT / CREATEPLAIN TEXT
Use $gridgeist to design a landing page for a SQL learning platform.
Make the lesson, query editor, and results the visual evidence.
Avoid generic SaaS card grids.
Verify desktop, mobile, keyboard use, and accessibility.

Good context compounds. Let the agent inspect the repository and the rendered interface whenever possible.

02 / Installation

Install for your agent.

01

Codex plugin

RECOMMENDED

Add the marketplace, install the plugin, then start a new Codex session.

codex plugin marketplace add ohmiler/gridgeist
codex plugin add gridgeist@gridgeist
02

Compatible agents

UNIVERSAL

Use the open agent skills CLI for Claude Code, Cursor, Gemini CLI, Copilot, OpenCode, and other compatible agents.

npx skills add ohmiler/gridgeist -g
03

Manual

PORTABLE

Copy skills/gridgeist/ into the skills directory used by an agent that supports the Agent Skills SKILL.md convention.

03 / Choose a mode

One method.
Three entry points.

MODEUSE WHENSTART WITH
CreateBuilding a new interfaceContent hierarchy + visual thesis
RedesignRestyling a working productBehavior preservation + pattern inventory
ReviewDiagnosing a draft before editsPrioritized findings + evidence

04 / Write the brief

Four inputs remove
most ambiguity.

  1. 01

    Product + audience

    What is being designed, and who needs to use it?

  2. 02

    Mode + outcome

    Create, redesign, or review—and what should be true when the work is done?

  3. 03

    Constraints

    Name the behavior, routes, content, brand assets, and technology that must remain.

  4. 04

    Verification

    Specify viewports, interactions, keyboard paths, accessibility, and project checks.

Prompt pattern / Redesign +
Use $gridgeist to redesign this dashboard.
Preserve every route, function, content item, and brand color.
Rebuild the hierarchy around the user's primary investigation path.
Verify narrow mobile, tablet, laptop, and wide desktop widths.
Prompt pattern / Review +
Review this interface with $gridgeist without editing it yet.
Give me a one-line verdict, prioritized findings with evidence,
and one coherent replacement direction.

05 / Workflow

Inspect before composing.

  1. 01Inspect

    Understand the product, audience, routes, components, tokens, and rendered UI.

  2. 02Set a thesis

    Write one sentence that governs hierarchy, structure, expression, and product evidence.

  3. 03Define the system

    Set the container, columns, spacing, type roles, colors, borders, and responsive transformations.

  4. 04Compose

    Build hierarchy before detail. Let real code, data, workflows, or imagery carry visual weight.

  5. 05Implement

    Follow repository conventions, semantic HTML, keyboard behavior, and existing primitives.

  6. 06Refine

    Fix clarity first, then hierarchy, alignment, type, interaction, accessibility, and implementation quality.

06 / Verification

Evidence before
the verdict.

A

Clarity

Product, audience, and next action are obvious.

B

Hierarchy

Each viewport has one dominant element and a readable order.

C

Response

Mobile is recomposed around priority; code and tables do not overflow.

D

Access

Landmarks, focus, contrast, motion, and keyboard paths work.

07 / Limits

A method,
not a preset.

  • Grid, type, and color defaults are starting points—not fixed rules.
  • Output quality depends on the product context available to the agent.
  • Automated checks do not replace inspecting the rendered interface.
  • Model output can vary; re-test when the agent or skill changes.

READY TO SEE THE METHOD IN PRACTICE?

Explore the field studies