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.
Was es macht
Leitet das Modell an, mit dem Server penpot-mcp UI/UX-Designs in Penpot zu erstellen: Es prüft zuerst, ob ein Designsystem vorhanden ist, untersucht die Dateistruktur, legt Boards, Formen und Text an, wendet Flex-Layouts an, platziert neue Screens ohne Überlappung und prüft das Ergebnis per Export. Enthalten sind Standard-Tokens für Abstände, Typografie und Farben (nur genutzt, wenn Sie kein Designsystem haben), gängige Mobile- und Desktop-Layouts, Komponenten-Checklisten, Schnellchecks zur Barrierefreiheit (Kontrast 4,5:1, Touch-Ziele 44 px) und Hinweise zu Eigenheiten der Penpot-API. Vier Referenzdateien behandeln Komponenten, Barrierefreiheit, Plattformrichtlinien und die MCP-Einrichtung.
So funktioniert es
- Das Modell ruft zuerst ein Penpot-MCP-Werkzeug auf; ist es nicht verbunden, fragt es Sie, bevor es die Einrichtung erklärt.
- Es liest die Datei über die Penpot-Plugin-API und erstellt oder ändert Boards und Elemente.
- Es exportiert Formen zur Kontrolle und kann CSS aus einer Auswahl extrahieren.
Geeignet für
Screens und Designsysteme in Penpot gestalten, ein Design anhand von Barrierefreiheitsregeln prüfen.
Mittleres Risiko: Es arbeitet über den Penpot-MCP-Server und führt JavaScript in Ihrer geöffneten Penpot-Datei aus, kann dort also Formen anlegen, ändern oder löschen; arbeiten Sie an einer Kopie. Die Einrichtung installiert Fremdcode (`penpot-mcp` klonen, `npm install`, `npm run bootstrap`, lokale Ports 4400-4402) und lädt ein Plugin von localhost; prüfen Sie das Repository vorher. Standardmäßig öffnet dieser Code die Ports 4402 und 4403 für das ganze lokale Netz, sodass andere sich verbinden und Code ausführen könnten; beschränken Sie sie auf Ihren Rechner. Die Bild-Export/-Import-Tools lesen und schreiben beliebige absolute Pfade. Getestet: lokal installiert, mit einer Penpot-Cloud-Datei verbunden, das Modell baute einen Login-Bildschirm, ich glich die Zeichenfläche mit seiner Beschreibung ab. Es meldete: keine Komponenten, Zustände oder Interaktionen.