In short:
ak-stitchhas Google Stitch draw the screen you describe, shows you the image for feedback, then exports Tailwind HTML, a PNG and DESIGN.md. Those files go toak-frontend-design,ak-ui-ux-pro-maxorak-ui-styling. It does not write React or Vue components; when Stitch credits run out, it points you toak-ui-ux-pro-max.
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 quick screen design so there is something to build code from, or when you want to compare a few layout or color options side by side. You do not need it when you already have a design and only need to write components: its export is static HTML, and building the code belongs to another skill.
flowchart LR
A["Screen idea"] --> B["ak-stitch"]
B --> C["Preview image, HTML, DESIGN.md"]
C --> D["ak-frontend-design"]
C --> E["ak-ui-ux-pro-max"]
C --> F["ak-ui-styling"]
B --> G["Out of credits: ak-ui-ux-pro-max"]Four concepts to know:
| Concept | Question | Example |
|---|---|---|
| Screens and screen IDs | How do you export or edit the exact design you just saw? | Each generation returns a screen ID plus an image link. Export and edit both reuse that ID. |
| One Stitch project per repo | Where does Stitch keep this repo's designs? | The repo my-shop gets its own my-shop project. With an active plan checkout-flow, designs go into the project my-shop/checkout-flow. |
| Credits and the local counter | How many more generations do you have today? | One screen plus 3 variants costs 4 credits. Below 20% left, it warns you. |
| DESIGN.md | What does the code-building skill read from the design? | A list of colors, font sizes, spacing and blocks such as <nav>, <form>, written as Tailwind classes. |
The credit counter lives on your machine and resets to 0 every day on UTC time; it is only an estimate, not your account's real limit.
Sample prompt for a new screen:
/ak-stitch Mobile checkout page for the <app name> app:
card entry form, cart summary, a "Pay" button.
Done when: I have an image to review, then export HTML and DESIGN.md.This skill has no flags.
Below is the detailed version: the run flow, 5 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-stitch: design UI with Google Stitch, then hand off to code" on modernEngineer and apply it to this repo.
1. Call the content_get tool of the modernengineer MCP server with locale "en", slug "ak-stitch". 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-stitch
