In short:
ak-frontend-designtakes a request, a screenshot, a video or a URL, picks a path from your intent, writes a 7-line design brief and builds from tokens. It grades the rendered page itself at 375, 768 and 1440px and fixes it until it passes; with a URL it audits the UX and only fixes things when you ask. It does not make up numbers or customer praise, and it does not type passwords during an audit.
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 need a landing page, a product screen, a page rebuilt from a screenshot, a design spec for someone else to build, or a UX check of a product that is already live. You do not need the full 3 grading rounds when you only want to try a component quickly: the quick prototype path still has a short brief and one grading round.
flowchart LR
A["Request, screenshot, video or URL"] --> B["ak-frontend-design"]
B --> C["Working UI + scorecard"]
B --> D["Design spec, no code"]
B --> E["UX audit report"]
E --> F["Fixes when you ask"]Four concepts to know:
| Concept | Question | Example |
|---|---|---|
| Path | Do you want to keep the current UI, make a new one, rebuild from a reference, or inspect a live product? | With an existing design system, it reads the current tokens and components first. Give it a screenshot and the screenshot decides the layout. Give it a URL to audit and it walks through every page. |
| Design brief | Who is this UI for, where is it used, which direction does it take, and why? | Scene: clinic front desk, shared desktop, fluorescent light, constant interruptions leads to a light background and high density. The 7 lines are Register, Scene, Direction, Color, Type, Signature, Dials, and they stay fixed through every fix round. |
| Brand or Product | Is this a page meant to impress, or a tool for daily work? | A landing page is Brand: variance/motion/density dials default to 7/5/3, a contrasting font pair, one entrance effect. A dashboard is Product: 3/2/6, one font family, accent color only for the primary action, selected state and focus. |
| Grade the rendered page | What does the real page look like, not what the code "should" look like? | A script captures the page at 375, 768 and 1440px and prints a text report: horizontal overflow, clipped text, low contrast, small tap targets. Then it scores 12 items, 0 to 2 points each, aiming for 20/24 or more with no item below 1. |
Your request, your brand assets and an existing design system always beat the skill's defaults; the defaults only apply where the brief is silent, so the result does not turn generic.
Sample prompt for a new landing page:
/ak-frontend-design Build a landing page for <product name>, a booking app
for small car repair shops. Audience: shop owners, viewing on their phones mid-shift.
Constraint: use the logo and the orange color already in the brand/ folder.
Do not make up numbers or customer praise.This skill has no flags.
Below is the detailed version: the run flow, 6 situations with prompts, 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-frontend-design: build tasteful UI and grade the real page" on modernEngineer and apply it to this repo.
1. Call the content_get tool of the modernengineer MCP server with locale "en", slug "ak-frontend-design". 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-frontend-design
