# Feedback and voting board > A warm cream feedback board: an idea collects votes, rises past the leader and takes the top spot. - Category: Developer tools - Version: 1.0 - Source: https://ownlyplans.com/bhaskar/feedback-and-voting-board/ ## Overview Five feature requests with vote boxes and status pills. The second idea gains votes, highlights and swaps places with the first. Topic inspired by OpenDesign's public dashboard prompt list; this prompt and design are written from scratch. ## Tech stack - CSS - Dashboard - HTML ## Build steps ### 1. Paste the prompt The AI builds the board with the five ideas. Prompt: ```text Build a single-file HTML feedback and voting board, 1280x720, warm cream background #fbf7f0, ink #241d12, accent amber #c58a1d. System fonts, no libraries. Header: H1 "Feedback board", muted "Vote for what we build next" and a dark "+ New idea" button top right. Five absolutely positioned white cards (96px tall, 20px radius, soft shadow, 114px apart). Each has a 66px vote box (small up arrow, a count, the word "votes"), a title with a muted "Requested by N teams" line and a status pill on the right (Planned amber, Open blue, Shipped green): Dark mode for the dashboard 142, Export reports to CSV 138, Slack notifications 121, Two-factor sign in 97, Custom domains 64. Motion (8 second loop): cards rise in with a stagger. The count of Export reports to CSV ticks up 139, 140, 145 (CSS @property integer), its vote box turns amber and the card moves to the top slot while Dark mode moves down. Reset at the end. Respect prefers-reduced-motion. Return only the complete HTML. ``` ### 2. Check the count The second card should tick up to 145. ### 3. Check the swap It should move above the first card smoothly. **Done when:** You can see it working in the browser. ### 4. Make it real Store votes per user and sort by votes. ## Assets ### prompt.md — The full prompt. ~~~~ # Feedback and voting board Copy this prompt into Claude, Cursor or Lovable. ```text Build a single-file HTML feedback and voting board, 1280x720, warm cream background #fbf7f0, ink #241d12, accent amber #c58a1d. System fonts, no libraries. Header: H1 "Feedback board", muted "Vote for what we build next" and a dark "+ New idea" button top right. Five absolutely positioned white cards (96px tall, 20px radius, soft shadow, 114px apart). Each has a 66px vote box (small up arrow, a count, the word "votes"), a title with a muted "Requested by N teams" line and a status pill on the right (Planned amber, Open blue, Shipped green): Dark mode for the dashboard 142, Export reports to CSV 138, Slack notifications 121, Two-factor sign in 97, Custom domains 64. Motion (8 second loop): cards rise in with a stagger. The count of Export reports to CSV ticks up 139, 140, 145 (CSS @property integer), its vote box turns amber and the card moves to the top slot while Dark mode moves down. Reset at the end. Respect prefers-reduced-motion. Return only the complete HTML. ``` ~~~~ ### index.html.md — Complete code of the result in the video. ~~~~ # index.html The finished result as one file. Save it as index.html and open it. ```html Feedback and voting board

Feedback board

Vote for what we build next
votes
Dark mode for the dashboardRequested by 38 teams
Planned
votes
Export reports to CSVRequested by 31 teams
Open
votes
Slack notificationsRequested by 27 teams
Open
votes
Two-factor sign inRequested by 19 teams
Shipped
votes
Custom domainsRequested by 12 teams
Open
+ New idea
``` ~~~~ ## Build instructions by tool ### Claude Code Open a terminal in an empty folder, run `claude`, then paste the prompt. ```text Build the "Feedback and voting board" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/feedback-and-voting-board/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the count → Check the swap → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Claude Code.) ``` ### Cursor Open an empty folder in Cursor, start an Agent chat, then paste the prompt. ```text Build the "Feedback and voting board" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/feedback-and-voting-board/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the count → Check the swap → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Cursor.) ``` ### Lovable Start a new Lovable project and paste the prompt as your first message. ```text Build the "Feedback and voting board" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/feedback-and-voting-board/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the count → Check the swap → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Lovable.) ``` ## Definition of done - Every build step is complete and the app runs locally. - The main user flow works end to end. - Share your build on OwnlyPlans with a demo link, build time and tool.