What is HappyHands?
HappyHands is a local design review workbench for products built with coding agents. It connects screenshots, project design sources, findings, change plans and review records. A person makes the final accept or reject decision.
The HappyHands guide
A local design review workbench for products built with coding agents. Find UI issues, confirm scoped changes, and check the result.
From finding an issue to reviewing the result
Capture the agreed pages, devices and interaction states. Review screenshots alongside source code and the product’s own design rules. Choose an issue and confirm a plan; your coding agent implements it in an isolated Git worktree. Capture the result, run applicable checks and independent review, then make your own accept or reject decision.
Choose design systems and components
The resource library includes HappyHands, Quartz and Lime systems, component previews and design references. Check your existing rules, upstream licensing and technical compatibility before adopting anything. An external example or reference is not an installation into your project.
- HappyHands / Brand rules and product components
- Quartz / AI workflows and professional tools / Upstream source
- Lime / Personal assistants and consumer apps / Upstream source
- Component previews and design references
Customize and export a theme
Selecting a Theme Studio preset updates the preview immediately. Adjust colors, type, corners and other tokens across light and dark examples. Export CSS, Tailwind, registry data or a Harness-compatible Foundation approval file. Browser drafts do not automatically write your repository.
Open Theme StudioStart the local workbench
Prepare Git, Node.js 22.15+, pnpm 11.19.0 and Chrome or Edge. Model diagnosis and screenshot review require a configured, signed-in Codex CLI. Run these commands in your local terminal, then connect a project you have permission to review.
git clone https://github.com/ShuaiMXu/happyhands.git
cd happyhands
pnpm install --frozen-lockfile
pnpm workbenchOpen http://127.0.0.1:4190/apps/designer/. Provide your repository, working preview, user task and design sources. Confirm pages, devices and states before capture.
Use your existing coding tools
Codex CLI supports diagnosis, screenshot-aware review and implementation. Claude Code has an implementation adapter; full end-to-end validation remains open. Cursor, Kimi Code and WorkBuddy can operate the Harness with local browser, terminal and repository access, but have no dedicated implementation adapters here.
Data, licensing and Alpha scope
Run records stay in the local .harness/ directory. Model-assisted steps send selected source context and screenshots to your configured model provider. Original core code is MIT licensed; third-party resources retain their own terms, and provider charges are separate. This is a Local Web Alpha: unseen pages and untested interactions remain unreviewed.
Frequently asked questions
Can I enter a URL on the website and have code fixed automatically?
The website provides setup prompts, design resources and Theme Studio. The local workbench and Harness run the review workflow. Your coding tool must check preview and capture requirements; code changes require an accessible local repository, confirmed scope and an implementation adapter.
Which coding tools can I use?
Codex CLI supports model diagnosis, screenshot-aware review and implementation. Claude Code has an implementation adapter; complete end-to-end validation remains open. Cursor, Kimi Code and WorkBuddy can operate the Harness with local browser, terminal and repository access, but do not have dedicated implementation adapters here.
How do I use my existing design system?
Provide your project’s DESIGN.md, style tokens and component source. Extracted rules start as candidates for review, not approved constraints. Theme Studio can export a Harness-compatible Foundation approval file.
Is the source open, and does using it cost money?
Original HappyHands core code is MIT licensed. Third-party code, assets and dependencies retain their own terms, including tldraw’s separate production-use requirements. Your configured model provider may charge separately.
Where does my data go?
Run records stay in the local .harness/ directory. Model-assisted steps use your configured CLI to send selected source context and screenshots to the model service; processing is not entirely local. Check exports for sensitive information before sharing.
What are the current limitations?
HappyHands is a Local Web Alpha. Coverage follows the capture plan and completed checks. Unseen pages and untested interactions remain unreviewed. A model review cannot replace human acceptance.