by ohmiler
Gridgeist turns product intent into a rigorous visual system—without the generic AI SaaS aftertaste.
# Add to your Claude Code skills
git clone https://github.com/ohmiler/gridgeistgridgeist is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by ohmiler. Gridgeist turns product intent into a rigorous visual system—without the generic AI SaaS aftertaste. It has 53 GitHub stars.
gridgeist's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/ohmiler/gridgeist" and add it to your Claude Code skills directory (see the Installation section above).
gridgeist is primarily written in HTML. It is open-source under ohmiler on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh gridgeist against similar tools.
No comments yet. Be the first to share your thoughts!
Unlocks once the catalog security scan passes (runs nightly).
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
English · ภาษาไทย · Website · Examples
Gridgeist is an agent skill for creating, redesigning, and reviewing web interfaces with a strong grid, precise typography, technical minimalism, and editorial discipline. It helps agents move beyond generic AI-generated SaaS patterns while preserving product intent, behavior, responsiveness, and accessibility.
This illustrative Northline logistics comparison is rendered from two full HTML/CSS pages with the same product, copy, data, and viewport.
Same content and operating data; a different design system. Gridgeist shifts the visual identity from generic cards to a live freight network built from product evidence. Open the Before page or open the After page.
Download this repository:
git clone https://github.com/ohmiler/gridgeist.git
Copy the skills/gridgeist/ directory into your agent's skills directory. The directory location and skill-discovery behavior vary by agent, so check that product's skills documentation if needed.
Start a new agent session in your web project and paste:
Use the Gridgeist skill to review this interface without editing it yet. Give me a one-line verdict, prioritized findings with evidence, and one coherent redesign direction. Preserve the product's behavior and brand.
Agents that support explicit skill invocation can use $gridgeist in the prompt. Continue to Installation for product-specific details and more examples.
git clone https://github.com/ohmiler/gridgeist.git
Copy-Item -Recurse .\gridgeist\skills\gridgeist "$HOME\.agents\skills\gridgeist"
Codex should detect the skill automatically. If it does not appear, restart Codex.
This repository is also packaged as a Codex plugin through .codex-plugin/plugin.json. The plugin points to the same skills/gridgeist/ directory, so direct skill installs and marketplace distribution share one source of truth.
Add the Gridgeist marketplace, then install the plugin:
codex plugin marketplace add ohmiler/gridgeist
codex plugin add gridgeist@gridgeist
Start a new Codex session after installation so the bundled skill is discovered.
For Claude Code, Cursor, Gemini CLI, GitHub Copilot, OpenCode, and other compatible agents, install Gridgeist with the open agent skills CLI:
npx skills add ohmiler/gridgeist -g
The installer discovers skills/gridgeist/ and prompts you to choose the target agents. To select one directly, pass its agent name; for example:
npx skills add ohmiler/gridgeist -g -a claude-code
Copy the skills/gridgeist/ directory to the skills directory used by your agent. The agent must support the Agent Skills SKILL.md convention. Discovery and invocation behavior can differ between products.
Use $gridgeist to redesign this Next.js course landing page. Preserve all behavior and the blue brand color, but replace the generic SaaS cards with an editorial grid and verify desktop and mobile layouts.
Review this dashboard with $gridgeist. Give me a one-line verdict, prioritized findings with evidence, and a coherent replacement direction before editing.
Use $gridgeist to create a technical documentation homepage where real API examples and navigation structure carry the visual identity.
Gridgeist also allows implicit invocation when the agent recognizes a matching web-interface task.
.codex-plugin/
plugin.json Codex plugin manifest
skills/gridgeist/ Installable skill
SKILL.md Trigger conditions and core workflow
agents/openai.yaml Agent-facing interface metadata
references/ Design language and review checklist
evals/prompts.md Repeatable manual behavior checks
docs/ Design and implementation records
Tracefield applies Gridgeist to a working developer-observability dashboard. Its repository preserves the generic baseline, exact prompt, evaluation rubric, tested trace domain, and responsive final interface.
Ledgerline tests the same skill on dense payment API documentation. Its repository preserves a conventional baseline, exact prompt, six-part rubric, deterministic API content, four viewport checks, and the responsive final interface.
Morrow stress-tests brand adaptation with a fictional image-led creative portfolio. Its repository preserves shared AI-generated artwork, a conventional baseline, exact prompts, a six-part rubric, four viewport checks, and a final interface deliberately unlike the technical case studies.
Doodlewood tests playful interaction design with a fictional, privacy-preserving children's drawing studio. Its repository preserves the generic baseline, exact prompt, six-part rubric, local drawing engine, four viewport checks, and explicit limits around child safety and real-user evidence.
Together, the four self-produced case studies cover data-heavy, content-heavy, image-led, and playful interactive surfaces. Further validation should now prioritize independent users, agents, and projects rather than adding another first-party visual category.
python "$HOME\.codex\skills\.system\skill-creator\scripts\quick_validate.py" .\skills\gridgeist
Behavioral evaluation prompts are in evals/prompts.md.
Keep SKILL.md concise and place detailed, conditionally loaded guidance in references/. For behavior changes, update an evaluation scenario and record what failed before changing the skill. Open an issue or pull request with the motivating prompt and observed output.