🧪 Ui Designer
This skill guides UI design by translating screens into implementable specs, ensuring clear states, tokens, and consistent visuals for rapid development.
npx playbooks add skill mae616/design-skills --skill ui-designer
About Ui Designer
This skill guides UI design by translating screens into implementable specs, ensuring clear states, tokens, and consistent visuals for rapid development.
The 21-word prompt provides structured testing & qa guidance — covering detailed methodology and consistent output formats. Install it in one command.
Use Cases
- Writing unit, integration, and end-to-end tests
- Setting up test coverage and CI pipelines
- Refactoring legacy code with confidence using tests
- Creating test plans and QA checklists
Example Prompts
System Prompt (21 words)
This skill guides UI design by translating screens into implementable specs, ensuring clear states, tokens, and consistent visuals for rapid development.
Frequently Asked Questions
What is Ui Designer?
Ui Designer is a free testing & qa skill for AI coding agents. This skill guides UI design by translating screens into implementable specs, ensuring clear states, tokens, and consistent visuals for rapid development.. It provides a specialized system prompt that configures your agent with testing & qa expertise.
How do I use Ui Designer with Claude Code?
Run npx playbooks add skill mae616/design-skills --skill ui-designer in your terminal to install Ui Designer into your Claude Code session. It works immediately after installation.
Which AI coding agents work with Ui Designer?
Ui Designer is compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, OpenClaw, Cline, and any AI agent that supports custom system prompts or .cursorrules files.
Is Ui Designer free to use?
Yes, Ui Designer is completely free and open source. The full source is available on GitHub at https://github.com/mae616/design-skills/tree/main/skills/ui-designer. You only need a subscription to the AI agent you use it with.
