I designed the login screen as a 390×844 board named "Login – Brew & Co". It sits at x=1200 on Page 1, to the right of the board that was already there, which I left alone. I exported it and checked the image. All elements sit inside the board.
What's on it
- Logo and title: a 72px espresso-brown circle with a "B&" mark. Below it are "Brew & Co" at 36px bold and the subtitle "Sign in to order your coffee" at 16px.
- Form: "Email" and "Password" labels sit above white 52px fields with 12px corners and a 1px border. The placeholders are "[email protected]" and "Enter your password". The password field has a "Show" toggle.
- Forgot password?: an underlined, right-aligned link inside a 44px-tall touch area.
- Sign in: a filled 56px button in dark brown with white 18px bold text. It's the strongest element on the screen.
- Create account: an outlined 56px secondary button, set off by an "or" divider.
Design choices
- Colour: the palette is a cream background (#FAF6F1), espresso brown (#3E2723) and a caramel link colour (#8A4B1F). I estimated the contrast rather than measuring it. I expect the text to clear 4.5:1 and the field borders to clear 3:1.
- Spacing: the layout uses a 24px side margin and mostly 8px-grid spacing.
- Touch targets: the buttons are 56px tall and the fields 52px, which is above the 44px minimum.
Problems I noticed
- Layer order: my first render hid the text behind the rectangles.
insertChildat the end of the children list put new shapes at the bottom of the stack. I fixed it by sending the rectangles to the back, and the second export is correct. An earlier attempt had also failed on a bad property name (textAligninstead ofalign), so I deleted that partial board before rebuilding. - Not interactive or reusable: this is a static layout with no flex layout, components or prototype links. The "Show" toggle and the "Forgot password?" touch area are not wired to anything.
- Missing states: there are no focus, error, filled or loading states. The password field also shows a placeholder, not masked dots.
- Placeholder contrast: the placeholder text (#6F5F57) is only just above the 4.5:1 threshold.
- Logo: the mark is a simple "B&" in a circle, not a real brand asset.
- Layout: there are no status-bar or safe-area elements, and the bottom ~120px of the screen is empty. A "Continue as guest" or terms line could fill it, or the content could shift down a little.
- Fonts: I used Penpot's default font and didn't pick a typeface.
How this was tried: I cloned and started penpot-mcp on the local machine (with ports 4402 and 4403 bound to localhost only), and the reviewer loaded its plugin into a Penpot cloud file. During the run only this skill and Penpot's MCP tools were allowed. The model created a new board in an empty file. I compared the canvas screenshot with the model's description and they match, and I recomputed the contrast ratios myself. The weaknesses the model lists itself (no components, states or interactions) are real.
What it does
Guides the model to create UI/UX designs in Penpot using the penpot-mcp server: it checks for an existing design system first, inspects the file structure, creates boards, shapes and text, applies flex layouts, positions new screens without overlap, and validates the result by exporting shapes. It carries default spacing, typography and colour tokens (used only if you have no design system), common mobile and desktop layouts, component checklists, accessibility quick checks (contrast 4.5:1, 44px touch targets) and notes on Penpot API gotchas. Four reference files cover components, accessibility, platform guidelines and MCP setup.
How it works
- The model tries a Penpot MCP tool; if it is not connected it asks you before explaining setup.
- It reads the file with the Penpot plugin API, then creates or modifies boards and elements.
- It exports shapes to check the design and can extract CSS from a selection.
Good for
Designing screens and design systems in Penpot, reviewing a design against accessibility rules.
Medium risk: it works through the Penpot MCP server and runs JavaScript inside your open Penpot file, so it can create, change or delete shapes in it; work on a copy. Setup installs third-party code (clone `penpot-mcp`, `npm install`, `npm run bootstrap`, local ports 4400-4402) and loads a plugin from localhost, so review that repository first. By default that code also opens ports 4402 and 4403 to the whole local network, so others could connect and run code; restrict them to your machine. Its image export/import tools read and write any absolute path. Test-run: I installed it locally, connected it to a cloud Penpot file, the model built a login screen, and I checked the canvas against its description. It reported no components, states or interactions.