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.
Qué hace
Guía al modelo para crear diseños UI/UX en Penpot mediante el servidor penpot-mcp: primero comprueba si existe un sistema de diseño, inspecciona la estructura del archivo, crea tableros, formas y texto, aplica maquetaciones flex, coloca las pantallas nuevas sin solapamientos y valida el resultado exportando formas. Incluye tokens predeterminados de espaciado, tipografía y color (se usan solo si no tienes un sistema de diseño), maquetaciones habituales para móvil y escritorio, listas de comprobación de componentes, comprobaciones rápidas de accesibilidad (contraste 4.5:1, áreas táctiles de 44px) y notas sobre particularidades de la API de Penpot. Cuatro archivos de referencia cubren componentes, accesibilidad, directrices de plataforma y configuración de MCP.
Cómo funciona
- El modelo prueba una herramienta MCP de Penpot; si no está conectada, te pregunta antes de explicar la configuración.
- Lee el archivo con la API de plugins de Penpot y, después, crea o modifica tableros y elementos.
- Exporta formas para comprobar el diseño y puede extraer CSS de una selección.
Ideal para
Diseñar pantallas y sistemas de diseño en Penpot, y revisar un diseño conforme a las reglas de accesibilidad.
Riesgo medio: funciona a través del servidor MCP de Penpot y ejecuta JavaScript dentro de tu archivo de Penpot abierto, por lo que puede crear, cambiar o eliminar formas en él; trabaja sobre una copia. La configuración instala código de terceros (clona `penpot-mcp`, `npm install`, `npm run bootstrap`, puertos locales 4400-4402) y carga un plugin desde localhost, así que revisa ese repositorio primero. De forma predeterminada, ese código también abre los puertos 4402 y 4403 a toda la red local, por lo que otros podrían conectarse y ejecutar código; restringe esos puertos a tu equipo. Sus herramientas de exportación e importación de imágenes leen y escriben cualquier ruta absoluta. Prueba realizada: lo instalé localmente, lo conecté a un archivo de Penpot en la nube, el modelo creó una pantalla de inicio de sesión y comparé el lienzo con su descripción. No informó de componentes, estados ni interacciones.