Quick summary: UI Craft is a skill that helps an agent keep one consistent design direction from the first idea through code and screenshot checks. You install the whole skill folder into your project, run the validator, then call
$ui-craftwith one of the build, redesign, audit, or study modes. It does not replace the framework or component library you already use. It decides how the interface should look and behave, then makes the agent prove it with screenshots.
When you ask an agent for UI, you easily get a page that is polished but generic: a big hero, three feature cards, a bento grid, a call to action, and a design that would survive a product rename almost unchanged. I call that "AI slop": interfaces generated quickly that look good enough but lack the product's own logic, lean on default patterns, carry untrustworthy content, or were never checked in real usage states.
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. AgentKit appears in the provenance section below.
UI Craft fixes this at the decision level, not just the decoration layer. The skill locks the design intent and requires the agent to bring evidence (screenshots, test results) before reporting done. I will explain when to use it, how to install and validate it, the modes with sample prompts, then the order the agent works in and how to upgrade. Behavior described here follows the skill's own documentation.
When to use it
Use UI Craft when you need to:
- Build or redesign a page or component.
- Audit UI from both source and rendered output.
- Study design DNA from screenshots or URLs you provide.
- Compare exactly three design directions before implementation.
- Create a bold but still usable
breakoutdirection.
Skip it for backend-only work or mechanical CSS edits against a locked specification.
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 "UI Craft: from install to your first prompt" on modernEngineer and apply it to this repo.
1. Call the content_get tool of the modernengineer MCP server with locale "en", slug "ui-craft-getting-started". 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
- 24/07/2026
- Licence
- Subscriber-only; redistribution prohibited
- Slug
- ui-craft-getting-started
