Implement login and dashboard screens from Penpot mockup

claude-desktop commented

2026-04-15 20:24:11 +00:00

Collaborator

User story

As a visitor of the dummy-app, I want to sign in through a login page and land on a dashboard that mirrors the Penpot mockup, so that we have a realistic, end-to-end demo target for the Firefox + Penpot MCP walkthrough video.

Context

This repo exists purely as a demo fixture for a video showcasing Claude Code's ability to drive the Firefox MCP and the Penpot MCP together: read a design from Penpot, implement it from scratch, then open it in Firefox to compare against the mockup.

The source mockups live on page 2 of the first file in the koinos Penpot organisation:

Acceptance criteria

Route /login renders the layout from the Penpot login board (same structure, spacing, and hierarchy).
Form fields and primary CTA match the mockup's labels and placeholder copy.
Typography, colour tokens, and spacing are sourced from the Penpot design (not invented).
Submitting the form with any non-empty credentials navigates to /dashboard (dummy auth — no backend).
Basic form validation: empty fields disable the submit button or show inline errors consistent with the mockup.

Dashboard screen

Route /dashboard renders the layout from the Penpot dashboard page (sidebar / topbar / main content regions as shown).
All static widgets, cards, and labels from the mockup are present with placeholder data.
Navigation items in the sidebar are clickable but may be inert (no secondary pages in scope).
Visual parity with the mockup is verifiable side-by-side in Firefox at desktop width.

Project plumbing

Dev server runs with a single command and serves both routes.
README documents how to run the app and points back to this issue and the Penpot links.

Out of scope

Real authentication, user store, or session handling.
Backend / API layer.
Responsive/mobile breakpoints not shown in the mockup.
Any pages other than /login and /dashboard.
Automated visual-regression tests (manual Firefox comparison is enough for the demo).

References

Penpot file: koinos organisation → first file → page 2
Purpose: demo video for Firefox MCP + Penpot MCP integration

## User story As a **visitor** of the dummy-app, I want to **sign in through a login page and land on a dashboard** that mirrors the Penpot mockup, so that we have a realistic, end-to-end demo target for the Firefox + Penpot MCP walkthrough video. ## Context This repo exists purely as a demo fixture for a video showcasing Claude Code's ability to drive the Firefox MCP and the Penpot MCP together: read a design from Penpot, implement it from scratch, then open it in Firefox to compare against the mockup. The source mockups live on **page 2** of the *first file* in the **koinos** Penpot organisation: - **Login board**: https://design.jacquin.app/#/workspace?team-id=689d7fa4-f94b-81d4-8007-debbc5233e40&file-id=689d7fa4-f94b-81d4-8007-debbc95d178e&page-id=db8c68ee-0dac-808b-8007-dec9a5568c47&board-id=1526a241-db59-806e-8007-dff6c1d15509 - **Dashboard page**: https://design.jacquin.app/#/workspace?team-id=689d7fa4-f94b-81d4-8007-debbc5233e40&file-id=689d7fa4-f94b-81d4-8007-debbc95d178e&page-id=db8c68ee-0dac-808b-8007-dec9a5568c47 ## Acceptance criteria ### Login screen - [ ] Route `/login` renders the layout from the Penpot login board (same structure, spacing, and hierarchy). - [ ] Form fields and primary CTA match the mockup's labels and placeholder copy. - [ ] Typography, colour tokens, and spacing are sourced from the Penpot design (not invented). - [ ] Submitting the form with any non-empty credentials navigates to `/dashboard` (dummy auth — no backend). - [ ] Basic form validation: empty fields disable the submit button or show inline errors consistent with the mockup. ### Dashboard screen - [ ] Route `/dashboard` renders the layout from the Penpot dashboard page (sidebar / topbar / main content regions as shown). - [ ] All static widgets, cards, and labels from the mockup are present with placeholder data. - [ ] Navigation items in the sidebar are clickable but may be inert (no secondary pages in scope). - [ ] Visual parity with the mockup is verifiable side-by-side in Firefox at desktop width. ### Project plumbing - [ ] Dev server runs with a single command and serves both routes. - [ ] README documents how to run the app and points back to this issue and the Penpot links. ## Out of scope - Real authentication, user store, or session handling. - Backend / API layer. - Responsive/mobile breakpoints not shown in the mockup. - Any pages other than `/login` and `/dashboard`. - Automated visual-regression tests (manual Firefox comparison is enough for the demo). ## References - Penpot file: koinos organisation → first file → page 2 - Purpose: demo video for Firefox MCP + Penpot MCP integration

claude-desktop added this to the v0.1.0 milestone

2026-04-15 20:27:37 +00:00

claude-desktop added the

area:frontend

type:user-story

labels

2026-04-15 20:27:42 +00:00