A collection of agent skills for coding assistants like Claude Code and Codex, covering grilling sessions, TDD, bug diagnosis, planning and code review.
Innei/ryugi
A workflow plugin for coding agents that brainstorms with mockups, gets spec approval, then builds under TDD, with live visual artifacts.
- Stars
- 367
- Forks
- 15
- Open issues
- 4
- Last commit
- yesterday
What is it?
Ryugi is a development workflow for coding agents. Instead of having an agent jump straight into code, it moves through stages: brainstorming, mockups, a spec the user approves, then implementation under test-driven development, and finally verification against the approved design.
The agent's output is shown as live artifacts rather than only text. These include an artboard for comparing several UI directions side by side with comments on specific pixels, a design document with diagrams and inline comments, an HTML test bench with real sliders, and a verify view that puts built screenshots next to the approved design so the user can pass or reject them.
Ryugi installs as a plugin for a range of agent harnesses, including Claude Code, Codex, Cursor, Gemini CLI and others. A local artifact library runs through npx ryugi-artifacts, and sharing links goes through Ryugi Cloud. It is a fork of Superpowers v7.0.0.
Key features
- 01Brainstorms and produces mockups before any code is written
- 02Requires user approval of a spec before implementation
- 03Builds under test-driven development
- 04Artboard for comparing UI options side by side with pixel comments
- 05Design documents with diagrams and editable comments
- 06Verify view compares built screenshots against the approved design
Use cases
- Exploring several UI directions for a web or app feature before committing to one
- Reviewing a design document with inline comments before implementation starts
- Tuning animation or interaction parameters with live sliders in an HTML page
- Checking that an agent's built UI matches the approved design
Quick start
- 1
In Claude Code, add the Ryugi marketplace
/plugin marketplace add Innei/ryugi - 2
Install the Ryugi plugin
/plugin install ryugi@ryugi-dev - 3
Send your first request to start brainstorming before any code is written
Things to know
- The artifacts application is AGPL-3.0-only, so a modified version run as a network service must offer its source to users.
- The repository's license metadata is not cleanly detected, so licensing needs a manual check across its parts.
In collections
Topics
FAQ
- What is ryugi?
- A workflow plugin for coding agents that brainstorms with mockups, gets spec approval, then builds under TDD, with live visual artifacts. Ryugi is a development workflow for coding agents. Instead of having an agent jump straight into code, it moves through stages: brainstorming, mockups, a spec the user approves, then implementation under test-driven development, and finally verification against the approved design.
- Is ryugi free to use? What license does it have?
- ryugi is open source under the Other license. Check the license terms before using it in commercial products.
- Is ryugi still maintained?
- Actively maintained. The last commit to ryugi was on Nov 7, 2026.
- What can I use ryugi for?
- Exploring several UI directions for a web or app feature before committing to one Reviewing a design document with inline comments before implementation starts Tuning animation or interaction parameters with live sliders in an HTML page Checking that an agent's built UI matches the approved design
- How do I install ryugi?
- In Claude Code, add the Ryugi marketplace: /plugin marketplace add Innei/ryugi Install the Ryugi plugin: /plugin install ryugi@ryugi-dev Send your first request to start brainstorming before any code is written
- Where can I get ryugi?
- The source code and installation instructions are on GitHub: https://github.com/Innei/ryugi
Summary generated by AI from the project's README. GitHub stats refresh daily.
Related projects
Design posters, social posts, slides and landing pages inside GitHub Copilot, Claude Code, Codex or Cursor, with no separate desktop app.
An agent skill for Claude Code and Codex that turns one reference image into a playable 2D browser game prototype.
A local goal-run workspace that gives Codex and Claude Code a charter, task board, receipts, and a verification loop for long coding tasks.
A framework for teams to build their own AI coding harness on Codex and Claude Code, carrying project rules and knowledge through the development lifecycle.
A pytest plugin that copies test data directories into temporary folders so tests can safely read and modify fixture files.