Build clearer, more consistent websites and web apps with Cursor or Codex.
Design helps your AI assistant plan new pages, improve existing interfaces, and spot usability problems. It works with your product goals, components, and visual style so changes fit your project.
- Build with direction: turn an idea into a page or flow that fits your product.
- Improve what you have: refine layouts, mobile behavior, accessibility, and UI text.
- Know what to fix first: review a page or a branch's interface changes and get prioritized findings.
Use the latest stable GitHub Release for Cursor or Codex. Design requires Node.js 22+.
- Download the ZIP for your editor,
SHA256SUMS, andprovenance.jsonfrom the release page. - Follow the release ZIP instructions to verify the files and install the complete package.
- Reload Cursor or refresh the Codex Marketplace installation and start a new task. Review changed hook permissions when prompted.
Copy this prompt into Cursor or Codex on macOS or Linux:
Install the latest stable GitHub Release of geldmacher/design for this editor.
Read https://github.com/geldmacher/design/blob/main/docs/installation.md and follow
its release installer instructions. Prepare a source checkout if needed and use
the install-new-release-from-repo skill. Report the installed version, verification
result, and any reload or new-task steps I need to complete.
The agent-assisted installer needs Git, Node.js 22+, npm, and the matching editor prerequisites. The checkout provides the installer; the installed plugin is built from the selected release. Automatic UI checks stay off until you enable them in a project.
Manually: download and verify the latest release ZIP, then replace the installed version and repeat the editor activation steps.
Through your agent: use this prompt:
Update Design to the latest stable GitHub Release for this editor.
Use the install-new-release-from-repo skill from the geldmacher/design source
checkout. If it is not available, follow
https://github.com/geldmacher/design/blob/main/docs/installation.md to prepare it.
Report whether anything changed, the installed version, and any remaining activation steps.
With the source checkout open, invoke /install-new-release-from-repo in Cursor or $install-new-release-from-repo in Codex directly. The same skill handles installation and updates; it is not bundled with the installed plugin. See updates and recovery.
Point the assistant to a page or component, then ask:
$design critique the checkout page and prioritize the three most useful improvements
In Cursor, replace $design with /design. Follow up with the change you want:
$design polish the checkout form: improve spacing and error messages, keeping our existing components
You can also omit the command and describe what you want to achieve in your own language, including setup, status, diagnosis, or questionnaire requests. Design chooses a suitable command and briefly explains its choice. Explicit commands take precedence.
Design can also be selected automatically for matching interface requests. It uses existing PRODUCT.md, DESIGN.md, and .impeccable/ context. Project setup previews changes for your approval; optional checks remain your choice.
Before interface work, Design checks the relevant project's context and configuration. It reports missing context or proposed adjustments and continues permitted work. Deliberately disabled checks are valid; no setup or migration happens without your confirmation.
- Usage guide — examples for building, refining, reviewing, and gathering stakeholder input.
- Command reference — all commands and when to use them.
- Documentation — project setup, troubleshooting, and maintainer guides.
Design includes the Impeccable design toolkit. See upstream provenance, LICENSE, and third-party notices.
Design includes pinned Motion best practices for CSS, JavaScript, React and Vue. Ask /design motion ... in Cursor or $design motion ... in Codex for animation implementation and API guidance. Direct /motion and $motion invocations are also available; Design remains the automatic entrypoint.
Native packages include the anonymous Motion documentation MCP. The host may require enabling it after installation. Search and free example resources need that connection; local guidance works offline. No account, paid tools, automatic package installation or migrations are included. General animation direction stays with Impeccable and your existing product context. Start with Motion usage examples and Cursor/Codex prerequisites and connection checks. For upstream updates, see Motion maintenance.