GRIDGEIST
Menu
ไทย GitHub ↗

Agent skill / Product-native interface direction

STRUCTUREWITH SPIRIT.

Gridgeist turns audience, task, product evidence, and brand intent into a visual system that belongs to the product.

Install the skill

01 / The premise

A grid is a decision,
not a costume.

Structure may be visible, quiet, or invisible. The audience, task, content, and established brand decide—not a house aesthetic.

02 / Diagnostic

Move the idea,
not the furniture.

COURSE / 04INTERFACE STUDYGENERIC
NEW LEARNING EXPERIENCE

Master design.
Unlock your potential.

Everything you need to level up your skills and achieve more.

03 / Operating modes

One system.
Three ways in.

  1. 01

    Create

    Turn content hierarchy and product intent into a complete responsive interface.

  2. 02

    Redesign

    Preserve behavior and brand while replacing weak patterns with a coherent direction.

  3. 03

    Review

    Diagnose clarity, hierarchy, type, responsiveness, accessibility, and implementation.

04 / Structural range

One method.
Different signals.

Illustrative specimens—not client work. Each surface changes its structural intensity while preserving one evidence-first method.

01 / VISIBLETechnical system

Explicit tracks expose relationships in data, code, and operational state.

02 / QUIETImage-led story

Quiet alignments give artwork, captions, and narrative room to lead.

03 / INVISIBLEDirect-manipulation tool

The primary canvas dominates; structure survives through tool placement and touch behavior.

04 / STATE-LEDTransactional flow

Stable controls, explicit status, and recovery carry the visual hierarchy.

05 / System contract

One direction.
Every decision.

Version 1.2 connects color, type, layout, spacing, components, states, media, and motion before polish begins. The contract stays proportional to the surface.

01 / FoundationRaw values
02 / SemanticProduct roles
03 / ComponentBehavior in context
Color + typeRoles before values.

Foreground pairs, hierarchy, language coverage, and loading behavior remain explicit.

canvas → text → action
Layout + spacingPriority before tracks.

One rhythm governs alignment while each viewport recomposes around the primary task.

360 → 768 → 1280 → 1600
ComponentsAnatomy before instances.

Shared jobs define variants, density, long-content behavior, and narrow-container rules.

job → anatomy → variant
States + motionEvidence before claims.

Focus, selection, error, success, and reduced motion survive without color alone.

DefaultSelectedFocus

06 / Evaluation

19

Nineteen scenarios.
Six system runs.

The published suite now covers creation, redesign, review, brand adaptation, direction alignment, state recovery, accessibility, evidence integrity, companion ownership, and design-system coherence.

6 / 6 fresh v1.2 Scenario 19 implementations passed in English and Thai with independent responsive browser checks. Guardrails were repaired; real-user evidence remains open.

Read the evaluation suite ↗

07 / Field proof

One brief.
Two systems.

Tracefield preserves the baseline, exact prompt, final interface, verification record, and limits of Gridgeist's first flagship experiment.

Read the case study ↗
BASELINE10→28FINAL

08 / Install & update

Install once.
Update deliberately.

01 / CODEX PLUGINRECOMMENDED

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

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

Install globally for compatible agents.

npx skills add ohmiler/gridgeist -g
03 / UPDATEEXPLICIT

Refresh the marketplace or update an Agent Skills installation; updates never run silently.

codex plugin marketplace upgrade gridgeist npx skills update gridgeist -g -y
Read installation docs

Tagged releases
MIT licensed