Hand-Drawn Visual Notes
+6
For UX and product interface designers
AI tools for UX design, from flow to working interface
A useful interface workflow has to survive real content, states, devices, and implementation. These Skills help with flows, UI production, browser-ready pages, screenshots, and stakeholder explanations while you keep the product logic and visual system coherent.
Start with the interface artifact you need to test
Move one piece of the product from assumption to something the team can inspect in context.
Map the flow before drawing the screens
9 SkillsMake entry points, decisions, permissions, errors, and recovery routes visible before polishing the happy path.Compare matching SkillsBuild the working interface states
89 SkillsTurn real data and product rules into responsive UI the team can use and review in a browser.Compare matching SkillsBuild the product landing route
71 SkillsConnect promise, proof, product moments, and action in the same visual system as the app.Compare matching SkillsTurn real UI into release screenshots
In reviewCapture a clear sequence without inventing features, controls, or states the product does not have.See the nearest matchesDocument the visual system behind the screens
1 SkillMake type, color, spacing, components, and behavior consistent enough for the next contributor.Compare matching SkillsExplain the flow to stakeholders
11 SkillsShow the user problem, key interaction, edge cases, and result in a short visual narrative.Compare matching SkillsSkills you can judge with real states and content
Compare the output, implementation depth, dependencies, and supported handoff before adding a workflow to the product process.
Job 1 of 6
Map the flow before drawing the screens
Make entry points, decisions, permissions, errors, and recovery routes visible before polishing the happy path.
+6
Job 2 of 6
Build the working interface states
Turn real data and product rules into responsive UI the team can use and review in a browser.
Job 3 of 6
Build the product landing route
Connect promise, proof, product moments, and action in the same visual system as the app.
Job 4 of 6
Turn real UI into release screenshots
Capture a clear sequence without inventing features, controls, or states the product does not have.
More Skills for this job are under review.
A clean static screen is a starting point. Test focus, responsive behavior, long content, empty data, errors, and permissions before calling the interface ready.
Job 5 of 6
Document the visual system behind the screens
Make type, color, spacing, components, and behavior consistent enough for the next contributor.
Job 6 of 6
Explain the flow to stakeholders
Show the user problem, key interaction, edge cases, and result in a short visual narrative.
Real output from matching Skills
Every example comes from a Skill shown on this page. The media is here to make the choice easier, not to decorate an empty promise.
Interface check
Choose a workflow that can carry the whole product state
The best-looking frame matters less than a coherent experience across real conditions.
Start with users and state
Define who is acting, what they know, what can fail, and what happens next. The layout should follow that logic.
Use semantic design rules
Provide roles for color, type, spacing, controls, and feedback so new screens extend a system instead of copying a screenshot.
Review the result in the browser
Check keyboard use, focus, contrast, responsive widths, loading, empty, error, and long-content behavior with the real implementation.
Use it inside the agent you already work with
A Skill becomes a repeatable way for your agent to do this job. Your brief and output stay in the project where the rest of the work already lives.
Pick the Skill
Check the output examples, required inputs, dependencies, and price before you install.
Install it once
Ask your agent to install the Skill. The trusted guide handles the setup and authorization.
Write the brief
Describe the ui designers job in plain language, review the result, and keep the final file.
Works with the agents you already use
- Claude Code
- Codex
- Cursor
Gemini CLI
Cline
Questions UI designers ask
Can a Skill follow an existing design system?
Yes when you provide tokens, components, conventions, and representative screens. Review whether it reuses the system or silently creates parallel styles.
Will I get code or only a mockup?
The output depends on the Skill. Listings identify browser-ready HTML, framework code, images, video, or document formats before installation.
Can it handle accessibility requirements?
A Skill can support accessible structure, but the team must still test semantics, keyboard flow, focus, contrast, motion, zoom, and assistive technology behavior.
How do I prevent invented product behavior?
Give explicit state rules and real product references. Treat any new action or data as a proposal that needs product and engineering review.
Keep going from here
Design team
Product work
Browse outputs
Move one interface from a picture to a testable state.
Bring the real content, rules, and edge cases. Choose a Skill that leaves you with a clear implementation or handoff.