In short:
ak-ui-ux-pro-maxuses a script to search a built-in design dataset (50+ styles, 161 color palettes, 99 UX rules, 25 chart types), then uses the results to build an interface or review an existing one. For a small job like one component, it searches the right area directly and does not create a new design system. It is not for backend, API or infrastructure work.
Disclosure: I maintain AgentKit and have an affiliate relationship with it: the AgentKit link in this post is an affiliate link; buying through it gets you 30% off.
Summary
Use it when you are about to build or change something users see and click: a new page with no style direction yet, a new component, a mobile app screen, or a UX and accessibility review of an existing page. You do not need it when the work changes nothing in the interface, such as an API, a database, infrastructure or a script with no UI.
flowchart LR
A["UI request"] --> B["ak-ui-ux-pro-max"]
B --> C["Design system or search results"]
C --> D["Build the UI, run the pre-delivery checklist"]
B --> E["Review findings with fixes"]
A2["Backend, API, infrastructure work"] --> F["Skill not needed"]Four concepts to know:
| Concept | Question | Example |
|---|---|---|
| Design system | Which style, colors and fonts fit this product, and what should it avoid? | Searching "fintech crypto" returns a set: layout pattern, style, palette, font pairing, effects and the anti-patterns to avoid. |
| Search by domain | Need just one area, such as color, fonts, charts or UX rules? | To add a chart to a dashboard, search the chart domain. No need to rebuild the whole design system. |
| MASTER and per-page overrides | Does this page follow the shared rules or its own? | The checkout page has its own override file, so the rules there win. A page without its own file uses MASTER.md only. |
| 10 rule groups by priority | When reviewing a UI, which group comes first? | Accessibility (4.5:1 contrast, labels on icon-only buttons) and Touch (44×44 minimum touch target) weigh the most, so check them first. Charts come last. |
Sample prompt for a new page:
/ak-ui-ux-pro-max page Build a landing page for <product name>, a spending tracker app for young people.
Tone: modern, trustworthy. Use the stack already in the project.
Needs: hero, social proof (reviews, user count), pricing table.| Flag | What it is for | Since ak |
|---|---|---|
--style | Passes a style name, as --style <style> | 2.15.0 |
--framework | Passes a framework name, as --framework <fw> | 2.15.0 |
Below is the detailed version: the run flow, 5 situations with prompts, each flag explained, the change history by ak release, and common pitfalls. The detailed version and the interactive page are for subscribers. Your agent can also search them through the portal's MCP.
Opens when your account has subscriber access
This guide is for subscribers
Once your account has access, the full piece, the interactive visual and the agent call all open.
- Sign in or create a modernEngineer accountReading access belongs to your account email.
- Choose a plan on the pricing page1, 3 or 12 months, paid by VietQR bank transfer. Access opens about a minute after the money arrives.
- Or redeem a Facebook subscriber codePeople supporting the page on Facebook get an activation code by message each month.
Already a subscriber? Sign in to read.
Use this piece in your agent
Get an API keyCopy the text below and paste it into Claude Code, Codex or whichever agent you use. The agent reads the piece and checks it against the repo you have open.
Read "ak-ui-ux-pro-max: pick style, color, fonts and review UX" on modernEngineer and apply it to this repo.
1. Call the content_get tool of the modernengineer MCP server with locale "en", slug "ak-ui-ux-pro-max". If the modernengineer MCP server is not connected, stop and walk me through connecting it from https://modernengineer.dev/en/mcp.
2. Summarize the main steps of the piece and point out which apply to this repo.
3. Propose concrete changes and ask me before editing any file.Connect MCP in Claude Code (once)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Reading the full piece over MCP needs an API key from a subscriber account or one that bought this guide. Without access, the agent only gets the opening.
- Version
- v1.0.0
- Updated
- 22/10/2026
- Licence
- All rights reserved
- Slug
- ak-ui-ux-pro-max
