About design-ui
design-ui is a UI design skill for choosing guidance suited to product interfaces or marketing and creative work. It also points to planning, aesthetic calibration, animation, accessibility, and frontend implementation references.
Key features
- 01Guidance for product UI
- 02Guidance for marketing and creative UI
- 03Low-fidelity planning reference
- 04Aesthetic anti-pattern guidance
- 05Related animation, audit, and implementation skills
Use cases
- 01Planning a SaaS or admin interface
- 02Developing a marketing or brand experience
- 03Checking UI direction against anti-patterns
Install
Copy the command and run it in a terminal.
$
npx skills add https:/ / github.com/ mblode/ agent-skills --skill design-uiAfter installing, type/design-uiin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
aesthetic-direction.mddesign-in-code.mdmarketing-ui.mdproduct-ui.mdDetails
From the project READMEUI Design
Choose the right track and follow its guidance.
Tracks
- Product UI (SaaS/admin/data-heavy): See product-ui.md
- Marketing/brand/creative: See marketing-ui.md
References
- Low-fi planning: See design-in-code.md
- Anti-patterns and calibration: See aesthetic-direction.md
Related skills
ui-animationfor motion timing, easing, and reduced-motion behaviouraudit-uifor accessibility and final QAimplement-frontendfor React/TypeScript implementation standards
Comments
Markdown supported